2010/10/01: modx 2.0 revo でTinyMCE内のスタイルを実際の表示用CSSで表示させる
modx 2.0 revoをいじくる毎日です。
色々新しくなって、戸惑うところも多く、まとめるべきことはたくさんあるのですが、今回はすごく簡単なチップスです。
管理画面内で文章整形や画像の挿入など便利な機能を提供してくれる「TinyMCE revo版」をインストールしてみました。このエディタはiframeを使っているので、エディタ内で実際のページに表示される際と同じCSSを適用できるはずです。evoのころからやりたいなーとは思っていたのですが、ようやくチャレンジしてみました。
TinyMCEのソースコードを「css」で検索すると直ぐに該当箇所がわかり、すごく簡単でした。core/components/tinymce/tinymce.class.phpで「content_css」という変数を設定しています。
↓40行目
つまり、modxの設定を読み込んでいるだけなので、modxの「システム>システム設定」を呼び出して「editor_css_path」で絞り込み検索します。
これの値で読込先CSSが指定できます。この場合はassetsフォルダにtinymceというフォルダを作って、そこにcustom.cssを置いています。ここに実際のサイトで使うCSSを指定してあげれば、実際の見た目が再現できるはずです。
WP版で同内容を解説をされているこのサイトでYUI Libraryのreset.cssをこんな感じで読み込んでますが、これ1行書くだけなので簡単でいいですね。
同じライブラリでフォントをIE用に%で書く場合にpxに換算できるのもあって、以前重宝しました。こういうのは、どんどん使っていきたいですね。
トラックバックURL
色々新しくなって、戸惑うところも多く、まとめるべきことはたくさんあるのですが、今回はすごく簡単なチップスです。
管理画面内で文章整形や画像の挿入など便利な機能を提供してくれる「TinyMCE revo版」をインストールしてみました。このエディタはiframeを使っているので、エディタ内で実際のページに表示される際と同じCSSを適用できるはずです。evoのころからやりたいなーとは思っていたのですが、ようやくチャレンジしてみました。
TinyMCEのソースコードを「css」で検索すると直ぐに該当箇所がわかり、すごく簡単でした。core/components/tinymce/tinymce.class.phpで「content_css」という変数を設定しています。
↓40行目
$this->modx->getOption('editor_css_path')
つまり、modxの設定を読み込んでいるだけなので、modxの「システム>システム設定」を呼び出して「editor_css_path」で絞り込み検索します。
これの値で読込先CSSが指定できます。この場合はassetsフォルダにtinymceというフォルダを作って、そこにcustom.cssを置いています。ここに実際のサイトで使うCSSを指定してあげれば、実際の見た目が再現できるはずです。
WP版で同内容を解説をされているこのサイトでYUI Libraryのreset.cssをこんな感じで読み込んでますが、これ1行書くだけなので簡単でいいですね。
@import url('http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css');
同じライブラリでフォントをIE用に%で書く場合にpxに換算できるのもあって、以前重宝しました。こういうのは、どんどん使っていきたいですね。