ActionTextとrails5系でも使えるWYSIWYGエディターgemをいろいろ試してみた

はじめに

今日はRails6.0から導入されたActionTextのようなWYSIWYGエディターをRails5系でも使いたかったので、Rails5系で使えるWYSIWYGエディターgemをActionTextの機能とも比較しながら紹介していこうと思います！

導入

ActionTextはRailsにリッチテキストコンテンツと編集機能を導入できる、Rails6.0からの新機能です。いわゆる WYSIWYGエディターを簡単に自分のアプリケーションに導入することができます。

「What You See Is What You Get」の頭文字をとったもので、自分が見ているまま編集画面の状態でHTMLなどに出力できるエディターのことです。書式設定やリンク、画像埋め込みなどを簡単に扱うことができます。

実はActionTextをRails5系に導入する方法もあるのですが(後述)、
WYSIWYGを簡単に導入できるgemがいくつかあります！

今回はActionTextと上記のgemで導入できるエディターの導入方法と基本的な機能を紹介していこうと思います。

今回試した環境は以下になります。

ActionText

RailsガイドのActionTextやDHHのYoutubeを参考にしつつActionTextを導入していきます。

ステップ1

Gemfileに以下を追記してbundle install。

gem 'actiontext'
gem 'image_processing', '~> 1.2'

ステップ2

適当なモデルを作成し、以下を実行します。

rails action_text:install
rails g scaffold post title:string
rails db:migrate

ステップ3

エディターを利用したいModelファイルに以下を追加。
※contentは適当な名前でOK

has_rich_text :content

contollerのStrongParamerterにも追加。

params.require(:post).permit(:title, :content)

ステップ4

_form.html.erbファイルに以下を追加。

<%= form.rich_text_field :content >

見た目や機能など

機能自体はシンプルですが最低限の機能は備わっており、ファイルのアップロードもActiveStrageをそのまま使用できるのでrailsアプリへの導入がとても楽だと感じました。また、独自のデザインでのカスタマイズも可能です。

rails action_text:install後にmigrateを行うとで本文を保存するテーブルとファイルを保存するテーブルが作成されるので、最初から画像だけ取り出すことができるのもとても良いなと感じました。
デフォルトの機能だと画像のリサイズがエディター内でできないのですが、/app/views/active_storage/blobs/_blob.html.erbを編集することでリサイズするサイズを設定できます。

trix

trixはRuby onRailsを作成したBasecampが開発しているエディターです。
trixは画像を保存する場合はshrineも一緒に入れてあげる必要があります。
shrineの設定後、アップロード用のjsを作成する必要があります。

ステップ1

Gemfileに以下を追記してbundle install

gem 'trix'

ステップ2

適当なモデルを作成し、以下を実行します。

rails g scaffold post title:string content:text
rails db:migrate

ステップ3

app/assets/javascripts/application.jsに以下の行を追加

//= require trix

ステップ4

app/assets/stylesheets/application.cssに以下の行を追加

*= require trix

ステップ5

_form.html.erbファイルを編集する。

<div class="field">
<%= form.label :content %>
<%= form.text_area :content, id: :post_content %>
<trix-editor input="post_content"></trix-editor></div>

ステップ6

showにはサニタイズしたcontentを渡すか、show.html.erbでサニタイズして表示させる。

<%= sanitize @post.content >

上記サニタイズを行う場合、本番環境では許可する要素と属性を明示的に指定するなどの点に気をつけてください！

見た目や機能など

見た目や機能はほとんどActionTextと同じですが、画像のリサイズがエディター内でできるのがとても良いです！
上記のようにhidden_fieldの箇所をtextareaにすることで、コードを確認しながら編集できるのも良いです。
画像のアップロードをする場合はJSでエンドポイントを作成しなくてはならないので、本番環境にも導入する場合などはセキュリティ面などを気をつける必要がありそうだな、と感じました。

froala

froalaは高性能なエディターで、pluginの数もとても豊富です。日本語化なども容易にできる優れものです。

froalaは有料のeditorのため、無課金のまま本番環境で使用するとfroalaのクレジットが入ります。クレジットの表示を削除したい場合は有料登録が必要になります。

ステップ1

Gemfileに以下を追記してbundle install。

gem 'wysiwyg-rails'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.5'
gem "jquery-rails"

ステップ2

適当なモデルを作成し、以下を実行します。

rails g scaffold post title:string content:text
rails db:migrate

ステップ3

app/assets/javascripts/application.jsに以下の行を追加。

//= require rails-ujs
//= require jquery
//= require activestorage
//= require turbolinks
//= require froala_editor.min.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 languages/ja.js
//= require_tree .

ステップ4

app/assets/css/application.cssに以下の行を追加。

*= require froala_editor.min.css
*= require froala_style.min.css
*= require font-awesome
*= require plugins/char_counter.min.css
*= require plugins/code_view.min.css
*= require plugins/colors.min.css
*= require plugins/emoticons.min.css
*= require plugins/file.min.css
*= require plugins/fullscreen.min.css
*= require plugins/image_manager.min.css
*= require plugins/image.min.css
*= require plugins/line_breaker.min.css
*= require plugins/quick_insert.min.css
*= require plugins/table.min.css
*= require plugins/video.min.css

ステップ5

_form.html.erbの下部に以下を追加。

<li class="c-article-step__item">

ステップ6

showにはサニタイズしたcontentを渡す。またはshow.html.erbでサニタイズして表示させる。

<%= sanitize @post.content >

見た目や機能など

有料なのもあり、かなり機能が豊富！UIも直感的でわかりやすく使いやすかったです！
こちらも画像のアップロードをする場合はJSでエンドポイントを作成が必要になります。

summernote

summernoteはbootstrapを使用したWYSIWYGエディターです。
gemはこちら。

ステップ1

Gemfileに以下を追記してbundle install

gem 'jquery-rails'
gem 'bootstrap'
gem 'simple_form'
gem 'summernote-rails', '~> 0.8.10.0'
gem 'autoprefixer-rails'

ステップ2

適当なモデルを作成し、以下を実行します。

rails g scaffold post title:string content:text
rails db:migrate

ステップ3

app/assets/javascripts/application.jsに以下の行を追加

//= require jquery
//= require rails-ujs
//= require popper
//= require bootstrap
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require activestorage
//= require turbolinks
//= require_tree .

ステップ4

app/assets/javascripts/summernote-init.coffeeを作成し、以下を記入。

$(document).on 'turbolinks:load', ->
$('[data-provider="summernote"]').each ->
$(this).summernote
height: 300

ステップ5

_form.html.erbファイルに以下を追加。

<div class="field">
  <%= form.label :content %>
<%= form.text_area :content , 'data-provider': :summernote %></div>

見た目や機能など

全て無料なのにfroalaエディター並に機能が豊富で、個人的な使用感ではかなり気に入りました！
こちらも画像のアップロードをする場合はJSでエンドポイントを作成が必要になります。
また、デフォルトだと画像もtextの一部として保存されるので、切り離したい場合はcarriewaveなどを使って他modelのカラムとして切り離して保存してあげる必要があります。手順はこちら。
また、コードビュー機能も便利そうでした。

ActionTextをRails5.2に導入する

最後に、Rails5.2にActionTextを導入する方法を紹介します！
詳細は以下の動画をチェックしてみてください。

ステップ1

Gemfileに以下を追記してbundle install。

gem 'mini_magick', '~> 4.8'
gem "actiontext", github: "rails/actiontext", require: "action_text"
gem "image_processing", "~> 1.2"

ステップ2

適当なモデルを作成し、以下を実行。

rails action_text:install
rails g scaffold post title:string
rails db:migrate

ステップ3

layouts/application.html.erbに以下を追加。

<%= javascript_pack_tag 'application' %>

webpackのエラーが起きた場合、app/javascript/packs/application.jsに以下を追加する。

Rails.application.config.assets.paths < Rails.root.join('node_modules')

ステップ4

views/active_storage/blobs/_blob.html.erbの以下の記述を修正する。

# 修正前
<%= image_tag blob.representation(resize_to_fit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>

# 修正後
<%= image_tag blob.representation(resize: local_assigns[:in_gallery] ? "800x600" : "1024x768") %>

見た目や機能などについて

rails6のActionTextと同様シンプルな機能＆画像のリサイズなどはエディター上ではデフォルトでは出来ないですが、Active storageでのアップロードがそのまま使えるのでエンドポイントを自分で用意しなくていいのはとても良いなと感じました！
ただ、他の画像アップロード系のgemとは併用できないようなので、現状でcarriewaveなどのを使用している場合などはgemの切り替えなどが必要になってきそうです。

まとめ

本日はrails6のActionTextと、rails5系で使えるWYSIWYGエディターgemを紹介してきました。

いろんなエディターを試す機会はなかなかないのでとても楽しく比較調査ができました！
どのエディターも大体10分くらいで導入できたのと、機能面や使用感でも一長一短あり悩ましいですが、個人的にはsummernoteの使いやすさがお気に入りでした！

今回あまり触れられなかった、各エディターからのS3へのファイルのアップロードなどは今後も引き続き調査していきます！
また、gemを自作出来たらとても面白そうだな、とも思ったのでまずは各gemのソースを読んでみようと思います！
最後まで読んでいただきありがとうございます。