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

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

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

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...