webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
③CKEditor4プラグイン【stylesheetparser】外部CSSファイル読込・ カスタマイズスタイルの追加【WYSIWYGエディタ CKEditor】 eyecatch画像

③CKEditor4プラグイン【stylesheetparser】外部CSSファイル読込・ カスタマイズスタイルの追加【WYSIWYGエディタ CKEditor】

rss

 これまでのCKEditor関連の記事。
①【CKEditor4の導入設置】エラーを回避する本体のダウンロード方法
②【CKEditor4の導入設置】config.js基本設定/カスタマイズの方法

CKEditor4の「本体導入方法」と「config.jsの基本設定」を記事にしましたので、プラグインについても記事にしたいと思います。

まずは、CKEditorにスタイル・CSSを追加したい場合のプラグイン「stylesheetparser」です。
適用させたいカスタマイズしたCSSファイルを用意し、
CKEditorのツールバー「スタイル」に選択肢を加え、簡単に文章にクラス等をセットできます。

CKEditor公式ページ参照:CKEditorのエディタや表示に「スタイル・CSS」を加える方法の詳細

 

③CKEditor4プラグイン「stylesheetparser」
 : 外部CSSファイルの読込・カスタマイズCSSスタイルの追加

「stylesheetparser」は、CKEditorのエディタで編集時と出力時どちらもに、カスタマイズしたCSSファイルを適用させることができるプラグインです。
CSSファイルで設定したクラスは、CKEditorのエディタ編集時にツールバーの「スタイル(ブロックスタイル)」セレクトボックスに選択肢として表示され、文章にCLASSを割り当てることが可能です。

CKEditorプラグイン「stylesheetparser」
まず、上記リンクより最新バージョンのプラグインをダウンロードし、CKEditor設置ディレクトリの「plugins」ディレクトリの中にアップロードし、下記設定をします。

 
config.jsの設定

下記を参考に、config.jsに追記します。
「config.extraPlugins」に「stylesheetparser」プラグインを追加し、外部CSSファイルの読込設定を追加します。
外部CSSファイルは複数でも読込可能です。
※CSSファイルの名前は何でも構いません。

/* プラグイン「stylesheetparser」追加
------------------------------------------------------------*/
config.extraPlugins = '〇〇〇, 〇〇〇, stylesheetparser';


/* プラグイン「stylesheetparser」:CSS外部ファイル読込設定(カスタムスタイル追加)
------------------------------------------------------------*/
config.contentsCss = [ '/ckeditor/ckeditor_customized.min.css' ]; // カスタマイズしたCSSのパス

// 複数のカスタマイズしたCSSファイルを読み込む場合
config.contentsCss = [ '/ckeditor/ckeditor_customized01.min.css', '/ckeditor/ckeditor_customized02.min.css' ];
 
 
外部CSSファイル 追加スタイルのカスタマイズ

外部CSSファイルに、適用させたいスタイルを記述します。
例えば下記例のように、
「h〇.クラス名」の型式でCSSを設定します。
CKEditorのエディタ編集時、ツールバーの「テキスト文」セレクトボックスの選択肢に「h〇.クラス名」が表示され、文章に適用させることが可能になります。(下記の例では「h3.title01」と選択肢に表示されます。)

 例:ckeditor_customized.css

@charset "utf-8";

h3.title01, .cke_editable h3.title01{
    color: #333;
    margin: 0 0 15px;
    padding: 0 0 .1em;
    border-bottom: 2px solid #333;
}




「外部CSSファイル」でスタイルを追加せず、「config.js」で直接スタイルを追加することも可能です。
その場合は、「config.jsの基本設定」でも記事にしていますので参考にどうぞ。

 
ページの先頭へ

rss
1件目 (1件中)