まえちゃんろぐ

日々の生活の中での気付き、学んだこと、体験したことをアウトプットするブログ(雑記多めです)| プログラミング 本 ワークアウト 茶道

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

time 2018/06/24

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

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

sponsored link

開発環境

  • 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を返しているところがポイントになります。

実行結果

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

おわり

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

参考記事

販売中チケット

プログラミング、Webサービスの作り方教えます

自分のスキルを販売しております。お困りの方はご遠慮なくご連絡頂ければと思います。

down

コメントする




スポンサードリンク

書いてる人

maechan

maechan

ベンチャー企業、フリーランス、スタートアップを経験。開発業務、人事業務に従事していました。現在は農業系スタートアップ企業でエンジニアとして働いています。リモートワークをしているノマドサラリーマンです。詳しいプロフィールはこちら。 [詳細]

販売中チケット

プログラミング、Webサービスの作り方教えます 一人で悩まず!お気軽にご相談ください!

その他のチケットはこちら

Instagram