新しくなったテキストユニットを拡張してみよう。

この記事は公開日より7年以上経過しているため、現在の内容と異なる可能性があります。

a-blog cms Ver.2.8.0 より新しくテキストエリアが生まれ変わります。今までは「リンク」や「強調」を挿入した際にHTMLタグが直接見えてしまう形になっていましたが、Ver.2.8.0より「リンク」や「強調」などが視覚的にわかりやすくなります。

このテキストエリアには、弊社が独自で開発したインライン専用のWYSIWYG、「Lite Editor」が導入されています。

カスタマイズ

a-blog cmsではデフォルトで、「リンク」「強調１」「強調２」のボタンが用意されていますが、カスタマイズして、新たにボタンを追加してみましょう。 下記のように、ACMS.Ready内で、ACMS.Config.LiteEditorConf.btnOptionsに挿入したいボタンの設定をpushすることで、新たにボタンを追加することができます。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions.push({
        label: 'アンダーライン',
        tag: 'u',
        className: '',
        sampleText: 'アンダーライン'
    });
});
label ボタンのラベルを設定できます。
tag ボタンが押された際に挿入されるタグを設定できます。
className 挿入されたタグに対して付与できるクラスを設定できます。
sampleText 何もテキストが選択されていない場合に挿入されるデフォルトのテキストを設定できます。

課題

下記のようにエントリーのテキストエリアに「アンダーライン」「斜体」「赤色」の３つのボタンを追加してみましょう。

ヒント

赤色のボタンに関しては、自分で下記のようにスタイルも書いてあげる必要があります。

.red {
    color:red;
}