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

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

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

今回は、リンクの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 欄のスタイルを調整したり、クリックしたときに全選択するようにしてみました。

以上です。

user.js

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