プログラミング

Ruby on Rails5 + AdminLTE 環境で WYSIWYG エディタ「Summernote」を使う方法

「Summernote」はWYSIWYGエディタを手軽に導入できるプラグイン、それをデザインテンプレートエンジン「AdminLTE」へ導入する方法を書きます。

開発環境

  • Ruby: 2.4.1p111
  • Rails: 5.1.2
  • AdminLTE: 2.3.11
  • Summernote: 0.8.10.0

※ AdminLTE は Yarn を使ってインストールしています。

実装

WYSIWYGエディタは、HTMLの知識がなくても、フォントサイズの大小・見出し文字・テーブル表記などを、直感的に使うことの出来るエディタのことです。

ポチポチすれば勝手にスタイルを適用してくれるこんな感じのエディタのことで、こちらが実際の「Summernote」の出力画面。

それを使って、今回は日記を投稿できるページを作ると想定します。

サーバーサイド側は、モデル「Diary」とコントローラー「DiariesController」を使って実装します。

モデルで定義した「body」カラムの中に入るデータを「Summernote」上で書けるように作っていきます。この「body」カラムの中に入力したHTMLタグがごっそり入る感じ。

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

コントローラーとモデル、routes.rb の作成と設定

コントローラー、モデル、ルートの設定はこんな感じで。ここはパパッと。

Summernote のインストール

下準備ができたところで、まずは「Summernote」のインストールを行います。

Gemfileに以下を追記。

追記後にbundle install --path vendor/bundleを実行します。

Summernote のスクリプト、スタイルシートのインポート

次はインストールした「Summernote」のインポート作業です。以下を参考にしてください。

スクリプトのインポート

インポート順序を意識することが重要で、AdminLTEのインポートの後に「Summernote」をインポートします。

また「Summernote」本体のインポートの後には、「Summernote」を日本語対応させるための「言語プラグイン」のインポートを行なっています。

スタイルシートのインポート

これで「Summernote」を使用できるようになりました。

Summernote の表示

「Summernote」を使う準備ができたので、いよいよ表示です。

今回はあまり綺麗な書き方ではないですが、「Summernote」用のスクリプトはビューの中に直接書いていきます。

ビューと JavaScript の設定

まず、ビューのベースとなる部分。

実際のエディタの部分はテンプレートに分けてレンダリングする形をとっています。

こちらがエディタ用のテンプレート。

「Summernote」の表示方法は、HTMLのinputタグにカスタムデータ属性dataを定義し、そこに key-value で{ provider: 'summernote' }を設定します。

ツールバーに表示するボタンは出し分けることができ、その設定はtoolbarオプションで操作します。ツールバーの詳しい使い方は以下が参考になります。

ツールバーのボタンのテキストを任意のものに変えたい場合

「Summernote」のちょっとしたハックですが、ツールバーのボタンのテキストを任意のものに変更したい場合は、直接スタイルを弄って適用させる方法でフォローできます

参考にしてみてください。

実際の出力画面

上手く設定できるとこんな感じで表示されます。ツールバーのボタンもきちんと動いてます。

おわり

「Summernote」っていい名前。

参考記事

記事内の写真出典元

Photo by Carlos Domínguez on Unsplash

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