プログラミング

WYSIWYG エディタ「Summernote」に画像アップロード機能を実装する

WYSIWYGエディタ「Summernote」の画像アップロード機能を使用する方法。

開発環境

  • Ruby: 2.4.1p111
  • Rails: 5.1.2
  • Summernote: 0.8.10.0
  • aws-sdk-s3: 1.0.0.rc2

実装

Summernoteには画像をアップロードするための機能が用意されています。今回はその機能を使って画像をアップロードするプログラムを書いてみます。画像保存先は「AWS S3」です。

Summernoteの実装方法など、ベースとなるプログラムは以下の記事を参考に作成してください。

それでは作っていきます。

Summernote スクリプトの変更

Ruby on Rails5 + AdminLTE 環境で WYSIWYG エディタ「Summernote」を使う方法 で作成したエディタ用のテンプレートを以下のように変更します(ファイル名も変更)。

まずツールバーに、画像アップロード用モーダルを表示する為のボタンを設置(追記1)。

画像アップロードまわりの主な仕様は、画像アップロード用モーダルの「画像挿入」ボタンが押下された際に、callbacks: { onImageUpload: function(files, editor, welEditable) {} }がコールされる仕組みになっています(追記2)。

この辺りの仕様は以下の記事が参考になります。

sendFile()は画像アップロード用のメソッドを叩いています(追記3)。その中のAjax内の処理success: function(data) {}でアップロードされた画像をSummernote内に表示する処理を行なっています。

アップローダーとコントローラーの作成

Summernoteからコールする、画像をアップロードするメソッドを用意します。

Ruby on Rails5 から「aws-sdk-s3」を使って画像をアップロードするを参考に作成していきます。

用意するのはアップローダーとそれをコントロールするコントローラーを作成します。

※ ビューとルートの設定は割愛させていただきます。

コントローラーのpost_imageメソッドで、画像アップロード成功時にJSON形式で画像のURLを返しているところがポイントになります

実行結果

上手く動くとこんな感じになります。

おわり

断片的なコードが続いて読みにくいけど許してね。

参考記事

記事内の写真出典元

Photo by Cyrus Pellet on Unsplash

ABOUT ME
maechan
ベンチャー、フリーランス、スタートアップを経験。 開発業務、人事業務に従事していました。 現在は農業系スタートアップ企業でエンジニアとして働いています。 リモートワークをしているノマドサラリーマンです。茶道とワークアウトが趣味です。