可视化html在线编辑器

开发目的

为了在运营活动中开发活动页面以及落地页，特此开发了html生成的器，用以节省运营活动页面的开发成本

目录 简介 页面布局简介 操作方式 元素插入 元素删除 元素更改位置 元素选择系统 事件 特殊组件使用方法 反馈元素（Toast, Dialog）的调用方法 注意事项 一. 页面布局简介 选中元素前 选中元素后 二. 操作方式 1. 元素插入 插入到根元素 右击左侧元素列表，展示菜单插入到Root，点击插入 插入到其他元素内部 先选中需要被插入的元素，再右击需要插入的元素，最后点击插入

注：只有后面有□的，才能被插入

快捷插入 当插入之后，默认会选中新添加的元素，用以编辑，但如果想要连续向一个节点插入元素，可在插入时，按住Alt键，再插入 2. 元素删除

双击左侧元素或者右侧树，选中元素到可编辑状态，点击删除节点

3. 元素更改位置 如图 4. 元素选择系统 选中模式 单击选中元素，再次单击打开编辑属性菜单 在选中元素的状态，按住Alt键,直接打开编辑样式菜单 取消选择 5. 事件

事件分两种：初始加载事件，绑定事件

初始加载事件： 双击Root元素到元素编辑模式 写入初始化执行的js(可绑定Toast，Dialog) 绑定事件： 双击选中View元素到元素编辑模式 填写触发事件后执行的js 6. 特殊组件使用方法

Swiper(滑动框)

插入滑动框 点击**+** 插入图片 注：保存后刷新才生效

Icon(图标)

插入Icon组件 打开 https://www.iconfont.cn/ -> 图标管理 -> 我的项目 -> 复制代码

3. 选中Icon组件到可编辑状态，输入复制的iconfont地址，点击上传，成功后下面会展示可用的图标，点击图标便可使用

注：iconfont网站中，最好新建一个自己的项目，更新图标库后，要重新生成地址，并上传

Form(表单)

插入表单组件，并填写表单属性 插入需要提交的元素，并填写其属性 插入提交按钮（必须是Form下一级子元素）

Dialog(弹窗)

插入dialog元素（默认展开状态） 插入子元素 给其中一个按钮绑定关闭函数，详见下 将展示属性置为关闭，防止挡住其他元素 7. 反馈元素（Toast, Dialog）的调用方法 Toast 在需要绑定事件的地方写入

toast.show("需要设置的文字"); 默认展示三秒后消失，若三秒内重复调用，则下一个取代前一个 Dialog 在需要绑定事件的地方写入

// 打开dialog dialog.show("dialog的id"); // 关闭dialog dialog.hide("dialog的id"); 例： 打开展示，复制id 按钮绑定click事件，以及dialog展示方法 按钮绑定click事件，以及dialog关闭方法 8. 注意事项 页面必须先保存再生成 生成完才能打开 上传图片之前必须先生成页面