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

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

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

目次へ

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

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

前回、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を入力しても、エラーが起きて保存できない

どうやらｍarticle.rbに設定していた以下のvalidationが原因でエラーが起きているらしい

  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

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

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