2017/03/21
カテゴリがetc.になっておりますがCKEditorのカテゴリーと化しています。結構便利なんですが、私のような半端にしかプログロムをわかっていない人にとっては設置からカスタマイズまでが大変でググっては失敗の繰り返しです。ツールバーの設定は何とかなりましたが、実現したいことがまだいくつかあります。
そのうちの一つがプレビューです。プレビュー自体はボタンがあるので何ら問題ないのですがプレビューで表示される画面はCSSが効いておらずプレビューとは名ばかりの白物となっております。CSSが効いていないのであればCKEditorの画面で入力しているままなので意味がありません。
で、レイによってググります。いくつか出てきますが結構難し気な感じでさらにプラグインを入れろとか何とかというところとconfig.jsでうまくいくとのこととに分かれるようです。
結論として私の場合はconfig.jsを触ることでうまくいきました。
config.contentsCss = ['../../css/hoge.css','../../css/fuga.css'];
という記述でうまくいきました。角かっこの中にシングルクォーテーションでcssファイルの相対パスを書きます。カンマ区切りで複数のCSSを記述できます。
この内容の記事はあちらこちらで目にしていたのですが私の場合どう頑張ってもうまくいきませんでした。私の環境はWindowsにXAMPPを入れてCKEditorプラスPHPでファイルの保存や修正などしておりました。この環境でも全くうまくいくのですが私はちょっとカッコを付けてxamppフォルダのhtdocsフォルダの中にシンボリックリンクを作りましてPHPサイトは別ドライブにデータを保存しておりました。Cドライブが壊れた時の為にデータを別ドライブに退避しておけば何とかなるだろうという短慮が災いしました。
config.contentsCss = ['../../css/hoge.css','../../css/fuga.css'];
の設定がシンボリックリンクではうまくいかないようです。やってもやっても全然CSSが効いてくれませんでした。バカでした。
というわけでconfig.contentsCssの設定をすればCKEditorのtextareaの入力中もCSSが効いて快適に作業できます。