Movable Type の記事のタイトル欄で改行できるようにしてみよう
Movable Type の記事のタイトル欄をテキストエリアに変更して擬似的に改行できるようにしてみました。
Movable Type の 記事 のタイトル欄は input:text です。このタイトル欄をテキストエリアにして改行できるようにしたいという要望はたまにあるので、擬似的に実現できるようにカスタマイズしてみます。
MTAppjQuery の利用が前提となります。
user.js
まず 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>" />
以上です。
Published 2019-01-17
, Updated 2019-06-25
, Updated 2019-06-25