【rails】テキストエディターの導入(3)

テキストエディターの導入

前回、Articlesのcontentのテキストエディターについて以下を行った

• contentの保存先を変更(エディター強化)
• 既存のデータベースからcontentのカラムを削除

今回、実際にActionTextを使えるようにする

viewのコードを修正する

app/views/articles/_form.html.hamlを開く

text_areaをrich_text_areaに書き換える

# 変更前
      = f.text_area :content

# 変更後
      = f.rich_text_area :content

上記を書き換えただけだと、とても使いにくいことになっている↓

scssを修正する

app/assets.stylesheets/actiontext.scssがうまれている

うまれているだけでviewに反映していないので、application.scssに追加する

# application.scss
@import 'actiontext';

これだけだとエディターの見た目が変わらなかったので、以下も読み込ませる

# application.scss
@import 'trix/dist/trix.css';

↓　さっきよりだいぶ良くなっている

form.scssを修正

trix_editorにtextareaと同じscssが効くようにする

validationが使えない？

新しいテキストエディターでcontentを入力しても、エラーが起きて保存できない

  validates :content, length: { minimum: 10 }
  validates :content, uniqueness: true

  validate :validate_title_and_content_length

# 中略

  private

  def validate_title_and_content_length
    char_count = title.length + content.length
    errors.add(:content, '100文字以上で！！') unless char_count > 100
  end

こちらはいったん削除（コメントアウト）しておく

アイキャッチとは別で画像の投稿もできるし、文字の装飾もできた！

画面更新しても読み込まない、反映しないときは、サーバーの再起動をしてみること

#DAY1