日々Derailment

技術的なことの備忘録。脱線事故が起きまくってるので、なるべくrails wayを守れるよう頑張ります。

Rails6になってActionTextが実装される今、あえてFroalaEditorを解説する

Rails6になって搭載されるActionText。 リッチテキストエディタが標準で使えるようになって万々歳。 そんな方々も多いのではないでしょうか。

が、しかし、世の中には
「Rails6にバージョンアップしたくてもできねえんだよ!」
とかっていう悲しい事情を抱えてる方も世の中にいるかもしれないし、
個人的に気に入ってるのもあってwysiwygエディタの
FroalaEditor
について導入方法とかを備忘録で残しておきます。

公式

www.froala.com

Apple, IBM, Amazonなどなど、いろんな企業で使われているようです。
↓のような多機能エディタが実装できます。

f:id:ys3128:20190705143049p:plain
froala_image

環境

ruby 2.5.3
rails 5.2.3
wysiwyg-rails(FroalaEditor) 3.0.1

導入方法

www.froala.com

公式が丁寧なので、ここ見ればよっぽど問題ないと思います。

1.Gemfileに追記とインストール

gem 'wysiwyg-rails'
bundle install

2.application.scssに追記

 @import "froala_editor.min";
 @import "froala_style.min";
 @import 'plugins/char_counter.min.css';
 @import 'plugins/code_view.min.css';
 @import 'plugins/colors.min.css';
 @import 'plugins/emoticons.min.css';
 @import 'plugins/file.min.css';
 @import 'plugins/fullscreen.min.css';
 @import 'plugins/image_manager.min.css';
 @import 'plugins/image.min.css';
 @import 'plugins/line_breaker.min.css';
 @import 'plugins/quick_insert.min.css';
 @import 'plugins/table.min.css';
 @import 'plugins/video.min.css';

3.application.jsに追記

//= require rails-ujs
//= require jquery
//= require activestorage
//= require turbolinks
--------ここから↓が追記箇所
//= require froala_editor.min.js
//= require languages/ja.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js
----------ここから↑が追記箇所
//= require tree.

これで準備OK。

4.適当にサンプルモデルを作ってマイグレーション。今回はhtmlメールを作る機能、とでもイメージしています。

rails g scaffold MailContent subject:string content:text
rails db:migrate

5.app/views/mail_contents/_form.html.erbに追記

<%= form_with(model: mail_content, local: true) do |form| %>
  <% if mail_content.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(mail_content.errors.count, "error") %> prohibited this mail_content from being saved:</h2>

      <ul>
      <% mail_content.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :subject %>
    <%= form.text_field :subject %>
  </div>

  <div class="field">
    <%= form.label :content %>
    <%= form.text_area :content %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>
----------↓を追記
<script>
new FroalaEditor('#mail_content_content', {});
</script>

これで実装完了。

使い方

f:id:ys3128:20190705143049p:plain 機能は左から順に

  • 太字
  • イタリック(斜体)
  • アンダーライン
  • テキストその他
    • 横線
    • 添字(下部)
    • 添字(上部)
    • フォント変更(Arial, Georgia, Impact, Tahoma, Times New Roman, Verdana
    • フォントサイズ
    • 文字色
    • 背景色
    • プリセットスタイル
    • スタイルのリセット
  • 左寄せ
  • 中央寄せ
  • 番号付きリスト
  • 段落その他
    • 右寄せ
    • 均等寄せ
    • 番号付きリスト詳細
    • 箇条書きリスト詳細
    • 段落フォーマット(H1, H2, H3, H4, Code)
    • 段落スタイル(Gray:文字のグレー化、Borderd:上下線、Spaced:文字間隔を広げる、Uppercase:大文字化)
    • インデント減らす
    • インデント増やす
    • 引用スタイル
      • 引用スタイルを増やす
      • 引用スタイルを減らす
  • リンクの挿入
  • 画像の挿入
    • アップロード
    • URLから挿入
    • プリセット
  • 動画の挿入
    • URL
    • 埋め込みコード
    • アップロード
  • その他
    • テーブルの作成
    • 絵文字
    • ファイルアップロード
    • 水平線の挿入

となっています。

できることが大杉漣って感じです。

実際に触る

f:id:ys3128:20190705151933p:plain
froalaの操作
色の変更をして保存する。

f:id:ys3128:20190705152255p:plain
froalaでレコードを作成した後
はい、当然htmlタグがエスケープされていますね。 なので、エスケープをしないようにします。 今回はサンプルなので、とりあえず<%== %>でエスケープします。 (本番環境で一般ユーザーに使う方はsanitize等で厳密に許可するタグとかをきっちり設定したほうが良いと思います。よっぽどないと思いますが安易なhtml_safeとかは、ダメ、ゼッタイ)

# app/views/mail_contents/show.html.erb
<p>
  <strong>Content:</strong>
  <%= @mail_content.content %>
  ↓に変更
  <%== @mail_content.content %>
</p>

f:id:ys3128:20190705152717p:plain
エスケープせずに出力

無事スタイルが適用されました。

まとめ

というわけで、ActionTextに負けず劣らず、簡単にリッチなエディタが実装できました。 機会があれば、FroalaからのS3アップロードとかもまとめたいと思います。