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('' + title + '');
 $('#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 モディファイアで改行タグに置換して出力します。

" />

以上です。