• Home
  • Movable Type
  • MTAppjQuery
  • MTAppJSONTable の中で MTAppAssetFields を利用するときの注意点(コンテンツデータ編集画面編)

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

コンテンツデータ編集画面で、MTAppJSONTable を利用する場合、下記のようにして cbAfterBuildcbAfterAdd コールバックを指定して適用します。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 について

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

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

MTAppjQuery の詳細を見る

MTAppjQuery