この記事は旧KISANAブログのアーカイブです

環境

Ruby 3.0.2
Rails 6.1.4
EasyMDE 2.15.0

EasyMDEの導入

$yarn add easymde
/app/javascript/packs/application.js

require("easymde")

/app/javascript/packs/任意のファイル.js

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')
});

詳細は公式READMEで。

Railsのエンドポイント

モデル作成
$rails g model attachment
/app/models/attachment.rb

has_one_attached :image

/app/controllers/任意のcontroller.rb

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

/config/router.rb

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

忘れず
rails db:migrate

完成

文字を入れる空白部分に画像をドラッグアンドドロップすると非同期でアップロードされurlが帰ってきます。
1-editor

Archive Capture

*画像は省略しています。
capture