クールでイカしてるwysiwygエディタFroalaをRailsに5分で導入する
刺激のないテキストエリアに疲弊しているみなさまにゃんぱす〜
のんのんびよりとスプラトゥーンにハマりだしたたくみです。
本日は皆様に素敵でクールでイカしているwysiwygエディタ、
Froalaを5分で導入します。
Rails初心者の方でも短時間でイカした見栄えになりますので、
ぜひぜひ頑張って学習していきましょう！
[準備編] FroalaをインストールするためRailsデモアプリを作成
Froalaをインストールするために、Railsの準備をします。
今回は本をタイトルと内容を管理するデモアプリを作ります。
| shell | |
|---|---|
| 1 | rails new froala |
| 2 | rails g scaffold book title:string content:text |
| 3 | rails db:migrate |
Gemを使ってインストール
FroalaのインストールはGemを使えるのでとっても簡単！
Gemfileの末尾にgem 'wysiwyg-rails'を追記してbundle installするだけです♪
| Gemfile.rb | |
|---|---|
| 1 | gem 'wysiwyg-rails' |
Froalaを有効にするためJavaScriptとCSSを編集
bundle installの実行してFroalaのインストールはできましたか？？
Froalaを有効にするため、下記2つのファイルを編集します。
- /app/assets/javascripts/application.js
- /app/assets/stylesheets/application.css
それでは、Froala本体のJavaScriptとプラグインと日本語化するためのJavaScriptを読み込む設定を追記しましょう。
| /app/assets/javascripts/application.js | |
|---|---|
| 1 | //= require froala_editor.min.js |
| 2 | //= require plugins/align.min.js |
| 3 | //= require plugins/char_counter.min.js |
| 4 | //= require plugins/code_beautifier.min.js |
| 5 | //= require plugins/code_view.min.js |
| 6 | //= require plugins/colors.min.js |
| 7 | //= require plugins/emoticons.min.js |
| 8 | //= require plugins/entities.min.js |
| 9 | //= require plugins/file.min.js |
| 10 | //= require plugins/font_family.min.js |
| 11 | //= require plugins/font_size.min.js |
| 12 | //= require plugins/fullscreen.min.js |
| 13 | //= require plugins/image.min.js |
| 14 | //= require plugins/image_manager.min.js |
| 15 | //= require plugins/inline_style.min.js |
| 16 | //= require plugins/line_breaker.min.js |
| 17 | //= require plugins/link.min.js |
| 18 | //= require plugins/lists.min.js |
| 19 | //= require plugins/paragraph_format.min.js |
| 20 | //= require plugins/paragraph_style.min.js |
| 21 | //= require plugins/quick_insert.min.js |
| 22 | //= require plugins/quote.min.js |
| 23 | //= require plugins/save.min.js |
| 24 | //= require plugins/table.min.js |
| 25 | //= require plugins/url.min.js |
| 26 | //= require plugins/video.min.js |
| 27 | //= require languages/ja.js |
そして、次にクールでイケてるデザインにするためCSSを読み込む設定を追記します。
| /app/assets/stylesheets/application.css | |
|---|---|
| 1 | *= require froala_editor.min.css |
| 2 | *= require froala_style.min.css |
| 3 | *= require font-awesome |
| 4 | *= require plugins/char_counter.min.css |
| 5 | *= require plugins/code_view.min.css |
| 6 | *= require plugins/colors.min.css |
| 7 | *= require plugins/emoticons.min.css |
| 8 | *= require plugins/file.min.css |
| 9 | *= require plugins/fullscreen.min.css |
| 10 | *= require plugins/image_manager.min.css |
| 11 | *= require plugins/image.min.css |
| 12 | *= require plugins/line_breaker.min.css |
| 13 | *= require plugins/quick_insert.min.css |
| 14 | *= require plugins/table.min.css |
| 15 | *= require plugins/video.min.css |
上記の追記でFroalaを使う準備は完了です。
めちゃくちゃ簡単ですね♪
テキストエリアをFroalaエディタに変更
それでは準備が完了したので、いよいよFroalaエディタのお披露目をします！
デモアプリの入力画面のテキストエリアをクールなFroalaにしちゃいましょう！
/app/views/books/_form.html.erb の末尾に下記のスクリプトを追記してください。
| /app/views/books/_form.html.erb | |
|---|---|
| 1 | <script> |
| 2 | $(function() { |
| 3 | $('#book_content').froalaEditor(); |
| 4 | }); |
| 5 | </script> |
#book_contentはテキストエリアのHTMLのidです。
他のidを使用する場合は適宜変更してみてくださいね。
それでは、 http://localhost:3000/books/new にアクセスしてみましょう。
なんということでしょう。あれだけ刺激のなかったテキストエリアが一転。
たくみの粋な計らいにより見栄えがよくなりました。
スクリーンショットのようになっていない場合は、設定が間違っていると思われますので、
もう一度上記手順をやり直してください。
それでもうまくいかない場合は、お気軽にお問い合わせしてくださいな〜
それではまとめいきます！
まとめ
- Gemfileに
gem 'wysiwyg-rails'を追記してbundle installでインストール - Froalaを有効にするためJavaScriptとCSSを編集
$('TARGET_ID').froalaEditor();でイカしてるエディタに大変身
いかがでしたでしょうか？
Froalaがかなりカンタンに導入できたためテンションみなぎってきませんか？
たくみは他のwysiwygエディタに苦戦した苦い記憶があるのでかなりみなぎりました(笑)
イカしたFroalaを使ってRailsライフをエンジョイしましょう♪
