PowerCMS Xのカスタム編集タイプでコンポーネントをベースにしたブロックエディタ（設計済のHTML/CSSコンポーネントに対応した入力フィールドを用意するブロックエディタ）を実装する個人プロジェクトです。これまでの記事はタグ「ComponentBlocks」一覧」でご覧いただけます。
これまでブロックの編集画面案を掲載してきましたが、正式に実装を行いました。入力項目は以下のようになりました。
- ブロックのラベル
- テンプレート（Vue.jsの
template） - 繰り返しフィールドか（チェックボックス・
dt,ddやtr>th+td等が増減する時チェック） - マルチブロックを利用するタイプか（チェックボックス）
- インラインエディタを利用するタイプか（チェックボックス）
- データ定義（Vue.jsのリアクティブなデータオブジェクトに追加するオブジェクトの定義）
- 利用できるブロック（マルチブロックの場合）
- ブロックが利用できるモデル
- コンポーネント名
- ステータス（有効／無効）
この登録内容を基に編集画面のブロックエディタが表示されるよう、管理画面のテンプレート上にてVue.jsとMTMLを結合し、無事に動作しています。
その他、便利な機能などを挙げてみます。
- ブロックが利用できるモデルを選択できる
- ブロック定義のインポート・エクスポートが可能
- ダイナミック生成ページでも利用可能
- APIでもブロックエディタのコンテンツが取得可能
見出しブロックはシステムスコープに登録して使いたいという要望もあるかもしれませんね。ブロック定義の出力はmt:objectloopを利用しているので、設定に応じてworkspace_id="0,4"などにすると実現できそうな感じがします。上・下・削除ボタンをもう少しコンパクトに・見栄え良くする改善もしていきたいと考えています。
その他、ブロック定義・コンテンツ出力時のテンプレートは自由に書くことができるので、テーブル編集用UIライブラリ「a-table.js」を組み込むなどもできるようになるかもしれません。
しかし、リッチなエディタに頼りすぎると本プロジェクトが目指すブロックエディタ…入力したコンテンツを設計済のHTML/CSSコンポーネントで出力できるという意義がなくなります。既に実装しているインラインエディタも利用できるボタンをかなり絞り込んでいます。（リンクと太字ぐらいは使いたいだろうなと。）セミナーイベント「ジャムスタックチョットデキル!! シブヤ!!」のセッション「APIスキーマ設計Tipsと (新)リッチエディタについて」でも語られていますね。
リリース時の懸念事項として、後からブロック定義を変更することになるとPHP等でデータのマイグレーションを行う必要があることです。テスト中に意図した動作にならないところがありphpMyAdminでデータを編集しました。少々怖いですね。