rails-logo

【Rails】wysiwygエディタを実装するのに便利なGem3選【リッチテキストエディタ】

 

こんにちは。たなかです。

Railsでスタッフ用の管理画面を作ったりする案件に参画しているのですが、よくあるお知らせ記事みたいなものを作成する際に、wysiwygエディタを搭載したいというご要望がありました。

wisywygエディタとは、HTMLを知らない人でも直感的にフォントサイズ変更や見出し作成といった操作を可能にするエディタで、リッチテキストエディタとも呼ばれます。

WordPressを利用している方は、よくお世話になってるのではないでしょうか?

↑こんなやーつですね。

今回はRailsのgemでリッチテキストエディタを実現しようと思い、いくつかgemを試してみたので比較調査の内容をご紹介しようかと思います。

それぞれサンプルアプリを作成してみたので画像を参考にしてみてください。

① Froala

『Rails wysiwyg』でググると真っ先に見つかるのがこいつです。

特徴としては以下の通り

 

  • 導入も操作もシンプル
  • デザインがフラットでどのページとも親和性が高い
  • 無料版だと不要なテキストが表示される

下記画像の赤ラベル箇所だったり、エディタ下部の文言だったりですね。確かに邪魔くせえ。

floalaテスト

ということでいい感じに使いたかったら課金しようねーっていう商売上手なgemです。

料金もまあまあするので、プラン表確認しながら検討するとよいかもですね。

floalaプラン

公式サイトはこちら

②Trix

このサイトでも馴染みのあるRuby on Railsを作成したDHH氏がCTOを務めるBasecamp製のリッチテキストエディタです。

Rails6から新機能として搭載されるAction Textと同じ技術で、gemとして切り出されたものになります。

特徴としては以下の通り

 

  • 安心と信頼のBasecamp製
  • オープンソースで完全無料
  • フォントサイズ・カラーなどの変更ができない

 

下記画像がTrixによるサンプルアプリ。リッチ感が弱いですね。

trixテスト

太字、斜字、打ち消し、リンクなど基本的なところは揃っているものの、フォントサイズやカラーの変更、見出し作成なんかを追加するには改修が必要です。

ちょっと調査しましたが結構手間かかりそうだったんで深追いしないことにしました。

デフォルト仕様だとちょっと寂しい気もしますが、シンプルなエディタで構わないということであれば導入は簡単なのでおすすめです。

 

公式サイトはこちら

Githubはこちら

③Summernote

最後はこちら。「SuperSimple WYSIWYG Editor on Bootstrap」ことSummernoteです。

公式サイトのデモを見れば一目瞭然ですが、言葉通りのリッチテキストエディタで、機能としては見出し作成、カラー変更、テーブル、コードエディタまで十分なものが揃っています。

特徴は以下の通り

 

  • Githubスター8000越えで更新も活発
  • 公式のExamplesがわかりやすい
  • Bootstrapの導入が併せて必要

下記画像がSummernoteによるサンプルアプリ。リッチかつシンプルで使い勝手良さそう。

summernoteテスト

公式サイトはこちら

Githubはこちら

まとめ

rails-logo

 

いかがだったでしょうか。

個人的には無料でかつ機能的にも申し分ないSummernote先生が、ベストプラクティスかなーという印象ですね。

WordPressで普段からお世話になっているリッチテキストエディタ、いざ実装しようとすると結構大変なんだなと再確認しました。サンキューワードプレス。

RailsでWYSIWYGエディタを実装する際の参考になれば幸いです。

今回はここまで。

 

スポンサードリンク