# 集成 Unlayer 编辑器 ## 概述 Unlayer 提供了 React、Vue 和 Angular 的官方包装器，以及纯 JavaScript 嵌入。所有包装器共享相同的底层 API — 只是编辑器访问模式不同。 ## 哪个框架？框架|套餐 |安装 |编辑访问权限 ---|---|---|--- 反应 | `反应电子邮件编辑器` | `npm 我反应电子邮件编辑器` | `useRef` → `ref.current?.editor` 视图 | `vue-电子邮件编辑器` | `npm 我 vue-email-editor` | `这个.$refs.emailEditor.editor` 角度| `角度电子邮件编辑器` | `npm i 角度电子邮件编辑器` | `@ViewChild` → `this.emailEditor.editor` 普通 JS | CDN 脚本标签 | `<脚本>` 嵌入 |全局“unlayer”对象 > ⚠️ **在安装任何 Unlayer 软件包** 之前，请验证 npm 上是否存在该版本： > > > npm view react-email-editor version # 查看最新发布的版本 > > > 切勿固定未验证的版本号。使用不带版本的“npm install --save”来获取最新版本，或运行“npm view versions --json”来查看所有可用版本。 ** ** ## React（完整的工作示例） npm 安装react-email-editor --save 从 'react' 导入 React, { useRef, useState }; 从 'react-email-editor' 导入 EmailEditor, { EditorRef, EmailEditorProps }; const EmailBuilder = () => { const emailEditorRef = useRef(null); const [保存，setSaving] = useState(false); // 保存设计 JSON + 将 HTML 导出到后端常量handleSave = () => { const unlayer = emailEditorRef.current?.editor; if (!unlayer) 返回；设置保存（真）； unlayer.exportHtml（异步（数据）=> { 尝试{ const 响应 = 等待 fetch('/api/templates', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, 正文：JSON.stringify({ design: data.design, // 保存它——稍后需要编辑 html: data.html, // 渲染的 HTML 输出 }), }); if (!response.ok) throw new Error('保存失败'); console.log('保存成功'); } 捕获（错误）{ console.error('保存错误：', err); }最后{ 设置保存（假）； } }); }; // 当编辑器准备好时加载保存的设计 const onReady: EmailEditorProps['onReady'] = async (unlayer) => { 尝试{ const 响应 = 等待 fetch('/api/templates/123'); 如果（响应.ok）{ const 保存=等待response.json(); unlayer.loadDesign(保存的.design); // 传递保存的设计JSON } } 捕获（错误）{ console.log('没有保存设计，开始为空白'); } }; 返回（

<按钮 onClick={handleSave} 禁用={保存}> {节省？ '保存...' : '保存'} <电子邮件编辑器参考={emailEditorRef} onReady={onReady} 选项={{ projectId: 123456, // 仪表板 > 项目 > 设置显示模式：'电子邮件'， }} />

）； }; 导出默认的EmailBuilder； **你的后端应该接受并返回：** // POST /api/templates — 保存 { 设计：对象，html：字符串 } // GET /api/templates/:id — 加载 { 设计：对象，html：字符串，updatedAt：字符串 } **反应道具：** 道具|类型 |默认 |描述 ---|---|---|--- `选项` | `对象` | `{}` |所有 `unlayer.init()` 选项（projectId、displayMode 等） `工具` | `对象` | `{}` |每个工具配置 `外观` | `对象` | `{}` |主题和面板设置 `onReady` | `功能` | — |当编辑器准备好时调用（接收`unlayer`实例） `onLoad` | `功能` | — | iframe 加载时调用（准备好之前） `风格` | `对象` | `{}` |容器内联样式 `最小高度` | `字符串` | `'500px'` |最小编辑器高度 > 文档： GitHub： ** ** ## Vue（完整的工作示例） npm 安装 vue-email-editor --save <模板>

<脚本> 从 'vue-email-editor' 导入 { EmailEditor }；导出默认值{ 组件：{电子邮件编辑器}，数据（）{ 返回 { 保存： false }; }, 方法：{ 异步编辑器加载() { 尝试{ const 响应 = 等待 fetch('/api/templates/123'); 如果（响应.ok）{ const 保存=等待response.json(); this.$refs.emailEditor.editor.loadDesign(saved.design); } } 捕获（错误）{ console.log('没有保存设计，开始为空白'); } }, 处理保存（）{ this. saving = true; this.$refs.emailEditor.editor.exportHtml(异步（数据）=> { 尝试{ 等待 fetch('/api/templates', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ design: data.design, html: data.html }), }); } 捕获（错误）{ console.error('保存错误：', err); }最后{ this. saving = false; } }); }, }, }; **道具：** `minHeight`、`options`、`tools`、`appearance`、`locale`、`projectId`。 > 文档： GitHub： ** ** ## Angular（完整的工作示例） npm 安装 Angular-email-editor --save **模块（app.module.ts）：** 从“角度电子邮件编辑器”导入{EmailEditorModule}； @NgModule({ 导入: [EmailEditorModule] }) 导出类 AppModule {} **组件（app.component.ts）：** 从 '@angular/core' 导入 { Component, ViewChild }; 从“角度电子邮件编辑器”导入{EmailEditorComponent}； @组件（{ 选择器：'应用程序根'， templateUrl: './app.component.html', }) 导出类 AppComponent { @ViewChild（电子邮件编辑器组件）私人电子邮件编辑器：EmailEditorComponent；保存=假；异步编辑器加载() { 尝试{ const 响应 = 等待 fetch('/api/templates/123'); 如果（响应.ok）{ const 保存=等待response.json(); this.emailEditor.editor.loadDesign(saved.design); } } 捕获（错误）{ console.log('没有保存设计'); } } 处理保存（）{ this. saving = true; this.emailEditor.editor.exportHtml(异步（数据）=> { 尝试{ 等待 fetch('/api/templates', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ design: data.design, html: data.html }), }); } 捕获（错误）{ console.error('保存错误：', err); }最后{ this. saving = false; } }); } } **模板（app.component.html）：**

<按钮（点击）=“handleSave（）”[禁用]=“保存”> {{ 保存？ '正在保存...' : '保存' }}

> 文档： ** ** ## 纯 JavaScript

<脚本> unlayer.init({ id: '编辑器容器', 项目编号：1234，显示模式：'电子邮件'， }); unlayer.addEventListener('编辑器：就绪', async function () { 尝试{ const 响应 = 等待 fetch('/api/templates/123'); 如果（响应.ok）{ const 保存=等待response.json(); unlayer.loadDesign(保存的.design); } } 捕获（错误）{ console.log('开始为空白'); } }); 函数句柄保存（）{ unlayer.exportHtml（异步函数（数据）{ 等待 fetch('/api/templates', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ design: data.design, html: data.html }), }); }); } > 文档： ** ** ## 多个编辑器实例使用`createEditor()`而不是`init()`： const editor1 = unlayer.createEditor({ id: 'email-editor', displayMode: 'email' }); const editor2 = unlayer.createEditor({ id: 'web-editor', displayMode: 'web' }); editor1.loadDesign(emailDesign); editor2.loadDesign(webDesign); ** ** ## 常见错误错误|修复 ---|--- 容器太小|最小**1024 像素宽 x 700 像素高**。编辑器填充其容器。准备好之前调用方法 |始终等待 `editor:ready` 事件或 `onReady` 回调对多个编辑器使用 `init()`使用`unlayer.createEditor()`代替缺少`projectId` |从“仪表板”>“项目”>“设置”获取只保存HTML，不设计JSON |始终保存**两者** — 设计 JSON 允许用户稍后编辑保存时无加载状态 |禁用保存按钮以防止重复保存固定不存在的包版本 |在固定之前运行“npm view version”进行验证。使用不带版本的“npm install --save”来获取最新版本。 ## 故障排除错误 |原因 |修复 ---|---|--- 编辑器显示空白区域 |容器 div 的高度为 0 |设置显式高度：`min-height: 700px` `editor:ready` 永远不会触发 |脚本未加载或“id”错误 |检查“id”是否与现有 div 匹配，检查网络选项卡中的 embed.js `ref.current?.editor` 未定义 |挂载前访问 |仅在`onReady`回调中使用设计无法加载 |格式错误的 JSON |验证 JSON，检查 `schemaVersion` 字段 ## 资源 * [安装指南]() * [反应组件]() * [Vue 组件]() * [角度组件]()

分层集成

包含技能