Redactor のリッチエディタで表組みを入れるとしたらどうしようか？ということで。

とりあえずボタン追加するのは @tinybeans のエントリとかを参考にすればOK。

Craft 3 の Redactor に table ボタンを追加する方法 | かたつむりくんのWWW
https://tinybeans.net/blog/201...
How to add the table plugin to redactor in CraftCMS 3 - Starting Craft
https://startingcraft.com/arti...

Redactorでどれを使ってるかにもよるけど、 Standard を使ってるなら Standard.json をこんなかんじで buttons と plugins に table を追加する。

{
  "buttons": ["html","formatting", "bold", "italic", "unorderedlist", "orderedlist", "line","link", "image", "video"],
  "plugins": ["fullscreen", "video"],
  "linkNewTab": true,
  "toolbarFixed": true
}
↓↓↓
{
  "buttons": ["html","formatting", "bold", "italic", "unorderedlist", "orderedlist", "line","link", "image", "video","table"],
  "plugins": ["fullscreen", "table","video"],
  "linkNewTab": true,
  "toolbarFixed": true
}

とりあえずこれでテーブルの挿入がサクッとできる。

Standard.json は /config/redactor/Standard.json ここにある。

表組みにスタイルを当てる

次は見た目をどうにかするためにclassをふれないか？を考えてみる。

bootstrapベースのデザインに今はなってるから、それに近い感じのclassとかdiv追加するとか。

source開いてclass振ったりしてもいいし、styleが当たるようにcss直してもいいんだけど。。。
それは最後の手段ということで。

Propertiesを使う方法

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

これを使えば id / class を振るためのボタンを入れることができる様子。

ブロックタグって書いてあるのでちゃんと動くのか？というのが気になるところ。

いつか試してみる

Matrixにブロック自体追加する方法

@tinybeans は Matrix にブロックを追加してしまって、それを使ってる時は置換して置き換える、ということをやってるらしい。

確かにそれも1案か。

Matrix でブロック増やせるようにコンテンツを管理できるようにしておいてよかった。

Redactor の Tableプラグインをみてみる

@BUN のアドバイスでtableプラグインのソース、という話が出たのでみてみる。

ファイル自体はここにある。

/vendor/craftcms/redactor/lib/redactor-plugins/table/table.js

ざっとみてみたかんじは

_buildElement: function(node)
{
    if (node)
    {
        this.$element = $R.dom(node);
    }
    else
    {
        this.$element = $R.dom('<table>');
        this.append(this.$element);
    }
},

の table のところを table class="table" みたいにしてしまえば挿入時は動いた。

このままだとupdateで消えるのでこれをコールバック使うように変更する必要がある、と。。。。js力。。。。

Retcon を使う方法

たまたま redactor の callback とかを調べてたら Retcon というプラグインを見つけた。

mmikkel/Retcon-Craft: A collection of powerful Twig filters for modifying HTML
https://github.com/mmikkel/Ret...

こんな感じで書くとimgにclassをつけてくれるらしい。

{{ entry.body | retconAttr('img', { class: 'image' }) }}

んで、もう少しみてみたら wrap もしてくれるとな。。！！！

{{ entry.body | retconWrap( 'img', '.imageWrapper' ) }}

ということでこれを組み合わせて

{{ block_richeditor | retconAttr('table', { class: 'table' }) | retconWrap( 'table', 'div.table-responsive' ) }}

こんなかんじでresponsive table になりそう。

おー、とりあえずはこれで解決ってかんじかなー。

参考

Redactor周りのカスタマイズは @BUN のこちらのエントリも参考になる

Craft CMS のリッチテキストフィールドのエディタ（Redactor II）をカスタマイズする | BUN:Log
https://bunlog.dreamseeker.dev...