MTAppJSONTable の中で MTAppAssetFields を利用するときの注意点（コンテンツデータ編集画面編）

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

コンテンツデータ編集画面で、MTAppJSONTable を利用する場合、下記のようにして cbAfterBuild と cbAfterAdd コールバックを指定して適用します。td.file のところは header オプションで指定した値に置き換えてください、

cbAfterBuild: function(cb, $container){
  $container.find('td.file .jsontable-input').MTAppAssetFields({
    "assetType": "file",
    "assetTypeLabel": "ファイル"
  });
},
cbAfterAdd: function(cb, $container){
  $container.find('td.file .jsontable-input:not(".isMTAppAssetFields")').MTAppAssetFields({
    "assetType": "file",
    "assetTypeLabel": "ファイル"
  });
},

これで元々テキストエリアだったところがアセットフィールドに変更されます。

しかし、このままだと JSON が保存されるときに form タグが保存されてしまい、アセットの情報がうまく保存されませんし、JSON のパースエラーが表示されてしまいます。

それに対処する為に、user.js の最後の方に下記のコードを追加します。

// 保存前に MTAppJSONTable の中の MTAppAssetFields の値を整形する
$('#edit-content-type-data-form button[type="submit"]').on('click', function () {
  $('.isMTAppAssetFields').each(function () {
    const $this = $(this);
    let value = $(this).val();
    if (/<form mt:asset-id/.test(value)) {
      value = value.replace(/<form mt:asset-id="(\d+)".+?href="([^"]+)">([^<]+).+/gi, '{"id":"$1","filename":"$3","url":"$2"}');
      var $customfieldPreviewImage = $this.next().find('img');
      if ($customfieldPreviewImage.length > 0) {
        var thumbURL = $customfieldPreviewImage.attr('src');
        value = value.replace(/\}$/, ',"thumbnail":' + '"' + thumbURL + '"}');
      }
      $this.val(value);
      if ($this.hasClass('jsontable-input')) {
        $this.closest('div.mtapp-json-table').prev().trigger('MTAppJSONTableSave');
      }
    }
  });
});

以上です。

「MTAppjQuery」カテゴリの記事一覧