GrapesJS自定义Trait重载编辑器后消失问题求助

核心问题原因 #

编辑器重载（React组件重渲染）时，新创建的GrapesJS实例没有重新注册自定义Block和Trait，导致加载保存的数据时，无法匹配到自定义定义，从而回退到默认的Block配置。

具体解决方案 #

1. 每次编辑器初始化都重新注册自定义内容

React函数组件重渲染会重新创建编辑器实例，所以必须在每次初始化流程中都执行自定义Block、Trait的注册逻辑，不能只注册一次。配合useEffect的清理函数销毁旧实例，避免内存泄漏：

import { useEffect, useRef } from 'react';
import grapesjs, { Editor } from 'grapesjs';

const GrapesJSEditor = ({ savedData }: { savedData: string }) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let editor: Editor | null = null;

    if (containerRef.current) {
      // 1. 初始化编辑器实例
      editor = grapesjs.init({
        container: containerRef.current,
        // 其他基础配置
        storageManager: false, // 自己处理数据存储时关闭内置存储
      });

      // 2. 注册自定义Trait（如果需要自定义类型）
      editor.TraitManager.addType('custom-button-trait', {
        createInput() {
          const input = document.createElement('input');
          input.type = 'text';
          input.placeholder = '输入自定义属性值';
          return input;
        },
        onEvent({ trait, event }) {
          trait.setValue((event.target as HTMLInputElement).value);
        },
        onUpdate({ trait, el }) {
          (el as HTMLInputElement).value = trait.getValue() || '';
        },
      });

      // 3. 注册自定义Button Block（覆盖默认的button block）
      editor.BlockManager.add('button', {
        label: '自定义按钮',
        content: '<button class="custom-btn">点击我</button>',
        traits: [
          {
            type: 'custom-button-trait',
            label: '自定义属性',
            name: 'custom-prop',
            default: '默认值',
          },
          // 按需保留/删除默认trait
          { type: 'id' },
          { type: 'title' },
        ],
        replace: true, // 强制替换同名的默认block
      });

      // 4. 加载保存的项目数据（必须在注册之后执行）
      if (savedData) {
        editor.loadProjectData(JSON.parse(savedData));
      }
    }

    // 清理函数：组件卸载/重渲染时销毁旧编辑器实例
    return () => {
      editor?.destroy();
    };
  }, [savedData]); // 依赖项包含外部传入的数据、配置等

  return <div ref={containerRef} style={{ height: '500px' }} />;
};

export default GrapesJSEditor;

2. 确保数据中元素的data-gjs-type匹配自定义Block ID

保存项目数据时，GrapesJS会给元素添加data-gjs-type属性，用来关联对应的Block定义。如果这个属性的值和你注册的自定义Block ID不匹配，编辑器会用默认Block处理。

• 比如你注册的Block ID是button，那么数据中按钮元素必须包含data-gjs-type="button"。

3. 避免全局注册，绑定到当前编辑器实例

不要用全局方式注册Block/Trait（比如直接调用grapesjs.BlockManager.add），必须通过当前创建的editor实例来注册，确保每个编辑器实例都能获取到自定义定义。

4. 严格遵循初始化顺序：先注册，再加载数据

必须先完成所有自定义Block、Trait的注册，再调用loadProjectData加载保存的数据。如果顺序反过来，编辑器加载数据时还没有自定义定义，就会 fallback 到默认配置。

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