ウェブページの編集作業をしていて「今編集しているウェブページから他のウェブページへのリンクを挿入するのが手間だな」と感じました。「ボタンをクリックするとモーダルウインドウが出てきてウェブページの一覧が表示され、目的のページを選択すると編集エリアにリンクを挿入できないだろうか」と考えました。
以前自分用に購入した「MTAppjQueryプラグイン」の「MTAppListing」を使用すれば、実際に動作するものが手軽に作成できそうなので早速試してみました。（モーダルウインドウにリストを表示するプラグインは大変そう？だったので。）
プロトタイプ作成結果
下記スクリーンショットのように、TinyMCEのボタンの中に「ウェブページへのリンクを挿入」というボタンを表示させ、モーダルウインドウで選択したウェブページへのリンクが挿入されるようになりました。
ウェブページの選択画面は下記のようなイメージです。少し見栄えが変ですが即席に作ったコードなのでご容赦を。
動作イメージ
YouTubeに「Movable Typeでウェブページへのリンクをボタンから挿入する 」をアップしました。
サンプルコード
サンプルコードを掲載します。私は「ExtendTinyMCEプラグイン」のextension.jsに書いています。藤本壱さんの「TinyMCEConfigプラグイン」でももちろん実現可能です。
コードの要旨は、まずTinyMCEの編集ボタン群にinput:hiddenを挿入しMTAppListingを実行します。取得したウェブページの一覧はcbProcessResponseで変数に格納し、cbAfterOKが呼ばれた際に選択したウェブページのIDを利用してURL・タイトルの取得を行い、編集エリアに挿入しています。
function escapeHTML (string) {
if (typeof string !== 'string') {
return string;
}
return string.replace(/[&'`"<>]/g, function (match) {
return {
'&': '&',
"'": ''',
'`': '`',
'"': '"',
'<': '<',
'>': '>',
}[match]
});
}
function setupMTAppjQuery () {
var $customButtonArea = $('<td style="position: relative"><span class="mceSeparator" role="separator" aria-orientation="vertical" tabindex="-1"></span></td>' +
'<td id="list_pages"><input type="hidden" class="test" id="tmp__applisting_storage" name="tmp__applisting_storage"></td>');
var $appListingStorage;
var pageData;
if ($("#list_pages").length > 0) {
return;
}
$("#editor-input-content_toolbar5 tr").append($customButtonArea);
$appListingStorage = $("#tmp__applisting_storage");
$appListingStorage.MTAppListing({
url: "/mt/mt-data-api.cgi/v2/sites/1/pages",
data: {
limit: 9999999
},
jsontable: {
header: {
id: "ID",
title: "タイトル",
date: "公開日"
},
headerOrder: ["id", "title", "date"],
itemsRootKey: "items",
listingTargetKey: "id",
listingTargetEscape: false,
},
cbProcessResponse: function (cb, response) {
pageData = response;
return response;
},
cbAfterOK: function (cb, $dialog) {
var val = $appListingStorage.val();
var ids = val.split(",");
var list = "";
ids.forEach(function (id) {
if (id) {
pageData.items.forEach(function (item) {
if (item.id == id) {
list += "<li><a href='" + escapeHTML(item.permalink) +
"'>" + escapeHTML(item.title) + "</a></li>";
}
})
}
});
if (list) {
window.tinyMCE.editors[0].selection.setContent("<ul>" + list + "</ul>");
}
$appListingStorage.val("");
}
});
$("#list_pages a").text("ウェブページへのリンクを挿入");
};
$.extend(config, {
oninit : setupMTAppjQuery
});今後
現在ウェブページの一覧はData API経由で取得していますが、Data APIの使用ができない場合も考えられるので工夫が必要でしょう。また、ブログIDを変化させる必要もありますね。色々検討してみたいと思います。