category

定型のコードを挿入できる Redactor の Clips プラグインを試してみた。

2019-05-28

2019-05-27

このエントリと同じことをやってみようというか、別の方向から試そうと思っていて、 Clips というRedactorのプラグインも試してみた。

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

Redactorプラグインのインストール

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

config/redactor/clips/

という感じでおく

Redactorの設定を追加する

Redactor の設定ファイルに

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

こんな感じで、plugins に追記しつつ、ボタンも表示されるように clips を追加する。


追加するボタンを設定する

その上で何を表示するかを追加する。

"clips": [
    ["Red label", "<b class='label-red'>Label</b>"],["blue label", "<strong>blue Label</strong>"]

Standard.json はこんな感じになる

{
  "buttons": ["html","formatting", "bold", "italic", "unorderedlist", "orderedlist", "line","link", "image", "video","table","clips"],
  "plugins": ["fullscreen", "table","video","clips","definedlinks"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "imageResizable": true,
  "imagePosition": true,
  "definedlinks": "/defined-links.json",
  "clips": [
    ["Red label", "<b class='label-red'>Label</b>"],["blue label", "<strong>blue Label</strong>"]
  ]
}

ボタンを押すとこんな感じで追加される。

挿入されたコードはこんな感じ

サンプル

Label

blue Label

コード

<p><b class="label-red">Label</b></p>
<p><strong>blue Label</strong></p>

最初配列のところの渡し方とかよくわかってなかった（そもそものJS力不足）

これならMTの定型文とかにあたるようなものというか、雛形も入れられるんじゃ！？とか思ったけどなんか長いコードはうまいこと動かなかった。

とはいえ、それならMatrixなんだしブロックを作った方がはやいな、ということでそこで終了。

Definedlinks みたいに JSON 用意して追加するみたいなことができなさそうなので、同じようなことをやるなら Definedlinks の方が良さそう、ということで。

Variable という Plugin もある

似たようなプラグインだと Redactor の Variable を使う方法もありそう

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

Craft CMS のプラグインとしては 

Rich Variables
https://plugins.craftcms.com/r...

も近そうなのだけどグローバルにタグをだすとかどうするんだろうな？ってことで触ってはいない。