Railsアプリにwysiwygエディタのwysihtml5を導入する(turbolinks対応)

 

こんにちは、TUKATTI(@tukatti7772)です。

 

慣れてきたらこのブログでプログラミングの記事を書きたいと

思っていたのですが、今回初めて書いてみようと思います!

 

テーマは「wysihtml5のRubyonRailsアプリへの導入」です。

日本語で解説されているサイトがあまりなかったので、

この機会に書いてみようということで。

 

 

wysihtml5とは、wysiwygエディタの一種です。

wysiwygとは・・

 

WYSIWYG(アクロニム: ウィジウィグ)とは、

コンピュータのユーザインタフェースに関する用語で、

ディスプレイに現れるものと処理内容(特に印刷結果)

が一致するように表現する技術。

What You See Is What You Get(見たままが得られる)

の頭文字をとったものであり、

「is」を外したWYSWYG(ウィズウィグ)と呼ばれることもある。 

(Wikipediaより)

 

 

エディタは下の画像のような感じになります。

 

 

 

無駄な機能がついていないので、個人的にはとても使いやすいです!

無料で使えるのも良いですね。

 

さて、導入の手順ですが、railsのGemが提供されていますので、

Gemfileに下記の記述をして、bundle installします。

 

gem 'bootstrap-wysihtml5-rails'

 

 

次に、app/assets/stylesheets/application.cssに下記の記述を加えましょう。

 

*= require bootstrap-wysihtml5

 

さらにapp/assets/javascripts/application.jsに、下記のように書きます。

 

 

//= require bootstrap-wysihtml5

 

 

ここまでで下準備が整いました。

 

 

 

 

Viewファイルにエディタのツールバーを表示する

 

 

 

次に、エディタを表示したいviewファイルにコードを書いていきましょう。

下記は一例です。

 

<textarea class="wysihtml5" placeholder="ここに回答を入力してください。" >
</textarea>
<script type="text/javascript">
$(document).on('turbolinks:load', function(){
if (!$('ul.wysihtml5-toolbar')[0]){
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5({ toolbar:{ "fa": true,
'font-styles': true,
'color': true,
'emphasis': {'small': true},
'blockquote': true,
'lists': true,
'html': false,
'link': true,
'image': false,
'smallmodals': false }});
});
}
})
</script>

 

このように記述することで、エディタ付きのtextareaが表示されます!

form_tagの中にこの記述をすれば、

textarea内に入力された内容がhtmlタグごとサーバー側に送られます。

 

さて、上記の記述で注意点が何点かあります。

 

 

1. Turbolinks対策

Turbolinksはデフォルトでonになっていると思いますが、その場合、

$(document).ready(function(){...

この記述では、jQueryは発火しません。代わりに、

$(document).on('turbolinks:load', function(){...

のように記述する必要があります。

(turbolinks5の場合です。4以前の場合は、

‘turbolinks:load’ は ‘ready page:load’で良いかと思います)

 

これで発火するようになりますが、

今度はページ遷移の度にエディタのツールバーが無限に増え続けてしまいます。

これは困った!ということで、下記の記述を加えてあります。

if (!$('ul.wysihtml5-toolbar')[0]){...

これはclass=wysihtml5-toolbarであるul要素が存在しない場合、

これに続く記述を実行せよ、というjQueryの書き方になります。

指定された要素が存在する場合は、これ以降の記述は実行されません。

 

ツールバーが生成された箇所をGoogle Chromeの検証ツールで確認すると、

class=wysihtml5-toolbarであるul要素が生成されていたため、

上記の記述を加えました。

これで、ページ遷移の際にもツールバーは1つしか生成されなくなります。

この記述の仕方は、他にも複数あると思いますので好みの記述をしてください。

 

 

2.  ツールバー内の画像が表示されない

 

なんかツールバーの中が□□□のように表示されてしまいました。

どうもFont-Awesomeのアイコンが使われているようです。

これを解決するために、railsにFont-Awesomeを導入した上で、

toolbar:{ "fa": true }

というオプションの記述を加えました。

これによりツールバーのアイコンはきちんと表示されるようになります。

Font-Awesomeの導入方法は下記サイトを参考にしてください。

RailsアプリにFont Awesomeを導入する

 

でも、他にも方法あるかも・・・。

Glyphiconというものを使えばFont-Awesomeは必要ない??

 

 

3. 色を変えて送信したけど、viewファイルで色が変わらない問題

 

色を変えて内容を送信して、createメソッドによりデータベースに保存。

この内容をviewファイルに表示させたが、なぜか色が変わっていない。

なんで??と思い、chromeの検証ツールで確認。

すると、color: xxx;のような記述ではなく、

<span class = wysiwyg-color-xxx >

のような記述になっていた。

仕方ないので、assets/stylesheets以下に、

下記のようにcssを記述したファイルを作成した。

.wysiwyg-color-xxx {
color: xxx;
}

これで色もきちんと変わるようになりました。

 

 

 

 

その他の注意点として、ツールバーに表示したい内容は下記オプションをtrueに、

表示したくない内容はfalseに設定してください。

'font-styles': true,
'color': true,
'emphasis': {'small': true},
'blockquote': true,
'lists': true,
'html': false,
'link': true,
'image': false,
'smallmodals': false

 

 

 

本当はこの後に本番環境で動作させる際に、

うまく内容が反映させられずにハマったのですが、

Asset Pipelineの理解が不十分であったことが原因でした。

precompileを行い、production.rbの内容をいじることで、

無事に本番環境でも正しく動作するようになりました。ここは割愛。

 

 

参考にさせていただいたサイトは下記です。

色々なオプションや記述方法がありそうなので、ぜひ活用してください。

普通に使う分には、この記事の記述で大丈夫と思います。


rails使いがtwitter bootstrap用のwysiwygを速攻で導入

Bootstrap wysihtml5 for Rails

jhollingworth/bootstrap-wysihtml5

bootstrap3-wysihtml5

 

 

この記事が参考になれば幸いです。

他の記述方法については是非コメントください!

それでは〜。

 

記事が気に入ったらシェア!

コメントを残す