如何修改react-email-editor加载空设计时的默认静态提示文本？

我太懂你这种需求了——想换掉那个默认的空状态提示，还要是静态不可编辑的，不能让用户把它当成设计内容改来改去。之前你试的那几种方法要么变成可编辑文本，要么被CORS卡脖子，确实挺闹心的。下面给你两个亲测有效的方案，应该能解决你的问题：

方案一：利用编辑器内置的空状态配置（最推荐） #

react-email-editor本质是封装了Unlayer编辑器，而Unlayer本身就支持自定义空状态的文本和样式，完全不用碰DOM或者CORS的问题。你只需要在渲染EmailEditor组件时，通过config属性传递emptyState配置项就行：

import EmailEditor from 'react-email-editor';

function MyEmailEditor() {
  return (
    <EmailEditor
      ref={editorRef}
      config={{
        emptyState: {
          text: "这里还没有内容，从右侧拖拽组件开始设计吧😊",
          style: {
            color: "#999",
            fontSize: "16px",
            textAlign: "center",
            padding: "40px 20px"
            // 还可以自定义更多样式，比如字体、行高、背景色等
          }
        }
      }}
      // 其他你已有的配置项...
    />
  );
}

这个配置会直接替换默认的提示文本，而且是编辑器内置的静态提示，不会变成可编辑的内容，完美符合你的需求。

方案二：在React组件层做条件渲染占位符 #

如果上面的内置配置因为react-email-editor版本过旧不生效，那可以换个思路：在编辑器容器外面加一个自定义的静态提示，初始时显示，当编辑器有内容或者用户开始操作时自动隐藏。

具体步骤和代码示例如下：

import { useState, useRef } from 'react';
import EmailEditor from 'react-email-editor';

function MyEmailEditor() {
  const [isEmptyDesign, setIsEmptyDesign] = useState(true);
  const editorRef = useRef(null);

  const handleReady = () => {
    // 编辑器加载完成后，监听设计变化事件
    editorRef.current.editor.subscribe('design:updated', () => {
      // 检查当前设计是否有内容
      const hasContent = Object.keys(editorRef.current.editor.getDesign()).length > 0;
      setIsEmptyDesign(!hasContent);
    });
  };

  const handleDesignLoad = (design) => {
    // 加载外部设计时，判断是否为空
    setIsEmptyDesign(Object.keys(design).length === 0);
  };

  return (
    <div style={{ position: 'relative', width: '100%', height: '600px' }}>
      {/* 自定义静态提示层，覆盖在编辑器上方 */}
      {isEmptyDesign && (
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: '#fff',
          zIndex: 10,
          pointerEvents: 'none' // 关键：让点击事件能穿透到下面的编辑器
        }}>
          <p style={{ color: '#999', fontSize: '16px', margin: 0 }}>这里还没有内容，从右侧拖拽组件开始设计吧😊</p>
        </div>
      )}

      <EmailEditor
        ref={editorRef}
        onReady={handleReady}
        onDesignLoad={handleDesignLoad}
        // 其他你已有的配置项...
      />
    </div>
  );
}

这个方法完全不受编辑器iframe的限制，你可以自定义任何样式的提示（比如加图标、调整间距），pointerEvents: 'none'这个样式很重要，它能让用户直接点击下面的编辑器，不会被提示层挡住操作。

之前你用JSON加文本块的方法确实会变成可编辑内容，不是最优解。上面这两个方案里，方案一是官方支持的正规方式，最省心；方案二更灵活，适合需要高度自定义提示样式的场景，你可以根据自己的react-email-editor版本选合适的方法。

内容来源于stack exchange