回答

主要是editor.DomComponents.addType自定义一个组件，然后在组件init的时候，调用fetch从后端url获取数据，然后再调用 model.set('content', data.content);与model.components(data.content)更新组件内容，示例代码如下：

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  height: '100%',
  width: 'auto',
  plugins: ['gjs-preset-webpage'],
  storageManager: false,
  blockManager: {
    blocks: [
      {
        id: 'form-new',
        label: '<b>Form New</b>',
        attributes: { class: 'gjs-block-form-new' },
        content: {
          type: 'form-new',
          content: 'Loading...' // 一个初始的内容，ajax 加载完成将被更新
        },
      },
    ],
  }
});

editor.DomComponents.addType('form-new', {
  isComponent: el => el.tagName === 'FORM' && el.getAttribute('data-form-type') === 'new',

  model: {
    defaults: {
      tagName: 'form',
      traits: [], // 移除原始 traits
      name: 'Form New'
    },

    init() {
      this.fetchDataFromBackend();
    },

    fetchDataFromBackend() {
      // 模型引用
      const model = this;

      // AJAX 请求获取数据
      fetch('后端url地址') // 请替换为您的后台接口地址
        .then(response => {
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.json();
        })
        .then(data => {
          if (data.content) {
            
            // 更新组件内容
            model.set('content', data.content);
            model.components(data.content);
          }
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
  }
});