4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Rails】TinyMCEをご紹介

Posted at

#TinyMCEは何か
LGPL WebによってリリースされているWYSIWYG HTML Javascriptに基づいたプラットフォームというTinyMCEは、ウェブでのコンテンツ作成を簡素化するように設計されたテキストエディタを提供します。ブログ、説明などのテキストのフォーマットを簡単に編集できるし、さらに無料です。
詳細はこちら:TinyMCEホームページ
今様々な言語で使われており、それらの一つはRubyonRailsです。
gemページ:https://github.com/spohlenz/tinymce-rails

#Railsでの使用
1, インストール
下記のステップ通りに実装すると、インストールは完成です

  • Gemfileに追加する:gem "tinymce-rails"
  • コマンドを実装する:$ bundle install
  • サーバーを再起動する:$ rails s

2, 使用

configの中で、tinymce.ymlを作成してから、下記のコンテンのように作りましょう。

tinymce.yml
theme_advanced_toolbar_location: top
theme_advanced_statusbar_location: bottom
theme_advanced_buttons3_add:
  - tablecontrols
plugins:
  - table
  - image
toolbar:
  - undo redo | formatselect | fontselect | fontsizeselect | bold | italic | underline | alignleft | aligncenter | alignjustify | alignright

tinymce.ymlは、TinyMCEのインタフェースを決めます。

  • plugins:エディタの機能をインストールします
    • table:テーブル挿入をサポートし、テーブルを操作する
    • image:画像を挿入できます。

他にもたくさんのプラグインがあります、こちらで参照することができます:http://archive.tinymce.com/wiki.php/Plugins

  • toolbar:編集に必要なツールをインストールします。ツールの順番は、設定ファイルに書かれている順番と同じです。

次はapplication.jsの中でtinymceをrequireします

// require tinymce

最後に、どこかでエディタを使用したい時、そこに "tinymce"クラスを追加します。そして、<%= tinymce %>は大事(理由だと、これはtinymce.ymlのconfigをリンクします)なので、忘れないように注意して欲しいです。例は次の通りです。
Screen Shot 2019-04-02 at 3.18.06 PM.png
ビューで、html_safeを使用して正確にフォーマットしたものを表示します。
Screen Shot 2019-04-02 at 3.17.01 PM.png
実際の結果
Apr-02-2019 15-13-11.gif

#まとめ
tinymce-railsはインストールと使用が簡単で、様々なオプションがあります。みんなの仕事に役に立つと嬉しいです。

4
6
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?