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

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

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

この記事をシェア

この記事を書いた人

Roy Okuwaki

「かたつむりくんのWWW」を運営している Roy Okuwaki(tinybeans)です。bit part 合同会社 代表社員。2007年から、Movable Type や Craft CMS などの CMS、Web 開発、AI ツールの使い方について書いています。

プロフィールを見る →

関連記事