新しくなったテキストユニットを拡張してみよう。
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;
}