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

Movable Type 7 のリッチテキストエディタ( TinyMCE )で入力した任意のテキストを選択し、「リンクの挿入/編集」ボタンをクリックしたときに付けられるクラス名を変更する方法です。

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

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

Mt7 tinymce6 linkclass01

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

その方法は簡単で、各サイトの MTAppjQuery プラグインの設定の中で「自由テキストエリア」というセクションの中に「head の開始タグの直後」という欄がありますので、そこに下記のコードを入れて保存すればOKです。クラス名やプルダウンの表示名は適宜変更してください。

Mt7 tinymce6 linkclass02
<mt:SetVarBlock name="js_include" append="1">
    <script>
    jQuery.extend(MT.Editor.TinyMCE.config, {
        link_class_list: [
            { title: 'None', value: '' },
            { title: 'Custom Class 1', value: 'custom-class-1' },
            { title: 'Custom Class 2', value: 'custom-class-2' }
        ]
    });
    </script>
</mt:SetVarBlock>

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

Mt7 tinymce6 linkclass03
Published 2023-09-06
Updated 2023-09-06

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