• Home
  • Movable Type
  • MTAppjQuery
  • Movable Type 7 のコンテンツデータの「テキスト(複数行)」を MTAppjQuery v2 のオーバーレイエディタに変更する

Movable Type 7 のコンテンツデータの「テキスト(複数行)」を MTAppjQuery v2 のオーバーレイエディタに変更する

Movable Type 7 のコンテンツフィールドのうちの「テキスト(複数行)」を MTAppjQuery v2 のオーバーレイエディタに変更する方法をご紹介します。Movable Type Pro r.5201 で動作確認しました。

(2019-03-11 21:20 に公開していた記事を書き直しました。)

Overlayeditor only min

コンテンツフィールドを作成

はじめに「テキスト(複数行)」のコンテンツフィールドを作成します。「入力フォーマット」は なし にしておきます。

ここで作成したコンテンツフィールドの ID をメモしておきます。ID はコンテンツデータ編集画面で確認できます。

Overlayediter only min

user.js

user.js に下記のコードを追加します。コード中の 242 の部分はコンテンツフィールドの ID に置き換えてください。

(function($){

    // テキスト(複数行)をオーバーレイエディタに変更する
    function convertOverlay(fieldId) {
        const name = `content-field-${fieldId}`;
        const value = $(`[name="${name}"]`).attr('name', '').val();
        const $container = $(`#contentField${fieldId}`).hide();
        const label = $container.find('label').first().html().trim();
        $container.after(
            `<div class="form-group"><label>${label}</label><textarea name="${name}"></textarea></div>`
        ).hide();
        $(`[name="${name}"]`).val(value).mtapp('overlayEditor');
    }
    convertOverlay(242);

})(jQuery);

これで完成です。

以上です。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

MTAppjQuery