カスタムフィールドにインラインエディターのUIを適用する

すでにテキストユニットに導入されているインラインエディタですが、このインターフェースはカスタマイズ次第でブログやカテゴリー、エントリーなどのカスタムフィールドとしても利用可能です。ここではその方法について、登録側(管理画面)と表示側に分けてご紹介します。

管理画面の記述

以下が、インラインエディターが実装された、カスタムフィールドのサンプルHTMLになります。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>インラインエディター</th>
    <td>
      <textarea name="sample_text" class="js-lite-editor-field acms-admin-form-width-full">{sample_text}</textarea>
      <input type="hidden" name="field[]" value="sample_text" />
    </td>
  </tr>
</table>

表示側の記述

表示したいインラインエディターの変数がsample_textであった場合、以下のように記述します。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。校正せず、そのままのデータを出力する校正オプション[raw]を記述してください。

{sample_text}[raw]

ボタンの位置、クラス名、ボタンのオプションの変更

テキストユニットで導入されているインラインエディターとはオプションの指定方法が異なります。ACMS.Config.LiteEditorFieldConf.xxxという記述で設定を下記のように適用します。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorFieldConf.btnPosition = 'bottom';
  ACMS.Config.LiteEditorFieldConf.classNames = {
    LiteEditor: 'entryFormLiteEditor',
    LiteEditorBtnGroup: 'acms-admin-btn-group acms-admin-btn-group-inline',
    LiteEditorBtn: 'acms-admin-btn',
    LiteEditorBtnActive: 'acms-admin-btn acms-admin-btn-active',
    LiteEditorBtnClose: '',
    LiteEditorTooltipInput: 'acms-admin-form-width-full'
  };
  ACMS.Config.LiteEditorFieldConf.btnOptions = [
   { label: 'リンク', tag: 'a', className: '', sampleText: 'リンクテキスト' },
   { label: '強調', tag: 'em', className: '', sampleText: ' ' },
   { label: '重要', tag: 'strong', className: '', sampleText: ' ' }
  ];
});