MTAppjQuery v2 の mtapp.multiField() のリッチエディタで定型文のような機能を実装する
MTAppjQuery v2 の mtapp.multiField() のリッチエディタを利用して定型文のような機能を実装する方法をご紹介します。
この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。
今日は、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);
以上です。
Published 2019-08-28
, Updated 2019-08-28
, Updated 2019-08-28