GrapesJS自定义文档上传块问题：拖拽无显示且无法唤起资源管理器

问题背景 #

需求：创建可上传PDF、DOCX、Excel等非图片类文档的自定义Block。
已尝试如下代码，但将Block拖拽至画布后无任何显示，且无法唤起Asset Manager弹窗，期望实现与图片上传相同的交互效果。

gjs.AssetManager.addType('document', {
  view: {
    updateTarget(target) {
      if (target.get('type') == 'image') {
        this.model.set('tagName', 'a')
        target.set({
          type: 'document',
          tagName: 'a',
          href: this.model.get('src'),
          content: this.model.get('name') || 'Download Document'
        });
      }
    },
    getPreview() {
      const src = this.model.get('src');
      const name = this.model.get('name') || 'Document';
      return `<div>
                <a class="gjs-no-pointer" href="${src}" download="${name}">
                  ${name}
                </a>
              </div>`;
    },
    getInfo() {
      return `<div>${this.model.get('name') || 'Document'}</div>`;
    }
  },
  isType(value) {
    if (typeof value == 'string') {
      const valueParts = value.split('.');
      const ext = valueParts[valueParts.length - 1].toLowerCase();
      const validExtensions = ["pdf", "doc", "docx", "xls", "xlsx"];
      if (validExtensions.includes(ext)) {
        return { type: 'document', src: value };
      }
    }
  }
});
gjs.BlockManager.add('document-upload', {
  label: 'Document Upload',
  content: { type: 'document' },
  category: 'Basic',
  attributes: { class: 'fa fa-file' }
});

问题根源 #

你仅注册了AssetManager的文档类型和Block，但未定义GrapesJS所需的自定义组件（Model+View）。GrapesJS需要明确知道如何渲染document类型的组件，以及如何触发资产选择的交互逻辑。

修复方案 #

需要补充自定义组件的定义，同时调整AssetManager的逻辑以匹配组件交互：

// 1. 定义文档组件的Model和View
const docComponent = {
  model: {
    defaults: {
      type: 'document',
      tagName: 'a',
      href: '',
      download: '',
      content: '点击上传文档',
      traits: [
        {
          type: 'asset',
          name: 'src',
          label: '文档',
          assetType: 'document',
        },
      ],
    },
  },
  view: {
    init() {
      // 绑定点击事件唤起AssetManager（未上传文档时）
      this.listenTo(this.model, 'click', this.handleClick);
    },
    handleClick() {
      if (!this.model.get('href')) {
        this.editor.AssetManager.open({
          types: ['document'],
          onSelect: (asset) => {
            this.model.set({
              href: asset.get('src'),
              download: asset.get('name'),
              content: asset.get('name') || '下载文档',
            });
          },
        });
      }
    },
    render() {
      // 渲染组件内容
      const href = this.model.get('href');
      const content = href ? this.model.get('content') : '点击上传文档';
      this.el.innerHTML = `<a href="${href || '#'}" ${href ? 'download' : ''}>${content}</a>`;
      return this;
    },
  },
};

// 注册自定义组件
gjs.DomComponents.addType('document', docComponent);

// 2. 注册AssetManager的文档类型
gjs.AssetManager.addType('document', {
  view: {
    getPreview() {
      const src = this.model.get('src');
      const name = this.model.get('name') || 'Document';
      return `<div>
                <a class="gjs-no-pointer" href="${src}" download="${name}">
                  ${name}
                </a>
              </div>`;
    },
    getInfo() {
      return `<div>${this.model.get('name') || 'Document'}</div>`;
    },
    updateTarget(target) {
      // 直接更新document类型的组件
      target.set({
        href: this.model.get('src'),
        download: this.model.get('name'),
        content: this.model.get('name') || '下载文档',
      });
    },
  },
  isType(value) {
    if (typeof value === 'string') {
      const ext = value.split('.').pop().toLowerCase();
      const validExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx'];
      if (validExtensions.includes(ext)) {
        return { type: 'document', src: value };
      }
    }
  },
});

// 3. 注册Block
gjs.BlockManager.add('document-upload', {
  label: 'Document Upload',
  content: { type: 'document' },
  category: 'Basic',
  attributes: { class: 'fa fa-file' },
});

关键说明 #

• 自定义组件的View实现了点击唤起AssetManager的逻辑，未上传文档时显示占位提示，上传后显示下载链接
• AssetManager的updateTarget方法直接处理document类型组件，无需从image转换
• 组件添加了asset类型的trait，支持在右侧面板直接选择文档
• 确保Block的content指向正确的document组件类型

内容的提问来源于stack exchange，提问作者snehlata