TinyMCEで編集画面、プレビュー画面と最終的な表示をなるべく一致させる
問題
TinyMCEを使って、管理画面にWYSIWYGな入力画面、確認画面を作ったのですが、登録したHTMLを表示しているWebサイトの画面と見た目が一致しないです。
どうするとよいでしょうか。
答え
TinyMCEの編集画面はiframeでできていて、そのiframe内をいかに実際の環境に似せるかがポイント。
以下のポイントを対応するとだいぶ一致すると思います（いずれも初期化オプション）。
content_css
初期化オプションで content_css を指定する。
Webサイトなどで使用しているのと同じCSSを読み込ませる。
example
tinyMCE.init({
content_css:"../../css/style.css"
});
body_class、body_id
上で指定したCSSで、CSSを反映したい箇所が特定のclass指定の要素やid指定の要素の中だったりする場合に有効。
TinyMCEの編集画面のiframeの中のbodyタグに必要なidやclassを追加できる。
example
tinyMCE.init({
body_class:"main"
});
doctype
doctypeも表示に影響する。
最近のTinyMCEだとHTML5のDOCTYPEがついていたり、古いTinyMCEだとDOCTYPEがなかったりするので、HTML5、HTML4、XHTMLなど明示する。
example
tinyMCE.init({
doctype:"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
});
remove_linebreaks
全角スペースでインデントをつけようとすると、TinyMCEが除去したりするので、そういった調整を整形機能で消さないようにする。
example
tinyMCE.init({
remove_linebreaks:false
});