PowerCMS Xのカスタム編集タイプでコンポーネントをベースにしたブロックエディタ（設計済のHTML/CSSコンポーネントに対応した入力フィールドを用意するブロックエディタ）を実装する個人プロジェクトです。これまでの記事はタグ「ComponentBlocks」一覧」でご覧いただけます。
今日はテンプレートについて検討してみました。ブロックエディタで入力したデータは以下のようなJSONで保存されています。id・type・fields以外はブロックのコンポーネントを作成する時に自身で決めたキーです。v-model="element.text"等とテンプレートに記述しています。（コンポーネントの記述例は昨日の記事をご覧ください）
[
{
"id":"zolp7dw3",
"type":"heading",
"text":"PowerCMS Xクラウド価格表",
"additional_data":2
},
{
"id":"9ovsgrde",
"type":"text",
"text":"<p>下記のオプションがご利用頂けます。掲載の価格は全て税込です。</p>"
},
{
"id":"rnrshkp8",
"type":"table",
"heading_width":70,
"fields":[
{
"id":"23i8uycy",
"th":"データベースサーバー冗長化",
"td":"<p>16,500円/月</p>"
},
{
"id":"6vaknlbl",
"th":"Web サーバー ストレージ容量追加",
"td":"<p>27,500円/月</p>"
},
{
"id":"nurfoi47",
"th":"データベースサーバー ストレージ容量追加",
"td":"<p>8,250円/月</p>"
}
]
}
]ブロックエディタのカラム「block_edit」から<mt:entryblockedit from_json="blocks" />でデータを取り出しfrom_jsonでJSON文字列をデコードします。from_jsonの実装が$json = json_decode( $json, true );なので配列で格納されます。
mt:loopを使いブロックのデータをループし、ブロックのタイプに応じたテンプレートを記述します。PowerCMS 6のフィールドブロックビルダーと違いブロック作成時にコンテンツを出力するためのテンプレートタグを決めていないため、1つのブロックでさまざまな出力ができると考えられます。シンプルに見出し・文章・テーブルを生成するMTMLを書いてみました。
<div class="content">
<mt:entryblockedit from_json="blocks" />
<mt:loop name="blocks">
<mt:if name="type" eq="heading">
<mt:if name="additional_data" eq="2">
<h2><mt:var name="text" escape /></h2>
<mt:elseif name="additional_data" eq="3">
<h3><mt:var name="text" escape /></h3>
<mt:elseif name="additional_data" eq="4">
<h4><mt:var name="text" escape /></h4>
</mt:if>
<mt:elseif name="type" eq="text">
<mt:var name="text" />
<mt:elseif name="type" eq="table">
<mt:loop name="fields">
<mt:if name="__first__"><table></mt:if>
<tr>
<th><mt:var name="th" escape /></th>
<td><mt:var name="td" remove_html /></td>
</tr>
<mt:if name="__last__"></table></mt:if>
</mt:loop>
</mt:if>
</mt:loop>
</div>結果、以下のようなHTMLと表示が得られました。
<div class="content">
<h2>PowerCMS Xクラウド価格表</h2>
<p>下記のオプションがご利用頂けます。掲載の価格は全て税込です。</p>
<table>
<tr>
<th>データベースサーバー冗長化</th>
<td>16,500円/月</td>
</tr>
<tr>
<th>Web サーバー ストレージ容量追加</th>
<td>27,500円/月</td>
</tr>
<tr>
<th>データベースサーバー ストレージ容量追加</th>
<td>8,250円/月</td>
</tr>
</table>
</div>mt:loopと自分で決めたキーを用いて容易に出力できたのが良かったです。