Movable Type の TinyMCE の「リンクの挿入/編集」で付けられるクラス名を変更するには

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

2023/09/06 追記

MT7版は「Movable Type 7 の TinyMCE 6 の「リンクの挿入/編集」で付けられるクラス名を変更するには」の記事をご覧ください。

Movable Type のリッチテキストエディタ（ TinyMCE ）で入力した任意のテキストを選択し、「リンクの挿入/編集」ボタンをクリックすると下図のようなポップアップが現れ、選択したテキストにクラス名を付けることができます。

ここで付けられるクラス名を、MTAppjQuery プラグインを利用して変更する方法をご紹介します。Movable Type 6.2.4 + Chrome で動作確認しています。

その方法は簡単で、user.js に下記のコードを書けば OK です。

(function($){

    // 記事編集画面に限定
    if (mtappVars.screen_id === "edit-entry") {
        $('#text-field').on("click.MTAppTinyMCECustomLink", "#editor-input-content_link", function(){
            tinymce.EditorManager.activeEditor.dom.classes = [
                {"class": "test-1"},
                {"class": "test-2"},
                {"class": "test-3"},
                {"class": "test-4"},
                {"class": "test-5"}
            ];
            return true;
        });
    }

})(jQuery);

これで、下図のようになります。

「MTAppjQuery」カテゴリの記事一覧