• Home
  • Movable Type
  • MTAppjQuery
  • MTAppjQuery v2 の mtapp.multiField() のリッチエディタで定型文のような機能を実装する

MTAppjQuery v2 の mtapp.multiField() のリッチエディタで定型文のような機能を実装する

今日は、MTAppjQuery v2 の mtapp.multiField() のリッチエディタで定型文のような機能を実装する方法をご紹介します。

初期設定で .multiField() を適用

はじめに、初期設定のフィールドと、showViewRawDataButton: true の状態のコンテンツフィールドを用意します。例えば、下記のようなコードを user.js に記述します。

(function($){

    mtapp.multiField({
        debug: false,
        id: 14, // 環境に合わせて変更してください。
        label: 'マルチフィールド',
        showAddFieldButton: true,
        showViewRawDataButton: true
    });

})(jQuery);

定型文にしたい状態を作る

次に、実際にコンテンツデータ作成画面で、リッチテキストエディタを追加し、定型文にしたい内容をリッチエディタに書き込みます。

「編集を適用」してフィールドに適用されたことを確認してください。そして「保存データを表示」をクリックします。

すると、フィールド上部に JSON が入ったテキストエリアが表示されますので、この中のリッチテキストに関係する部分をコピーします。具体的には下記 data の部分になります。

"data": "\n省略<table border="\" 1\""=""></table>"

user.js に追記

上記の JSON を multiField() の設定の中に data プロパティの値として追加します。user.js は下記のようになります。

(function($){

    mtapp.multiField({
        debug: false,
        id: 14, // 環境に合わせて変更してください。
        label: 'マルチフィールド',
        showAddFieldButton: true,
        showViewRawDataButton: true,
        fieldGroups: [
            [
                { 
                    "type": "tinymce",
                    "label": "定型文エディタ",
                    "rows": 8,
                    "data": "<table border="\"1\"">省略</table>"
                }
            ]
        ]
    });

})(jQuery);

以上です。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

MTAppjQuery