Movable Type の記事のタイトル欄で改行できるようにしてみよう

Movable Type の 記事 のタイトル欄は input:text です。このタイトル欄をテキストエリアにして改行できるようにしたいという要望はたまにあるので、擬似的に実現できるようにカスタマイズしてみます。

line-brake-title-min.png

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>" />

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

MTAppjQuery