BitArts Blog

ロードバイク通勤のRubyプログラマで伊豆ダイバー。の個人的なブログ。

CKEditorで複数のCSSを読み込む方法

HTMLの<textarea>をJavaScriptを駆使してWYSIWYGエディタに拡張するライブラリが色々と存在する。色々ある中で、TinyMCEFCKeditorがこの分野の二大勢力となっている。当社のEagleRay CMSも、これら(両方対応)を使ってコンテンツを編集できるようになっている。いつもお世話になっております。特にFCKeditorはフォームの編集にまで対応していて非常に高機能。

長年のバージョンアップですっかり重量級になってしまったFCKeditorの後継として先日、完全に作り直されたCKEditorというのが正式リリースされた。

FCKeditorの公式後継バージョンなのでスムースに移行できるだろうと思ったら、1から作り直しというだけあってFCKeditorとは色々と違うようだ。

とりあえずハマったのはCSSの読み込み。編集領域のCSSを指定したいのだが、これにはCKEDITOR.config.contentsCssCSSのURLを指定すれば良い。…のだが、どうもここには1つのURL文字列しか指定できないみたいだ。FCKeditorではURL文字列の配列を指定できたのだが、CKEditorではうまくいかない。ちなみにTinyMCEではカンマ区切りで複数のURLを指定することができる。

色々探していたらCKEDITOR.editor#addCssというのを見つけたのでこれを使ってみる。…が、これはCSSのURLを指定するのではなくて、CSSの設定文字列を直接指定するもののようだ。ということで、かなり強引だけど@importを埋め込んでみる。…でけた。

以下は、親と同じスタイルを引き継がせるためのコード。

var editor = CKEDITOR.replace("contentEdit");
for (var i=0; i<document.styleSheets.length; i++) {
  var style = "@import \"" + document.styleSheets[i].href + "\";\n";
  editor.addCss(style);
}

ほぼうまくいったけど、ツールバー「フォーマット」ドロップダウンリストの中のプレビューには反映されない。というかもう少しまともな方法もありそうな気もする…

コメント

2009/10/ 2 17:42 from あきら

CKEditor のツールバーは直接編集画面に作成されます。
従って編集画面(CKEditorを呼び出す画面)にCSSを適用すれば「フォーマット」のプレビューに反映されるはずです。
しかし、編集画面でhタグなどを使う場合は編集画面用のclassを指定するなどする必要が生じます。

CKEditorになって不便になった点ですね。

2009/10/ 3 22:18 from あきら

すいません。思いっきり間違いでした。

実験と調査をしました。

「フォーマット」の選択はIFRAMEで表示されており、編集エリアと同様に contentsCss を適用していますが、addCss は考慮していませんでした。

contentsCss を使っているところを片っ端から修正する方が良いかもしれません。

2009/10/ 4 19:50 from あきら

対策用のプラグインを公開しました。

http://akira.matrix.jp/?ID=243

よかったら使ってみてくれませんか?

2009/10/ 4 23:53 from みやまえ

あきらさん、情報ありがとうございます!
プラグインも使ってみますね。またこちらでも進捗ありましたらブログに記事書いてみます。