• Home
  • MTAppjQuery
  • Movable Type の TinyMCE のリッチテキストの「リンクの挿入」をクリックしたときのポップアップウィンドウをカスタマイズしてみよう

Movable Type の TinyMCE のリッチテキストの「リンクの挿入」をクリックしたときのポップアップウィンドウをカスタマイズしてみよう

Movable Type 6 でのお話になりますが、記事の本文欄にあるリッチテキストエディタ(TinyMCE)の中の「リンクの挿入」ボタンをクリックしたときに表示されるポップアップウィンドウをカスタマイズしてみます。

link-popup.png

今回は、リンクのURL欄をクリックしたときに全選択状態になるようにしてみます。

user.js

user.js に下記のように書きます。

(function($){
  'use strict';
  if (mtappVars.screen_id === 'edit-entry') {
    // TinyMCE のリンクボタンをクリックしたときのポップアップウィンドウのカスタマイズ
    $(document).on('click', 'span.mceIcon.mce_link', function () {
      const timer = window.setInterval(function () {
        const $popup = $('[id^="mce_inlinepopups_"][id$="_wrapper"]:visible');
        if ($popup.length) {
          window.clearInterval(timer);
          const $iframe = $popup.find('iframe').contents();
          if ($iframe.length) {
            $iframe.find('#href')
            // スタイルを調整してみる
            .css({
              fontSize: '20px',
              backgroundColor: 'yellow'
            })
            // クリックしたら全選択する
            .on('click', function () {
              $(this).select();
            });
          }
        }
      }, 400);
    });
  }
})(jQuery);

細かい説明は省略しますが、ポイントは下記のようなところになります。

  • TinyMCE は JavaScript で挿入されるため、クリックイベントは document に対して設定する。
  • ポップアップウィンドウは、ボタンがクリックされてから生成されるため、 window.setInterval でポップアップウィンドウが見つかるまで探す。
  • ポップアップウィンドウの iframe の中のコンテンツを取得して処理する。

今回は URL 欄のスタイルを調整したり、クリックしたときに全選択するようにしてみました。

以上です。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

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

Craft CMS

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