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用意しておけば問題なく使えるんじゃないかなと思う。