Craft CMS のリッチテキストエディタ Redactor のフォーマットボタンに項目を追加する方法
Craft CMS のリッチテキストエディタ Redactor のフォーマットボタンに項目を追加する方法をご紹介します。例えば、div.alert.alert-warning のようなブロックを追加することができます。
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 のようなタグを追加できるようにはなりません。
参考
以上です。
, Updated 2020-08-28