Redactor にインラインスタイルを適用できる Inlinestyle プラグインを試してみる #craftcms

Redactor のなかでコードを書こうとすると、デフォルトで用意されているフォーマットの方のコードがあたってしまって、インラインではなくて、ブロックになってしまう。

まぁ、コレはこれで使うのだけれども、マークダウンで言うところの「`コード`」みたいなことができないな、と。

Redactor の Inlinestyle プラグインがそれっぽいことができそうなので試してみる。

Plugins / Inlinestyle
https://imperavi.com/redactor/...

Inlinestyle プラグインのインストール・設定

プラグインをダウンロードして

/config/redactor/inlinestyle

となるように設置する。

使っている Redactor の設定ファイル(Standard.jsonやSimple.json)に設定を追加する。

"buttons": ["html","formatting", "bold", "italic", "unorderedlist", "orderedlist", "line","link", "image", "video","table","clips","widget"],
  "plugins": ["fullscreen", "table","video","clips","definedlinks","handle","widget"],

となっているところに

"buttons": ["html","formatting","inlinestyle", "bold", "italic", "unorderedlist", "orderedlist", "line","link", "image", "video","table","clips","widget"],
  "plugins": ["fullscreen", "table","video","clips","definedlinks","handle","widget","inlinestyle"],

こんなかんじで inlinestyle の設定を追加する。

追加されたボタンや出力されるコード

こんな感じでボタンが追加される。

用意されているスタイルはこんな感じ。

それぞれ試してみると、例)Marked、例)Code、例)Variable、例)Shortcut、例)Superscript、例)Subscript、こんな感じになる。

コードはこんな感じ。

例)<mark>Marked</mark>、例)<code>Code</code>、例)<var>Variable</var>、例)<kbd>Shortcut</kbd>、例)<sup>Superscript</sup>、例)<sub>Subscript</sub>、こんな感じになる

これで必要に応じてCSS用意しておけば問題なく使えるんじゃないかなと思う。