react-email-editor

环境要求

• 一个已有的 React 项目（具备 React 构建流程，README 说明需嵌入自己的 React build 中）
• 已安装 Node.js 与 npm（用于执行 npm install）
• 示例代码使用 react-dom/client 的 createRoot，建议 React 18 及以上
• 项目中可修改的入口文件（示例中使用 id 为 app 的 DOM 节点）

安装与启动步骤

1. 1安装编辑器组件

   在项目根目录执行 npm 安装命令，把 react-email-editor 加入 dependencies，安装后即可在代码中引入。

   npm install react-email-editor --save

   复制

2. 2引入组件与类型

   从 react-email-editor 默认导出 EmailEditor 组件，并按需引入 EditorRef、EmailEditorProps 两个类型。

   import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';

   复制

3. 3创建编辑器引用

   用 useRef 持有 EditorRef，通过 emailEditorRef.current?.editor 拿到 unlayer 实例来调用导出与加载方法。

   const emailEditorRef = useRef(null);
   const unlayer = emailEditorRef.current?.editor;

   复制

4. 4编写导出 HTML 方法

   调用 unlayer.exportHtml 回调，从返回对象中取出 design 与 html，这里用 console.log 打印导出结果。

   const exportHtml = () => {
     const unlayer = emailEditorRef.current?.editor;
     unlayer?.exportHtml((data) => {
       const { design, html } = data;
       console.log('exportHtml', html);
     });
   };

   复制

5. 5渲染编辑器组件

   在 JSX 中挂载 EmailEditor，传入 ref 与 onReady；onReady 里可调用 unlayer.loadDesign 载入已有模板 JSON。

   复制

6. 6挂载渲染应用

   使用 createRoot 把 App 渲染到页面上 id 为 app 的节点，运行项目后即可看到拖拽式邮件编辑器。

   createRoot(document.getElementById('app')!).render();

   复制

关键配置

如何确认成功

运行项目后页面渲染出拖拽式邮件编辑器，点击 Export HTML 按钮，浏览器控制台打印出导出的邮件 HTML。

常见问题

注意事项

• README 明确说明该组件需安装到 NPM 并包含在你自己的 React 构建流程中使用，不是独立可运行的完整应用。
• 示例代码使用了 react-dom/client 的 createRoot，属于 React 18 的写法，低版本 React 需自行改写挂载方式。
• README 未给出 Unlayer 账号、API Key 或服务端相关配置说明，如有需要请参考官网 unlayer.com。