CKEditorでCSS・styleタグが書けるように設定する

2015/01/04 JavaScript/jQuery  このエントリーをはてなブックマークに追加
ckeditor

WYSIWYGエディタの中で、最近CKEditorと格闘させられています。
これはその忘備録記事です(いつものことですが)

WYSIWYGエディタなので、そんなことする必要ないだろと思われるかもしれませんが、世の中にはエディタの中に直接CSSやを書きたいと言ったり、さらにはstyleタグを書かせろという案件が存在するわけです。割と頻繁に良くあるので、CKEditorの編集エリア内にでCSSやstyleタグを使えるようにする方法を記載しておきます。


CKEDITOR.editorConfig = function( config ) {
...
 config.allowedContent = true;
...
}


1番簡単な方法は以上です。
以下参考など。

参考:CKEditorドキュメント
▼allowedContentのオプションについて
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
▼Allowed Content Rulesについて
http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules


config.allowedContentでは、タグのフィルタリングをするか否かを切り替えています。CKEditorはセキュリティを高めるため、初期設定で許可されているタグはそんなに多くありません。許可されていないタグは勝手に消されます。
「divタグが消えた」などという問題も、この部分の設定で解決することができます。
config.allowedContent=trueでフィルタリングがオフになります。


同じようなconfig設定でconfig.extraAllowedContentというものもあります。config.extraAllowedContentはフィルタリングの機能を拡張するためのものです。タグやclass等の記述方法について、詳細な許可設定を行うことができます。


▼例:styleタグの許可
config.extraAllowedContent = 'style';

▼例:divタグで、hoge1とhoge2というclassを許可
config.extraAllowedContent = 'div(hoge1,hoge2)';

▼例:全てのタグに対して、hoge1とhoge2というclassを許可
config.extraAllowedContent = '*(hoge1,hoge2)';


セキュリティ面を強固にする場合や、使用できるタグやclassが固定の場合は、config.extraAllowedContentで拡張することをおすすめします。
どんな方向から追加ジャブがやってくるかわからない場合はconfig.allowedContentで設定しておくと一時的に心が穏やかになれます。


まぁ、CKEditorとか入れるところは、最初からセキュリティかかってるところに置くことが多そうですし、config.allowedContentでも問題なさそうですけどね。

コメント

*
*

<< あけましておめでとうございます | GithubのREADME.mdの書き方がわかるリンク先まとめ >>