リッチエディターを使用する

Ver.2.11.0 から使えるようになったリッチエディターユニットですが、下の図のように、このインターフェースはカスタマイズ次第でブログやカテゴリー、エントリーのカスタムフィールドとしても利用可能です。ここではその方法について、登録側（管理画面）と表示側に分けてご紹介します。

登録側（管理画面）の記述

以下が、リッチエディターが実装された、カスタムフィールドのサンプルHTMLになります。js-expandやjs-expand-btnと記述された部分は要素を全画面表示するための記述で本来リッチエディターとは関係ありませんが、編集領域が狭い場合などに有効です。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>リッチエディター</th>
    <td>
      <div class="js-expand js-acms-expand">
        <div class="js-acms-expand-inner">
          <button class="js-expand-btn js-acms-expand-btn" type="button">
            <i class="acms-admin-icon acms-admin-icon-expand-arrow js-expand-icon"></i>
          </button>
          <div class="js-smartblock" data-heading-start="2" data-heading-end="3">
            <div class="js-smartblock-edit"></div>
            <input type="hidden" class="js-smartblock-body" name="rich" value="{rich@html}" />
            <input type="hidden" name="field[]" value="rich" />
            <input type="hidden" name="rich:extension" value="rich-editor" />
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>

表側の記述

表示したいテーブルが、{rich} という変数の場合は以下のように記述します。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。変数名そのままではなく、{rich@html}と記述して表示しないといけない点にご注意ください。

{rich@html}

なおこれら一連のソースコードは、カスタムフィールドメーカーからも生成できるようになっています。

カスタムフィールドメーカー