Blog

Movable Typeの気づいた点などの紹介

2019.12.20

MTAppjQueryのマルチフィールドに初期値のフィールドを入れる

  • JavaScript
  • MTAppjQuery

MTAppjQueryのマルチフィールドを設定する際に、初期値はボタンでフィールドを追加していきます。
新規でコンテンツデータまたは記事作成した際に、初期値のフィールドを出しておくuser.jsの書き方になります。

サンプルはFAQの例になります。
マルチフィールドで初期値に値のフィールドを入れる場合は、まずフィールドを出した状態で保存データのJSONをコピーしておきます。
コピーしたJSONをuser.jsのjQueryのコードのvalにペーストして設定します。

手順

  1. 必要なフィールド保存データを出してコピーしておく
  2. textareaなりの設定するフィールドのところのvalに空だった場合は挿入
  3. なかった場合は実行しない

コード

オブジェクトに設定したIDや設定したフィールドは読み替えて組み立ててください。


/*
* ==================================================
* NOTE: config IDなどの設定
* ==================================================
*/
var site_id = {
  site_parent: '<mt:Var name="site_id_parent" />' - 0,
  site_faq: '<mt:Var name="site_id_faq" />' - 0
};
/*
* ==================================================
* NOTE: マルチフィールドの設定
* ==================================================
*/
var _configFieldGroups = {
  faq: [[{
    type: 'table-vertical',
    label: '質問と回答を追加',
    options: [{
      type: 'textarea',
      label: '質問',
      rows: 6
    }, {
      type: 'tinymce',
      label: '回答',
      rows: 6
    }]
  }]]
}
// ------------------------------------------
// コンテンツデータ編集画面
// ------------------------------------------
if (mtappVars.type === 'content_data') {
  var $contentData = $('#content_data');  // cotent_dataを格納
  /*
   * コンテンツフィールドのループ処理
   */
  $contentData.find('> [id^="contentField"]').each(function () {
    var self = this;
    var _labelText = $(self).find('label:first-child').text(); // フィールドのラベルを取得
    if ($.inArray(mtappVars.blog_id, [site_id.site_id_faq]) > -1) {
      // 必須にすると必須という文字も取得できる且つテキスト(複数行)のときはフォーマットという文字も取れる
      if (_labelText === 'QA 必須フォーマット:') {
        // テキストエリアのIDを取得
        var _fieldId1 = $(self).attr('id').replace('contentField', '')
        // エディタの部分のtextareaの情報を比較
        if ($('#editor-input-content-field-' + _fieldId1).val() === '') {
          // ここにコピペしたJSONをvalにいれる
          $('#editor-input-content-field-' + _fieldId1).val('{"items":[{"type":"table-vertical","label":"質問と回答を追加","options":[{"type":"textarea","label":"質問","rows":6,"data":""},{"type":"tinymce","label":"回答","rows":6,"data":""}]}]}')
          mtapp.multiField({
            debug: false,
            id: _fieldId1,
            label: '質問と回答',
            showAddFieldButton: true,
            showViewRawDataButton: true,  // 保存データ取得のため一旦true
            fieldGroups: _configFieldGroups.faq
          });
        }
      }
    }
  });
}

  • Facebook
  • Twitter
  • はてなブックマーク
CATEGORY BACK