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

2016-05-27
2分で読了
更新: 2025-12-26

目次

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);

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

クラス名の選択:カスタマイズ

この記事をシェア

関連記事