• Home
  • Craft CMS
  • Craft CMS のリッチテキストエディタ Redactor のフォーマットボタンに項目を追加する方法

Craft CMS のリッチテキストエディタ Redactor のフォーマットボタンに項目を追加する方法

Craft CMS の標準のリッチテキストエディタである Redactor(正確にはプラグインですが)は、設定用の JSON ファイルを編集することで、ボタンを増やしたり、減らしたり、並び順を変えたりと、簡単に自分好みにカスタマイズすることができます。

このエディタの中には「フォーマット」ボタンがあり、選択している行にフォーマットを適用することができます。デフォルトの状態で設定できるフォーマットは下記のとおりです。

  • Normal text
  • Quote
  • Code
  • Heading 1〜6

今回はこの中に「Alert Warning」というフォーマットを追加して、Bootstrap のアラートボックスを表示するための div.alert.alert-warning を適用できるようにしたいと思います。

設定用 JSON に formattingAdd を追加

設定用の JSON ファイルに formattingAdd というブロックを追加します。僕のブログの設定ファイルは下記のようになりました。

{
  "buttons": ["html", "formatting", "inlinestyle", "bold", "italic", "unorderedlist", "orderedlist", "link", "image", "video"],
  "plugins": ["fullscreen", "inlinestyle", "video"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "formattingAdd": {
    "alert-warning": {
      "title": "Alert Warning",
      "api": "module.block.format",
      "args": {
        "tag": "div",
        "class": "alert alert-warning"
      }
    }
  }
}

この中の、

  "formattingAdd": {
    "alert-warning": {
      "title": "Alert Warning",
      "api": "module.block.format",
      "args": {
        "tag": "div",
        "class": "alert alert-warning"
      }
    }
  }

の部分が追加したところになります。

alert-warning 部分はユニークな値にします。 title にセットした値がフォーマットボタンを押したときに表示される文言になります。

これで「Alert Warning」という項目が下図のように追加されました。

ソースを覗いてみると下図のようになっています。

注意事項

この方法で追加できるタグは、 p, pre, blockquote, and h[1-6]のみとなっています。

また、その他のボタン、例えば ul 用ボタンなどの挙動を上書きするものではありませんので、 ul.ul-style01 > li のようなタグを追加できるようにはなりません。

参考

以上です。