CKEditorの備忘録。
とある案件で、CMSで吐き出す記事でCKEditor 3を使うことになったのですが、制作会社さんから提供されたcss（とりあえずcommon.cssとしておきます）に、
* {
font-size: 14px;
font-family: "メイリオ", Meiryo
}
のような記述がありました。
一方で、CKEditorでフォントサイズを変更した場合、
<span style="font-size:16px;">文字列文字列ABC文字列文字列</span>
みたいになります。
さらにその中の一部を修飾すると、
<span style="font-size:16px;">文字列文字列<strong>ABC</strong>文字列文字列</span>
のようになります。
すると、strongタグは、前述のcssファイルの
* {
font-size: 14px;
font-family: "メイリオ", Meiryo
}
が効いて、CKEditorで指定したフォントサイズ（strongの親のspan）が無視されてしまいます。
また、フォントにメイリオを指定しているために、イタリック（斜体）の修飾が効きません。
最終的には以下のようにしました。
common.cssのフォント指定からメイリオを外す。
また、ビジュアルエディタのcssで、日本語フォントを明示的に指定して、そこにはメイリオを含めません。
次に、CKEditorの設定ファイルも変更します。
当該ファイルは、ckeditor.jsと同じ階層にあるcontents.css、config.jsです。
config.jsでは、
coreStyles_bold
coreStyles_italic
coreStyles_underline
について、classを吐き出すようにします。
common.cssでは、CKEditorで吐き出したスタイルに対して、
font-size: inherit;
font-weight: inherit;
font-style: inherit;
text-decoration: inherit;
などを指定して、親のエレメントのスタイルを継承するようにします。
場合によっては、さらに、!important を追加する必要があるかも。
とりあえず、これでうまくいきました。
