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

106 views
Skip to first unread message

鈴木孝明

unread,
Apr 10, 2018, 2:48:48 AM4/10/18
to a-blog cms forum
お世話になります。ルーコ鈴木です。
v2.8系です。

Lite Editorのカスタマイズについてお教えください。
下記を参照しました。


初期状態で表示されている「強調」「重要」を消した上で、独自のボタンを追加する方法をお教えください。
おそらく上記を参照すれば分かると思うのですが、a-blog cms内の書き方でどう書けば良いか分かりませんでした。
私がjsを理解していなさすぎて申し訳ないです。

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

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

鈴木孝明

unread,
Apr 10, 2018, 2:59:07 AM4/10/18
to a-blog cms forum
すみません。できました!
(川邉さんがTwitterで教えてくれました!)

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions = [{
        label: '色',
        tag: 'span',
        className: 'color',
        sampleText: '色付きテキスト'
    },
    {
        label: '大',
        tag: 'span',
        className: 'big',
        sampleText: '大きいテキスト'
    },
]
});


Godai Hori

unread,
Apr 10, 2018, 3:17:17 AM4/10/18
to a-blog cms forum
お世話になっております。アップルップルの堀です。
よかったです。
念のためドキュメントの方にも記事を追加しておきました。

よろしくお願いします。

鈴木孝明

unread,
Apr 10, 2018, 9:14:28 PM4/10/18
to a-blog cms forum
堀さん

丁寧にありがとうございます!
Lite Editorで強調や、リンクの使い勝手がとても良く、感動しています。

参照先のマニュアルについて、もう1つ追記いただくと良いかなという点があります。
初期値を消した上で追加する際に、リンクだけは残したいといったことがあると思います。

そのとき、classNameやgroupなど、特殊な書き方が必要なのかな?と疑問に思いました。
なのでデフォルトで入っているボタンの記述を、掲載いただくと安心できます。

ちなみに下記のように書いたら追加できたのですが、このgroupとは何でしょうか?
ボタンがグルーピングできるのかなと思って、他のボタンにも割り振ったのですが、そういう機能ではないみたいです。

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



Godai Hori

unread,
Apr 10, 2018, 9:50:24 PM4/10/18
to a-blog cms forum
いつもお世話になっております。
アップルップルの堀です。

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'},


以上です。よろしくお願いします。
スクリーンショット 2018-04-11 10.42.47.png

鈴木孝明

unread,
Apr 11, 2018, 2:21:34 AM4/11/18
to a-blog cms forum
私の記述にミスがありました。
お教えいただいた通り試したら、グルーピングできました。

画面キャプチャ付きで丁寧にお教えいただき
ありがとうございます!
Reply all
Reply to author
Forward
0 new messages