PowerCMS ブログ

まず結論から

「TinyMCE 設定」の「高度な設定」項目に下記コードを設定する事で、ウェブサイト/ブログ毎に TinyMCE の高度な設定を変更する事ができます。

※ 「高度な設定」項目は、[システムメニュー]-[設定]-[PowerCMS] 画面内にあります。

$(function(_ex_config, undefined) {
    var params = (function(ret) {
        var duc = function(s) { return decodeURIComponent(s.replace(/\+/g, ' ')) },
            re  = /([^&;=]+)=?([^&;]*)/g,
            m;
        while ((m = re.exec(window.location.search.substring(1))) !== null) {
            ret[duc(m[1])] = duc(m[2]);
        }
        return ret;
    })({});

    var blog_id = parseInt(params['blog_id'] || $('#blog-id').val(), 10) || 0;

    // ID が 1 のブログに対しての設定
    if ( blog_id === 1 ) {
        _ex_config.Foo = true;
        _ex_config.Bar = true;
    }
    // ID が 2 のブログに対しての設定
    else if ( blog_id === 2 ) {
        _ex_config.Foo = false;
        _ex_config.Bar = false;
    }

    $.extend(config, _ex_config);
})({});

※ 上記コードはサンプルコードとなります。
_ex_config.Foo や _ex_config.Bar はダミーの設定なので適宜変更してご利用ください。

ことの起こり

Movable Type 5.2 以降では、標準のリッチテキストエディタとして TinyMCE が採用され、プラグインとして同梱されるようになりました。

PowerCMS では、TinyMCE プラグインを拡張し、リッチテキストエディタの初期設定の上書きや、ボタンの追加、機能の追加をしています。

リッチテキストエディタ（TinyMCE）の拡張方法

リッチテキストエディタ（TinyMCE）は、大きく分けて下記の二通りの拡張方法があります。

1. 「PowerCMS 設定」の「TinyMCE 設定」で拡張する
2. プラグインで拡張する

...というのは、過去の PowerCMS ブログの記事「リッチテキストエディタ(TinyMCE)を拡張する」からの引用です。

こちらの記事ではタイトル通り TinyMCE の拡張方法をご紹介をしてまして、公開してから日がたってはいるものの今でも十分参考になる内容だと思います。

TinyMCE の高度な設定をウェブサイト/ブログ毎に設定したが、期待した結果にならない

記事をご覧になられたお客様より次の様なお問い合わせをいただきました。

PowerCMS ブログの記事を参考に、特定のブログに対してのみ TinyMCE の設定を行っているのですが、
プレビュー（旧式）から戻った場合に URL にパラメータが付与されないため有効となりません。

パラメータを付与、もしくは設定を有効とするにはどのようにすればよろしいでしょうか。

「リッチテキストエディタ(TinyMCE)を拡張する」記事内では、以下のように「ブログ毎に TinyMCE 設定を施す方法」がサンプルコード付きで紹介されています。

JavaScript にてブログ ID を取得できるため、ブログ ID が 2 のブログのみ、設定を有効にするということも可能です。

if (location.search.match(/[?&;]blog_id=(\d+)/)[1] === "2") {
    $.extend(tinymce_editor.init, {
        force_br_newlines: true,
        force_p_newlines: false,
        forced_root_block: ''
    });
}

もちろん上記サンプルコードでも期待通りの動作をしています ( 現在の最新版 PowerCMS 4.33 で検証 ) 。

...なのですが、確かに「旧方式のプレビューから戻った場合」でのみ動作していませんでした。

検証条件

• 環境変数 PreviewInNewWindow を 0 に設定する

TinyMCE の高度な設定をウェブサイト/ブログ毎に変更する方法 その2

ということで、ここからが本題です！

原因は単純で、 URL のパラメータ blog_id の値を元に編集中の記事が所属しているブログを判別しているのに、旧方式のプレビュー画面から記事編集画面へ遷移した際には URL にパラメータ blog_id が含まれていないため、動作していない状態になっていました。
( お客様からいただいたご指摘どおりですね。 )

そこで、URL のパラメータでブログを判別するだけではなく、編集画面の HTML 要素からもブログを判別する処理を追加したのが、本稿の初めにご紹介したサンプルコードとなります。

サンプルコード内の _ex_config.Foo や _ex_config.Bar はダミーの設定なので、例えば「Movable Type 5.2 のリッチテキストエディタを config.yaml で拡張する」というドキュメントで紹介されているサンプルの「Enterキーを押下した際に p 要素ではなく br 要素が挿入されるようにする設定例」を適応するには下記のようなコードになります。

$(function(_ex_config, undefined) {
    var params = (function(ret) {
        var duc = function(s) { return decodeURIComponent(s.replace(/\+/g, ' ')) },
            re  = /([^&;=]+)=?([^&;]*)/g,
            m;
        while ((m = re.exec(window.location.search.substring(1))) !== null) {
            ret[duc(m[1])] = duc(m[2]);
        }
        return ret;
    })({});

    var blog_id = parseInt(params['blog_id'] || $('#blog-id').val(), 10) || 0;

    if ( blog_id === 2 ) {
        _ex_config.force_br_newlines = true;
        _ex_config.force_p_newlines = false;
        _ex_config.forced_root_block = '';
    }

    $.extend(config, _ex_config);
})({});

※ 上記サンプルコードでは、ブログ ID が 2 のブログのみ設定が有効になります。