プログラミング基礎知識

【プログラミング初心者向け】Ruby on Railsでブログ機能などに必要な wysiwygエディタ(リッチテキストエディタ)= summernoteの実装方法まとめ!

【プログラミング初心者向け】Ruby on Railsでブログ機能などに必要な wysiwygエディタ(リッチテキストエディタ)の実装方法まとめ!

webサービスの中やオリジナルのブログサービスを作成する中で、文章をブログのようにタイトルや太字にして入力したい場面が多くあるかと思います。

そのような場合は、普通のテキストフィールドでは難しく、リッチテキストエディタ・wysiwygエディタが必要になります!

そこで今回はそのリッチテキストエディタ・wysiwygエディタを簡単に実装する方法をまとめていきます!

そもそもリッチテキストエディタ・wysiwygエディタとは

wysiwygエディタとは「What You See Is What You Get」の頭文字からきており、最終結果がHTMLであるためWebブラウザ上で表示されるものと同様のコンテンツを直感的に編集できる機能の名称になります!

※ちなみにwysiwygエディタの読み方は「ウィジウィグエディタ」です!

そして、直感的に操作ができることからリッチテキストエディタとも呼ばれています!

おすすめgem「summernote」!

rubyでリッチテキストエディタを構築できるgemはたくさんありますが、私が利用しているのはsummernoteになります!

理由は
・無料
・機能が他のより充実している
・Githubスター8000越えと実績十分!

公式サイト
公式リファレンス

参考サイト

【Rails】summernoteを使って画像も投稿できるブログを作る

エラー参考サイト

javascriptがいまいち得意ではなく、毎回つまづきます・・・
いつも参考にしているサイトをまとめておきます

エラー参考サイト1

参考サイト2

それぞれ海外の質問サイトですが、コメントの中にそれぞれのverごとの成功例が書かれていますので試してみると良いと思います!

私の場合、rails版がなかなかうまくいかず

・headに以下分でsummernoteを取得

・scssはrails版でダウンロード済の物を利用(本来ならスクリプトでsummernote.jsと合わせて取得した方が良いかもです・・・)
・スクリプトで以下分を記載
$(document).ready(function() { $(‘#summernote’).summernote({ placeholder: ‘Hello stand alone ui’, tabsize: 4, height: 200 }); });

でうまく行きました。

js、jquery勉強しないと・・・

Turbolinksの無効化

turbolinksについて詳しいのはこちらの記事が参考にどうぞ
『Turbolinks』って、なんぞ?

今回の話で大事なのは「通常であればページが読み込まれたタイミングで load イベントが発生しますが、Turbolinks によって画面が切り替わった場合は load イベントは発生しません。」というところです

summernoteでは画面表示時にjqueryで反映させますので、turblinksがあるとそれが機能せず開いた時に表示されない・・・何故かリロードすると表示される・・・という現象に陥ります。
そのため、忘れず無効化しましょう。

無効化参考サイト
【Rails】turbolinksを無効化する