テキスト入力にインラインエディターを使用する

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

管理画面の記述

以下が、インラインエディターが実装された、カスタムフィールドのサンプル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]

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

テキストユニットで導入されているインラインエディターとはオプションの指定方法が異なります。
a-blog cms Ver.2.11.40 の時点で LiteEditorFieldConf の設定がデフォルトで空になっているため、カスタムフィールドでLiteEditorを使用する場合は適用しているテーマ内にJavaScriptファイルを別途作成して設定ください。
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: ' ' }
  ];
});

LiteEditorのデフォルトボタンをそのまま維持したい場合はbtnOptionsを下記のように指定します。

ACMS.Config.LiteEditorFieldConf.btnOptions = [
  { label: '<span class="lite-editor-font-back"></span>', action: 'undo', group: 'action' },
  { label: '<span class="lite-editor-font-go"></span>', action: 'redo', group: 'action' },
  { label: '<span class="lite-editor-font-link"></span>', tag: 'a', className: '', group: 'mark' },
  { label: '<span class="lite-editor-font-bold"></span>', tag: 'strong', className: '', group: 'mark' },
  { label: '<span class="lite-editor-font-italic"></span>', tag: 'i', className: '', group: 'mark' },
  { label: '<span class="lite-editor-font-underline"></span>', tag: 'u', className: '', group: 'mark' }
];