CMS系统编辑器低代码系统搭建(一)

107 阅读1分钟

功能清单:

  1. 页面创建,页面编辑
  2. 站点配置,包含站点标题,站点图标
  3. 密码修改
  4. 表单插件

已打包项目地址:gitee.com/woailvxy/xc…

体验地址:http://8.137.48.176/ 账号:xcms;密码xcms

页面设计功能参考wordpress插件elemator的设计并简化属性配置

设计区分为两栏:左侧栏和画布区域

左侧栏包含:组件面板、属性配置面板

组件分为普通组件和引用组件

普通组件截图:

引用组件截图:

主要功能包含:页面设计、组件、属性配置

所有组件都放在盒子中盒子内部使用flex布局,在左侧面板中可以对flex的属性调整,在设计区域可以拖动调整宽度

设计区域使用iframe加载,使用iframe加载可以完全做到样式隔离,后台和设计区域可以放心使用不同的UI框架,主窗口和iframe之间的通信方式使用的 CustomEvent 核心代码

export const dispatch = (doc: Document, event: string, detail?: any) => { 
   doc.dispatchEvent(new CustomEvent(event, {detail}))
}

特殊组件介绍

文字组件:在画布中的每一个文字组件都是一个富文本编辑器包含常用的富文本编辑功能如下图

表格组件:可直接在单元格中进行编辑每个单元格都是一个富文本编辑器,可对单元格进行合并拆分及插入删除如下图

表单组件:添加表单容器后后台会自动创建一张对应的mysql表,并根据其中的字段创建对应的列,在预览界面可进行数据提交

提交后的数据