BasicStyles - CKEditor Japan Wiki - CKEditor Japan

文字装飾ボタンのカスタマイズ (開発者向けの情報)

文字装飾のボタンを押した際に、装飾として使われる要素を変更する方法を説明します。

要素の変更

これらのボタンが登録されているのは「basicstyles」というプラグインです。

そこで「_source/plugins/basicstyles/plugin.js」の下部を見てみると、 以下のような設定があるので、これを config.js などで変更すると要素を変更できることが分かります。

// Basic Inline Styles.
CKEDITOR.config.coreStyles_bold         = { element : 'strong', overrides : 'b' };
CKEDITOR.config.coreStyles_italic       = { element : 'em', overrides : 'i' };
CKEDITOR.config.coreStyles_underline    = { element : 'u' };
CKEDITOR.config.coreStyles_strike       = { element : 'strike' };
CKEDITOR.config.coreStyles_subscript    = { element : 'sub' };
CKEDITOR.config.coreStyles_superscript  = { element : 'sup' };

問題へのの対応

前項の変更で設定を変更することはできるのですが、一つ落とし穴があって、 例えば「uではなくins」「strikeではなくdel」のような以下の設定をした場合、

CKEDITOR.config.coreStyles_underline    = { element : 'ins' };
CKEDITOR.config.coreStyles_strike       = { element : 'del' };

パラグラフ全(P要素)体を選択して「下線」ボタンを押したときに、装飾の結果が以下のようになってしまい、 正しいHTMLとなりません。

<ins><p>文章</p></ins>

CKEditorでは文字の修飾をするときに、 「CKEDITOR.dtd (_source/core/dtd.jsで定義)」を見ているのですが、 「ins」や「del」への装飾の際にこれがうまく働かないことが原因のようです。

この問題については本当は「dtd.js」を追わなくてはいけないとは思うのですが、、 簡単な解決方法としては、CKEDITOR.dtd の「u」や「strike」からコピーするというものがあります。

CKEDITOR.dtd.del = CKEDITOR.dtd.strike;
CKEDITOR.dtd.ins = CKEDITOR.dtd.u;
CKEDITOR.config.coreStyles_underline    = { element : 'ins' };
CKEDITOR.config.coreStyles_strike       = { element : 'del' };

こうすることで正しく「ins」や「del」で装飾されます。