react-email-editor自定义工具：移除默认图片工具Magic Image功能遇阻

一、移除默认Image工具的Magic Image功能 #

之前注入CSS没生效，多半是选择器权重不够或者样式被组件内部隔离了，试试用组件自带的customCSS prop注入更精准的样式：

import EmailEditor from 'react-email-editor';

function MyEmailEditor() {
  return (
    <EmailEditor
      customCSS={`
        /* 隐藏Magic Image的编辑面板 */
        .ue-panel[data-panel="image.magic_image"] {
          display: none !important;
        }
        /* 同时隐藏工具栏里的Magic Image触发按钮 */
        .ue-toolbar-button[data-action="magic_image"] {
          display: none !important;
        }
      `}
      // 其他必要props
    />
  );
}

用组件内置的customCSS注入样式，比全局CSS更靠谱，因为它会直接作用于编辑器内部上下文；用属性选择器定位元素，比单纯类名更精准，能避免样式冲突。

二、禁用默认Image工具并创建自定义工具 #

不用依赖全局unlayer对象，直接通过react-email-editor的config prop就能完成配置：

import EmailEditor from 'react-email-editor';

// 编辑器配置
const customEditorConfig = {
  tools: {
    // 禁用默认的Image工具
    image: {
      enabled: false
    },
    // 添加完全自定义的图片工具
    custom_image: {
      title: '自定义图片',
      // 替换成你需要的图标SVG代码，或者用base64图标
      icon: '<svg viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><circle cx="12" cy="12" r="4"/></svg>',
      renderer: {
        // 预览时的渲染组件
        Viewer: ({ data }) => (
          <img src={data.src} alt={data.alt || ''} style={{ width: '100%', height: 'auto' }} />
        ),
        // 编辑时的操作组件
        Editor: ({ data, onChange }) => (
          <div style={{ padding: '10px' }}>
            <input
              type="text"
              placeholder="输入图片URL"
              value={data.src || ''}
              onChange={(e) => onChange({ ...data, src: e.target.value })}
              style={{ width: '100%', marginBottom: '8px' }}
            />
            <input
              type="text"
              placeholder="图片描述"
              value={data.alt || ''}
              onChange={(e) => onChange({ ...data, alt: e.target.value })}
              style={{ width: '100%' }}
            />
            // 这里只保留你需要的功能，完全不用加Magic Image相关内容
          </div>
        ),
        // 工具的默认数据
        defaultData: {
          src: '',
          alt: ''
        }
      }
    }
  },
  // 把自定义工具加入工具栏
  toolbar: {
    sections: [
      {
        title: '基础工具',
        tools: ['custom_image', 'text', 'button'] // 按需添加其他工具
      }
    ]
  }
};

function MyEmailEditor() {
  return <EmailEditor config={customEditorConfig} />;
}

通过config prop直接定义工具，完全不需要全局unlayer对象；自定义工具的Viewer负责展示效果，Editor负责编辑界面，你可以完全按照需求定制功能，自然就不会有默认的Magic Image选项。

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