• 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」という項目が下図のように追加されました。

Formatting Add01 min

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

Formatting Add02 min

注意事項

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

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

参考

以上です。