SOFTELメモ

Softel Inc.

TinyMCEで編集画面、プレビュー画面と最終的な表示をなるべく一致させる

問題

TinyMCEを使って、管理画面にWYSIWYGな入力画面、確認画面を作ったのですが、登録したHTMLを表示しているWebサイトの画面と見た目が一致しないです。

どうするとよいでしょうか。

tinymce

答え

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
});

関連するメモ

コメント