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

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

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 について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。