Movable Type の TinyMCE のリッチテキストの「リンクの挿入」をクリックしたときのポップアップウィンドウをカスタマイズする方法をご紹介します。
Movable Type 6 でのお話になりますが、記事の本文欄にあるリッチテキストエディタ(TinyMCE)の中の「リンクの挿入」ボタンをクリックしたときに表示されるポップアップウィンドウをカスタマイズしてみます。
今回は、リンクのURL欄をクリックしたときに全選択状態になるようにしてみます。
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);
細かい説明は省略しますが、ポイントは下記のようなところになります。
document
に対して設定する。window.setInterval
でポップアップウィンドウが見つかるまで探す。iframe
の中のコンテンツを取得して処理する。今回は URL 欄のスタイルを調整したり、クリックしたときに全選択するようにしてみました。
以上です。