WYSIWYGという言葉を知ったのは高校2年生の春だったかなぁ。
ちょうどWindows3.1が出始めた頃でした。
それは画面に表示されたままの状態で印刷できる。
いや、印刷イメージを画面上で作成できるという
いままでのパソコンでは、なかなか実現できなかった技術です。
で、そんなWYSIWYGをWEBブラウザで実現できるのが、このFCKeditorです。
もう一個同じようなの有名なのがTinyMCEという奴なのですが、
プログラマの検討の結果FCKeditor を中心に使うようになりました。
（まじめに比較したことがないのでどっちがよいかはなんともいえませんが・・・。
ちなみに、wordpressはTinyMCEのようです。）
で、このFCKeditorなのですがWYSIWYGという割には編集したものと表示するものが違う・・・。
そりゃ、そうだ。ただ組み込んだだけでは、サイトで利用しているCSSも読み込まれてないし、表示領域に指定されているidやclassも反映されていない。
というわけで、そのCSSを読み込む方法と、idやclassを指定する方法を調べてみました。
■cssの追加
fckconfig.js の29行目
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘css/fck_editorarea.css’ ;
にある、fck_editorarea.cssの頭に、サイトで読み込んでいるcssを追加。
そのままだと、編集領域と表示領域のclass等が違うので、それをエディタの編集領域に当てる。
■編集領域へのクラス等の追加
fckconfig.js の184,185行目にサイトで利用しているidやclassを指定
// This will be applied to the body element of the editor
FCKConfig.BodyId = ‘mainCnt’ ;
FCKConfig.BodyClass = ” ;
場合にはよっては編集領域にあわせて動的に当てるようなこともやった方がいいかもしれません。