ComponentBlocksプラグインのテーブル編集でエディタが使えるようにする改良予定のご紹介

ブロックを積み上げるようにコンテンツを入力できる「ComponentBlocksプラグイン」ですが、多くのみなさまにご利用頂いており開発者として嬉しく思っております。

さて、PowerCMS X ver.3.63より下記のようにテーブル編集に特化した編集表示を用意しており、ボタン操作で行・列を増やしたりヘッダー行を指定したりしながら簡単に表の作成ができるようになっております。

ただ、このテーブル編集表示はプレーンなテキストしか入力できないため、HTMLに詳しくない人・Markdownを知らない人がセル内のテキストを太字にしたり、リストにしたり、リンクを設定したりすることができませんでした。この点については開発者も課題として考えていたほか、お客様からも何度かご要望を頂きました。

そこで、Claude Code(AI)を活用しながら試行錯誤してみたところ、下記のように各セルでTinyMCEのインラインエディタが利用できるようになりました🎉

利用方法

ブロックの編集画面において、編集表示を「テーブル」にします。その後、「詳細設定」ボタンをクリックしてフィールドの詳細設定を開き、「エディタを使用」にチェックを入れます。つまり、「エディタを使用」にチェックを入れない限りは従来通りの挙動になりますので、これまで登録したデータに影響はありません。（これまでのテーブルとエディタが利用できるテーブルを別々に定義するのが無難かもしれません。）

「エディタを使用」の下にある「エディタの設定」にてツールバーの内容を指定することも可能です。

{
  toolbar: 'bold italic | alignleft aligncenter alignright'
}

編集した内容はHTMLで保存されていますので、テンプレートではescapeをせずそのまま出力するようにしてください。

<mt:var name="cell.value" escape nl2br="1" />
  ↓
<mt:var name="cell.value" />

編集サンプル

下記画面キャプチャは、テーブルブロックにおいて太字・リンク・リストを使用した例です。いかがでしょうか？

キーボード操作にも対応

慣れは必要かもしれませんが、セルにフォーカスしてEnterを押すと編集開始、Escapeを押すと編集終了、TinyMCEですのでCtrl + Bで太字など、キーボード操作ももちろん可能になっております。

裏話： 余分な要素がセル内に入ってしまうことに苦戦した

TinyMCE 6.1以降、設定項目forced_root_blockにfalseや空文字を設定できなくなりました。これにより、普通にTinyMCEのインラインエディタを使うとどうしてもセル内にp要素やdiv要素が入ってしまいます。この点に一番苦労したのですが、以下のように対策をしてみました。

編集中はtd要素の中身をdiv.tdcontentでラップする（つまりforced_root_blockにdivを指定している）

<div class="tdcontent"><strong>セルのテキスト</strong></div>

編集終了時にdiv.tdcontentの中身だけをtd要素に戻す

<strong>セルのテキスト</strong>

トリッキーな仕組みかもしれませんがひとまずこのような仕様でご了承ください。

結び

本機能はただ今テスト中です。次回のアップデートリリース時には提供できるように努めますのでご期待ください。

カテゴリー：プラグイン

投稿者：安倍