@meituan-nocode/nocode-design-mode-sandbox-script
v0.1.0
Published
NoCode Design Mode Sandbox Script
Keywords
Readme
NoCode Design Mode Sandbox Script
这个包提供了一个沙箱脚本，用于在 iframe 中注入设计模式功能。
功能
- 通过 Penpal 与父窗口通信
- DOM 元素操作和查询
- 样式管理
- 拖拽功能
- 文本编辑
- 主题切换
构建
# 开发环境构建
pnpm run build:dev
# 测试环境构建
pnpm run build:test
# 预发布环境构建
pnpm run build:pre
# 生产环境构建
pnpm run build:prod上传到 CDN
# 上传到开发环境
pnpm run upload:dev
# 上传到测试环境
pnpm run upload:test
# 上传到预发布环境
pnpm run upload:pre
# 上传到生产环境
pnpm run upload:prod使用方式
在测试应用中使用
在 HTML 的 <head> 标签中引入脚本：
<head>
<script src="../nocode-design-mode-sandbox-script/dist/sandbox-script.js"></script>
</head>在生产环境中使用
从 CDN 引入：
<head>
<!-- 开发环境 -->
<script src="https://s3plus.meituan.net/nocode-external/artwork/dev/sandbox-script.js"></script>
<!-- 测试环境 -->
<script src="https://s3plus.meituan.net/nocode-external/artwork/test/sandbox-script.js"></script>
<!-- 生产环境 -->
<script src="https://s3plus.meituan.net/nocode-external/artwork/sandbox-script.js"></script>
</head>架构说明
目录结构
nocode-design-mode-sandbox-script/
├── api/ # API 方法
│ ├── dom.ts # DOM 处理
│ ├── elements/ # 元素操作
│ ├── events/ # 事件处理
│ ├── style/ # 样式管理
│ └── theme/ # 主题管理
├── constants/ # 常量定义
├── helpers/ # 辅助函数
├── types/ # TypeScript 类型定义
├── index.ts # 入口文件
└── webpack.config.js通信机制
脚本使用 Penpal 库与父窗口（Design Mode Designer）进行通信：
- 子窗口暴露的方法：在
api/index.ts中的preloadMethods定义 - 父窗口方法调用：通过
penpalParent对象调用父窗口方法
主要功能模块
- DOM 处理：构建 Layer Tree，处理 DOM 变化
- 元素操作：查询、插入、删除、移动元素
- 样式管理：CSS 样式的读取和更新
- 拖拽功能：元素拖拽和位置调整
- 文本编辑：内联文本编辑
- 主题管理：明暗主题切换
开发说明
依赖说明
penpal: 用于 iframe 跨窗口通信lodash: 工具函数库nanoid: 生成唯一 IDcss-tree: CSS 解析和操作
类型定义
所有类型定义在 types/index.ts 中，包括：
DomElement: DOM 元素信息LayerNode: Layer Tree 节点ActionElement: 操作元素StyleChange: 样式变更- 等等
常量定义
在 constants/index.ts 中定义了：
EditorAttributes: 编辑器使用的 data 属性DOM_IGNORE_TAGS: 需要忽略的 DOM 标签INLINE_ONLY_CONTAINERS: 只能包含内联元素的容器
注意事项
- 脚本必须在页面加载前引入（在
<head>中） - 脚本会自动初始化并与父窗口建立连接
- 确保父窗口也使用了 Penpal 进行通信
- 上传到 CDN 后需要刷新 CDN 缓存