2018-05-20

Lite Editor にボタンを追加

テキストユニットに入力するとき、<code class="acms-code">タグを手打ちするのが面倒だったので、Lite Editor のボタンを増やしてみました。

E: ちょっとリッチなテキストユニットを作ってみよう | 2018春合宿 | ハンズオン | a-blog cms developer

a-blog cms developer

Ver. 2.8 からテキストユニットにLiteEditorという弊社が独自に開発したJavaScriptライブラリが使用されるようになりました。テキストユニット（LiteEditor）拡張方法基礎知識テキストユニ...

ACMS.Ready(function() {
  ACMS.Config.LiteEditorConf.btnOptions = [
    { label: 'リンク', tag: 'a', className: '', sampleText: 'リンクテキスト' },
    { label: '強調', tag: 'em', className: '', sampleText: ' ' },
    { label: '重要', tag: 'strong', className: '', sampleText: ' ' },
    { label: 'コード', tag: 'code', className: 'acms-code', sampleText: ' ' }
  ];
});

次のように記述すれば、追加する１ボタンを設定できるようだ。

ACMS.Ready(function() {
  ACMS.Config.LiteEditorConf.btnOptions.push({
    label: 'コード',
    tag: 'code',
    className: 'acms-code'
  });
});

ishikawa note