Lite Editor カスタマイズ 初期値の変更をした上で追加

[鈴木孝明]

お世話になります。ルーコ鈴木です。

v2.8系です。

Lite Editorのカスタマイズについてお教えください。

下記を参照しました。

https://www.appleple.com/blog/javascript/lite-editor.html

https://developer.a-blogcms.jp/hands-on/camp2017autumn/lite-editor.html

http://horicdesign.com/a-blogcms/new-text-unit.html

初期状態で表示されている「強調」「重要」を消した上で、独自のボタンを追加する方法をお教えください。

おそらく上記を参照すれば分かると思うのですが、a-blog cms内の書き方でどう書けば良いか分かりませんでした。

私がjsを理解していなさすぎて申し訳ないです。

 ACMS.Config.LiteEditorConf.btnOptions.push

で追加はできたので、jsを書くファイルなどは間違わずにできてると思います。

よろしくお願いいたします。

[鈴木孝明]

すみません。できました！

（川邉さんがTwitterで教えてくれました！）

ACMS.Ready(function(){

    ACMS.Config.LiteEditorConf.btnOptions = [{

        label: '色',

        tag: 'span',

        className: 'color',

        sampleText: '色付きテキスト'

    },

    {

        label: '大',

        tag: 'span',

        className: 'big',

        sampleText: '大きいテキスト'

    },

]

});

[Godai Hori]

お世話になっております。アップルップルの堀です。

よかったです。

念のためドキュメントの方にも記事を追加しておきました。

https://developer.a-blogcms.jp/document/units/text.html

よろしくお願いします。

[鈴木孝明]

堀さん

丁寧にありがとうございます！

Lite Editorで強調や、リンクの使い勝手がとても良く、感動しています。

参照先のマニュアルについて、もう1つ追記いただくと良いかなという点があります。

初期値を消した上で追加する際に、リンクだけは残したいといったことがあると思います。

そのとき、classNameやgroupなど、特殊な書き方が必要なのかな？と疑問に思いました。

なのでデフォルトで入っているボタンの記述を、掲載いただくと安心できます。

ちなみに下記のように書いたら追加できたのですが、このgroupとは何でしょうか？

ボタンがグルーピングできるのかなと思って、他のボタンにも割り振ったのですが、そういう機能ではないみたいです。

label: '<span class="acms-icon acms-icon-config_links"></span>Link',
      tag: 'a',
      className: '',
      group: 'mark'

[Godai Hori]

いつもお世話になっております。

アップルップルの堀です。

groupを使うと、ボタンを添付した画像のように見た目上、グルーピングできます。

リンクだけを残すというよりもbtnOptionsに以下のように再代入してしまう方が早いと思います。

ACMS.Config.LiteEditorConf.btnOptions = [
{label: 'リンク', tag: 'a', className: '', sampleText: 'リンクテキスト'},
....
];

また、以下のようなオプションを追加すると、undo redoも使えるようになります。

この辺りもドキュメントを追加していきたいと思います。

   { label: '<i class="lite-editor-font-back"></i>',action: 'undo',group: 'action'},
   { label: '<i class="lite-editor-font-go"></i>',action: 'redo',group: 'action'},

以上です。よろしくお願いします。

[鈴木孝明]

私の記述にミスがありました。

お教えいただいた通り試したら、グルーピングできました。

画面キャプチャ付きで丁寧にお教えいただき

ありがとうございます！