【MT】CKEditor for Movable Typeで、ウェブページ、ブログ記事でCSSの設定を変える方法

Movable Typeのエディタープラグイン「CKEditor for Movable Type」で、
ブログ記事とウェブページのエディターCSSを分ける方法をメモしておきます。

ブログ記事とウェブページでテンプレートが違う時などに便利です。

システム → プラグイン設定 → 「CKEditor for Movable Type」の設定タブ、
【その他の設定】の「設定値」に以下を設定します。

// ブログ記事の編集の場合だけ設定を変更する
if (CKEditorObjectType == 'entry') {
	config.contentsCss = ['/css/entry.css'];
}

// ページの編集の場合だけ設定を変更する
if (CKEditorObjectType == 'page') {
	config.contentsCss = ['/css/page.css'];
}

上記は、ブログ記事とウェブページで読み込むスタイルシートを分けた場合です。
ブログ記事とウェブページでブロックが違う場合は、読み込みスタイルシートは共通で、
config.bodyId = ”; 部分をそれぞれ設定するだけで良いかと思います。

(例)
ブログ記事の囲みは「div#entry」、ウェブページの囲みは「div#page」と分けており、
それぞれCSSの設定を「#entry h1」「#page h1」という風に設定している場合

// ブログ記事の編集の場合だけ設定を変更する
if (CKEditorObjectType == 'entry') {
	config.bodyId = 'entry'; 
}

// ページの編集の場合だけ設定を変更する
if (CKEditorObjectType == 'page') {
	config.bodyId = 'page';
}

上はあまりないケースかもですが。。

また、このブログ記事とウェブページで設定を分ける記述方法は、
プラグインの「設定例」に記載されていますが、
「if (CKEditorObjectType = ‘entry’) 」となっており「=」が1つ抜けていて上手くいかず慌てたので、
メモしておきます。
「if (CKEditorObjectType == ‘entry’) 」のように、「==」にすると、正常に反映されます。

コメント

タイトルとURLをコピーしました