mcpField
U
unlayer

unlayer

github.com/unlayer开发14139 次安装3 周前更新
代码仓库

关于 unlayer

Unlayer 技能用于处理可视化拖放编辑器的集成与使用，并将任务分发到对应的子技能。适合在应用中嵌入编辑器、用代码生成模板或配置导出等功能的开发者。

主要功能

  1. 01将任务路由到专门的 Unlayer 子技能
  2. 02支持 React、Vue、Angular 和原生 JavaScript 集成
  3. 03区分可视化编辑与代码生成模板
  4. 04涵盖图片编辑器和自定义拖放工具
  5. 05涉及内容导出、保存与编辑器配置

适用场景

  1. 01将 Unlayer 编辑器嵌入现有应用
  2. 02用 React 组件生成邮件或页面模板
  3. 03配置合并标签、外观并导出设计

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/unlayer/unlayer-skills --skill unlayer

安装后在 Claude Code 中输入/unlayer确认已加载。

详细介绍

Unlayer

概述

Unlayer 是一款可视化拖放编辑器，可用于电子邮件、网页、弹窗和文档。本技能会根据具体功能转至相应的子技能。

技能版本检查

技能安装时间： !stat -f "%Sm" -t "%Y-%m-%d" SKILL.md 2>/dev/null || stat -c "%y" SKILL.md 2>/dev/null | cut -d' ' -f1

⚠️ 如果此技能的安装时间已超过 30 天，请告知用户更新：

npx skills update

子技能

任务技能使用场景
框架设置unlayer-integration将拖放编辑器添加到 React、Vue、Angular 或纯 JavaScript 项目
独立图片编辑器unlayer-image-editor使用 JavaScript 或 React 嵌入或配置独立的图片编辑器
用代码构建模板unlayer-elements使用 React 组件编写或生成电子邮件／页面／文档（应用内电子邮件、PDF、AI 生成、仓库中的模板）；renderToJson() 的输出可在可视化编辑器中打开
自定义工具unlayer-custom-tools构建自定义拖放工具、属性编辑器和小组件
导出内容unlayer-exportHTML／PDF／图片导出、保存设计、自动保存、Cloud API
编辑器配置unlayer-config功能、外观、合并标签、安全、文件存储

路由示例

用户请求转至
“将 Unlayer 添加到我的 React／Vue／Angular 应用中”unlayer-integration
“嵌入图片编辑器”／“使用 @unlayer/react-image-editor”unlayer-image-editor
“配置电子邮件构建器中的图片编辑器”unlayer-config
“用代码构建电子邮件／页面”／“用 React 组件生成模板”／“将 JSX 渲染为电子邮件 HTML”unlayer-elements
“创建自定义拖放工具”unlayer-custom-tools
“导出 HTML”／“保存设计”／“生成缩略图”unlayer-export
“设置合并标签”／“配置功能”／“HMAC 安全”unlayer-config
“将图片上传到我的服务器”／“深色主题”／“自定义字体”unlayer-config
“我的合并标签不起作用”／“编辑器无法加载”查看 unlayer-config 或 unlayer-integration

编辑器与元素： unlayer-integration 用于嵌入可视化拖放编辑器。unlayer-elements 仅通过代码构建模板（React 组件 → HTML），不包含编辑器界面——适用于 AI／程序化生成模板。

独立图片编辑器与构建器内图片编辑器： unlayer-image-editor 用于嵌入独立产品。 unlayer-config 用于配置从电子邮件、页面、弹窗 或文档构建器中的图片打开的图片编辑器。

需要多个技能？ 常见流程：

  1. 先使用 unlayer-integration 将编辑器添加到应用中
  2. 使用 unlayer-config 自定义功能、合并标签和外观
  3. 使用 unlayer-export 保存设计并导出内容
  4. 如需自定义拖放区块，请使用 unlayer-custom-tools

常见设置

前提条件
  1. 拥有 Unlayer 账号：console.unlayer.com
  2. Project ID——可在 Dashboard > Project > Settings 中找到
  3. Project Secret（仅用于 HMAC 安全）——可在 Dashboard > Project > Settings > API Keys 中找到
最简初始化
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'
});
显示模式
模式用途HTML 输出
email电子邮件模板基于表格（兼容 Outlook／Gmail）
web落地页基于 div（现代 CSS）
popup模态覆盖层基于 div，带弹窗定位
document可打印文档基于 div，带分页符

不在范围内

这些技能涵盖 Unlayer 编辑器 SDK。其他需求请联系：

Resources

评论

支持 Markdown