Redactor で ID や Class を付与する Properties プラグイン

Redactor でコンテンツを書いていると見出しなどは設定するのが簡単なのですがそこに ID や class を振るのが面倒だなー、と思っていました。

なので、 Redactor の Properties プラグインを入れときました。
知ってはいたんですが横着して入れていませんでした。

Plugins | Properties
https://imperavi.com/redactor/...

プラグインのインストール

サイトからプラグインをダウンロードして /config/redactor/properties/ となるように設置します。

Redactor の設定ファイルの編集

Standard.json など利用している Redactor の設定ファイルを編集します。

{
  "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "line", "link", "image", "video","html"],
  "plugins": ["fullscreen", "video"],
  "linkNewTab": true,
  "toolbarFixed": true
}
↓↓↓
{
  "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "line", "link", "image", "video","properties","html"],
  "plugins": ["fullscreen", "video","properties"],
  "linkNewTab": true,
  "toolbarFixed": true
}

こんな感じで、 plugins に追加するのと、 buttons のボタンを入れたい場所に追加します。

Redactor のコンテンツで見出しとかブロック要素を選択した状態で properties のボタンを押すとこのようにモーダルが開きます。

ID や Class を設定するとこのように表示されるので、リンクなどで使えばよいかと思います。

早くからやっとくべきでした。

目次からリンクがあったほうがよいー、というアドバイスもらったのでサクッと設定。

言われる前にやりましょう。。。