[RoR] EasyMDE와 비동기적으로 이미지 드래그 앤 드롭🍭

컨디션

EasyMDE 가져오기

require("easymde")

import * as EasyMDE from 'easymde';
import "easymde/dist/easymde.min.css";

var easyMDE = new EasyMDE({
    uploadImage: true,
　　imagePathAbsolute: true,
    imageUploadEndpoint: '任意のエンドポイント',
    showIcons: ['strikethrough', 'code', 'table', 'redo', 'heading', 'undo', 'heading-bigger', 'heading-smaller', 'heading-1', 'heading-2', 'heading-3', 'clean-block', 'horizontal-rule'],
    element: document.getElementById('テキストエリアの任意のID')
});

Rails의 끝점

has_one_attached :image

skip_before_action :verify_authenticity_token, only: :attach
def attach
    attachment = Attachment.create! image: params[:image]
    render json: { filename: url_for(attachment.image) }
  end

post 'articles/attach', to: '任意のcontroller#attach'

완성