RailsアプリにシンプルなWYSIWYGエディタを導入
Basecampが開発しているWYSIWYGエディタ、TrixをRailsに導入しました。
Railsプロジェクトは作成中のブログサービスアプリケーション。
ブログ記事の作成ページにエディタを導入します。
バージョン
Rails 5.2.1
Trix 0.10.1
インストール
まずgemを導入します。
gem 'trix'
bundle install
application.jsに追記
//= require trix
application.scss最上部に追記
@import "trix";
入力フォームを編集
ブログ記事の入力フォームのテキスト(:text)部分
<div class="field"> <%= form.label :text %> <%= form.text_area :text %> </div>
これを以下のように変更します。
<div class="field"> <%= form.label :text %> <%= form.hidden_field :text, id: :article_text %> <trix-editor input="article_text"></trix-editor> </div>
作成したテキストの表示方法
そして入力したテキストのshowページで表示するんですが、HTML要素がエスケープされないようにする必要があります
<%= sanitize @article.text %>
これでも良いのですが、
<%= sanitize @article.text, tags: %w(h1 h2 h3 h4 h5 h6 ul ol li p a img table tr td em br strong div), attributes: %w(id class href) %>
このように、許可する要素と属性を明示的に指定するとより安心です。
結果
これだけで、リッチなテキストエディタをRailsアプリに導入することができました。
