Movable Type の記事のタイトル欄をテキストエリアに変更して擬似的に改行できるようにしてみました。
Movable Type の 記事
のタイトル欄は input:text
です。このタイトル欄をテキストエリアにして改行できるようにしたいという要望はたまにあるので、擬似的に実現できるようにカスタマイズしてみます。
MTAppjQuery の利用が前提となります。
まず user.js
に下記のように書きます。
(function($){
'use strict';
if (mtappVars.screen_id === 'edit-entry') {
// タイトル要素のカスタマイズ
const $title = $('#title').hide();
const title = $title.val().replace(/\[br\]/g, "\r\n");
$title.after('<textarea class="form-control text title low" id="title-dummy">' + title + '</textarea>');
$('#entry_form').on('submit', function () {
const $textareaTitle = $('#title-dummy');
const textareaTitle = $textareaTitle.val().replace(/(\r\n|\n)/g, '[br]');
$title.val(textareaTitle);
});
}
})(jQuery);
input#title
の後に擬似的なタイトル欄の textarea
を挿入します。保存の際に、そのテキストエリアの値の中の改行を [br]
に変更し、本来のタイトル欄にセットします。
テンプレートでは、下記のように replace
モディファイアで改行タグに置換して出力します。
<mt:EntryTitle replace="[br]","<br>" />
以上です。