CKEditor 4の入力画面はCSSが適用された状態を確認できない
「CKEditor 4の入力画面でも、プレビュー画面と同じ状態が表示されるようにしてほしい」
という依頼を受けたことがあります。
確かにいちいちプレビュー画面に遷移して確認するのは面倒です。
記事を書きながら本番の状態を確認できたらラクですね。わかります。
そのためには、入力画面にCSSを反映するための設定が必要です。
というのもCKEditorの入力画面はiframeで生成されるので、
HTMLやPHPファイルで読み込んでいるCSSは適用されません。
（↓こういうのは適用されない）
<link href="<?php echo get_template_directory_uri(); ?>/css/style.min.css" rel="stylesheet">設定と聞くと面倒な気持ちになりますが、ご安心ください。
コードをたった1行追加するだけです！
【基本コード】CKEditor 4の入力画面にCSSを適用させる方法
ckeditor/config.js
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = ['/assets/css/style.css']; //このコードを追加する
};
【解説】CKEditor 4の入力画面にCSSを適用させる方法
事前準備
CKEditorの組み込みについてはこちらをご覧ください。
CKEditor 4にテンプレートを追加するためのポイント2つ
ckeditor/config.jsに1行を追加
さて設定をしていきましょう。
といっても簡単です。
ダウンロードしてきたファイル一式の中の
ckeditor/config.jsにコードを1行追加するだけです。
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = ['/assets/css/style.css'];
};
config.contentsCssという項目にCSSのパスを指定します。
CSSのパスは人それぞれで変わるはずなので適宜修正してください。
設定前）
設定後）
入力画面にもCSSが適用されました！
これで設定は終わりです。
簡単！
【まとめ】CKEditor 4の入力画面にCSSを適用させる方法
今回はCKEditor 4の入力画面にCSSを反映する方法を見ていきました。
たった1行追加するだけなので、手間もかからずに対応できます。
「プレビュー画面でも確認したい、でも入力画面でも確認したい！」
というよくばりさんのニーズにも笑顔で応えちゃいましょう！
以上です。
少しでもお役に立てたら嬉しいです。
Comments