Back to Details

unlayer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Unlayer

Unlayer

Overview

概述

Unlayer is a visual drag-and-drop editor for emails, web pages, popups, and documents. This skill routes to feature-specific sub-skills.
Unlayer是一款用于电子邮件、网页、弹窗和文档的可视化拖拽编辑器。本技能可引导至各功能对应的子技能。

Skill Version Check

技能版本检查

Skill installed on: !
stat -f "%Sm" -t "%Y-%m-%d" SKILL.md 2>/dev/null || stat -c "%y" SKILL.md 2>/dev/null | cut -d' ' -f1
⚠️ If this skill was installed more than 30 days ago, tell the user to update it:
bash
npx skills update
技能安装时间： !
stat -f "%Sm" -t "%Y-%m-%d" SKILL.md 2>/dev/null || stat -c "%y" SKILL.md 2>/dev/null | cut -d' ' -f1
⚠️ 如果该技能安装已超过30天，请告知用户进行更新：
bash
npx skills update

Sub-Skills

子技能

TaskSkillUse When
Framework setup
unlayer-integration
Adding Unlayer to React, Vue, Angular, or plain JavaScript
Custom tools
unlayer-custom-tools
Building custom drag-and-drop tools, property editors, widgets
Exporting content
unlayer-export
HTML/PDF/Image export, saving designs, auto-save, Cloud API
Editor configuration
unlayer-config
Features, appearance, merge tags, security, file storage
任务技能使用场景
框架集成配置
unlayer-integration
将Unlayer添加至React、Vue、Angular或纯JavaScript项目中
自定义工具
unlayer-custom-tools
构建自定义拖拽工具、属性编辑器、小组件
内容导出
unlayer-export
HTML/PDF/图片导出、设计保存、自动保存、Cloud API
编辑器配置
unlayer-config
功能设置、外观定制、合并标签、安全配置、文件存储

Routing Examples

路由示例

User SaysRoute To
"Add Unlayer to my React/Vue/Angular app"
unlayer-integration
"Create a custom drag-and-drop tool"
unlayer-custom-tools
"Export HTML" / "Save the design" / "Generate thumbnail"
unlayer-export
"Set up merge tags" / "Configure features" / "HMAC security"
unlayer-config
"Upload images to my server" / "Dark theme" / "Custom fonts"
unlayer-config
"My merge tags aren't working" / "Editor won't load"Check 
unlayer-config
or 
unlayer-integration
Multiple skills needed? Common flow:
  1. Start with 
    unlayer-integration
    to add the editor to your app
  2. Use 
    unlayer-config
    to customize features, merge tags, appearance
  3. Use 
    unlayer-export
    to save designs and export content
  4. Use 
    unlayer-custom-tools
    if you need custom drag-and-drop blocks
用户需求引导至
"将Unlayer添加到我的React/Vue/Angular项目中"
unlayer-integration
"创建自定义拖拽工具"
unlayer-custom-tools
"导出HTML" / "保存设计" / "生成缩略图"
unlayer-export
"设置合并标签" / "配置功能" / "HMAC安全设置"
unlayer-config
"将图片上传至我的服务器" / "深色主题" / "自定义字体"
unlayer-config
"我的合并标签无法生效" / "编辑器无法加载"检查
unlayer-config
或
unlayer-integration
需要使用多个技能？ 常见流程：
  1. 先使用
    unlayer-integration
    将编辑器添加至你的项目
  2. 使用
    unlayer-config
    自定义功能、合并标签和外观
  3. 使用
    unlayer-export
    保存设计并导出内容
  4. 若需自定义拖拽模块，使用
    unlayer-custom-tools

Common Setup

通用配置

Prerequisites

前置条件

  1. An Unlayer account at console.unlayer.com
  2. A Project ID — find it in Dashboard > Project > Settings
  3. A Project Secret (for HMAC security only) — find it in Dashboard > Project > Settings > API Keys
  1. 拥有Unlayer账号：console.unlayer.com
  2. 项目ID — 可在控制台 > 项目 > 设置中找到
  3. 项目密钥（仅用于HMAC安全配置）— 可在控制台 > 项目 > 设置 > API密钥中找到

Minimal Init

最小化初始化

javascript
unlayer.init({
  id: 'editor-container',        // HTML div ID where editor mounts
  projectId: YOUR_PROJECT_ID,     // From Dashboard > Project > Settings
  displayMode: 'email',           // 'email' | 'web' | 'popup' | 'document'
});
javascript
unlayer.init({
  id: 'editor-container',        // HTML div ID where editor mounts
  projectId: YOUR_PROJECT_ID,     // From Dashboard > Project > Settings
  displayMode: 'email',           // 'email' | 'web' | 'popup' | 'document'
});

Display Modes

显示模式

ModeUse ForHTML Output
email
Email templatesTable-based (Outlook/Gmail safe)
web
Landing pagesDiv-based (modern CSS)
popup
Modal overlaysDiv-based with popup positioning
document
Print-ready docsDiv-based with page breaks
模式适用场景HTML输出
email
电子邮件模板基于表格（兼容Outlook/Gmail）
web
落地页基于Div（现代CSS）
popup
模态弹窗基于Div并包含弹窗定位
document
可打印文档基于Div并包含分页符

Out of Scope

不涵盖范围

These skills cover the Unlayer editor SDK. For other needs:
  • Billing/account issues: console.unlayer.com or support@unlayer.com
  • Bug reports: support@unlayer.com
  • Feature requests: support@unlayer.com
本技能仅覆盖Unlayer编辑器SDK。其他需求请参考：
  • 账单/账号问题：console.unlayer.com 或 support@unlayer.com
  • Bug反馈：support@unlayer.com
  • 功能请求：support@unlayer.com

Resources

资源