Ant Design Landing 编辑器使用完全指南

前言

Ant Design Landing 是一款强大的页面构建工具，其内置的编辑器提供了可视化编辑能力，让开发者能够快速搭建精美的落地页。本文将全面解析编辑器的各项功能，帮助开发者高效使用这一工具。

编辑器整体布局

编辑器界面分为四个主要功能区块，每个区块承担不同的编辑职责：

1. 顶部操作区块

• 保存功能：将当前编辑内容保存至云端（注意：数据库流量有限，建议完成阶段性编辑后再保存）
• 预览功能：实时查看编辑效果
• 代码下载：导出当前页面的完整代码包
• 数据编辑：支持JSON格式数据的导入导出
• 页面管理：可创建新页面或切换已有页面

2. 添加内容区块

• 模块选择：提供丰富的预设模块
• 编辑加密：为编辑器设置访问密码
• 学习资源：包含实例展示和视频教程

3. 内容编辑区块

• 响应式切换：支持PC端和移动端视图切换
• 核心编辑区：页面内容的主要编辑区域

4. 样式编辑区块

• 样式管理：提供可视化样式调整
• 高级功能：包括整屏滚动和锚点设置

详细功能解析

元素编辑功能条

当选中页面元素时，右上角会出现多功能编辑条：

1. 元素选择器：

   • 显示当前选中元素的ID
   • 下拉菜单展示元素层级结构

2. 七种编辑图标：

   • 文字编辑（T图标）：修改文本内容
   • 图片替换（图片图标）：更改图片资源
   • 特殊文字编辑（Ty图标）：针对rc-texty组件的文本编辑
   • 图标编辑（Icon图标）：设置Ant Design图标类型
   • 链接编辑（链接图标）：修改超链接
   • 导航编辑（菜单图标）：调整导航菜单
   • 视频编辑（摄像机图标）：修改视频地址

区块管理功能

1. 切换功能条：

   • 适用于多图Banner和多模块场景
   • 支持分屏切换、添加、删除和排序

2. 移动功能条：

   • 上下移动区块位置
   • 删除整个区块

样式编辑区域

1. 子级内容编辑：

   • 基础编辑：添加/删除子元素（默认复制最后一条数据）
   • 高级编辑：支持选择添加特定类型的子元素

2. Props编辑：

   • 针对组件元素的属性调整
   • 例如：调整Ant Design Col组件的栅格大小

3. 可视化样式编辑：

   • 提供常用样式调整选项
   • 支持直接编写CSS代码（需符合规范）

4. 高级功能：

   • 页面锚点设置
   • 整屏滚动效果

数据管理技巧

1. 数据导入导出：

   • 通过顶部菜单的扳手图标访问
   • 导出为JSON格式保存编辑数据
   • 粘贴JSON数据实现快速导入

2. 多设备同步：

   • 使用"更新为线上数据"功能同步不同设备间的编辑内容

最佳实践建议

1. 编辑策略：

   • 先完成整体布局再调整细节
   • 合理使用区块模板提高效率

2. 样式管理：

   • 优先使用可视化编辑
   • 复杂样式通过代码编辑实现

3. 版本控制：

   • 定期导出JSON备份
   • 重要修改前创建新页面版本

通过掌握这些功能和使用技巧，开发者可以充分发挥Ant Design Landing编辑器的强大能力，快速构建专业级的落地页面。