IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

trix エディタを使ってみる

はじめに

ここでは以下の記事を参考にして trix を使ってみることにする。

 

使ってみる

trix をインストールする。

  • echo 'gem "trix"' >> Gemfile
  • bundle

 

JS と CSS の設定をする。

f:id:matt-note:20190428072617p:plain

f:id:matt-note:20190428072626p:plain

 

サンプル用に Post モデルを作成する。

  • bin/rails g scaffold Post title:string content:text
  • bin/rails db:migrate

 

app/views/posts/_form.html.erb で trix-editor を使用する。

f:id:matt-note:20190428073850p:plain

 

サーバーを起動して、/posts/new にアクセスすると、エディタを表示させることができる。

f:id:matt-note:20190428073637p:plain

 

これを投稿すると、以下のようになる。

f:id:matt-note:20190428073930p:plain

 

HTML タグを削除するには、sanitiza メソッドを使うとのこと。

f:id:matt-note:20190428074046p:plain

f:id:matt-note:20190428074105p:plain