WEB開発備忘録

CK editorで「Font Awesome」を使う / iタグの許可とエディタ上での表示

Font Awesome を良く使います。いろんなアイコンが用意されていて便利です。
このアイコンをCKエディタで使いたいとき、たくさんハードルがありました。
調整内容の記録です。

タグを許可する
タグのフィルタリング機能を操作します。
ckeditorの設定ファイル「ckeditor/config.js」に以下の記述を追加します。

config.allowedContent = true;

iタグが勝手に除去されてしまうのを対処
これだけではまだiタグが除去されてしまうので、
エディタを埋め込むHTML側で以下のJSコードを記述します。

CKEDITOR.dtd.$removeEmpty['i'] = false;

これでiタグが保存出来るようになりました。

エディタ上でもアイコン(iタグ)が表示されるように。
これだけではアイコンがエディタの編集領域に表示されません。
iタグがアイコンとして表示されるように「Font Awesome」のCSSを読み込みます。(ck editorから)
CKeditorを表示しているHTMLに以下のJSコード記述します。

CKEDITOR.config.contentsCss = ['/ckeditor/contents.css','/css/font-awesome.min.css'];

※ contents.cssはCkeditorデフォルトのCSSです。
※ awesome.min.cssはこちらから入手

これで、CKeditorでFont Awesomeのアイコンが使えるようになりました!