使用块编辑器做网站

项目起因

公司需要做内容管理系统，原来使用的是WordPress，简单的需求使用WordPress+插件也能满足需求，可是后面领导的需求越来越天马行空，甚至还想把官网做成ToB的平台，至此明白了领导提的需求能不用开源系统做就不用开源系统做.

界面设计

界面由3部分组成：1、组件&属性区域；设计区域;2、后台

组件

基础组件

引用组件

可在画布区域右键点击保存为引用组件，再页面的不同位置引用组件展示的内容一样。

• 保存操作
• 保存后

设计区域

提供Header和Main，Header为fixed定位 提供行列布局 列操作功能

• 可新建删除列
• 拖动修改列宽度占比

后台功能

• 提供页面和站点配置

• 扩展组件如果需要在后台查看数据，可配置后台组件，查询数据
• 插件数据

开发&组件扩展

• 扩展组件只需要配置一个对象即可完成一个扩展组件

export interface Config {
    key: string // 唯一
    icon?: string // 组件图标
    sort?: number // 组件排序位置值
    name?: string // 组件名称
    group?: string // 组件所在的组
    admin?: Component // 组件在后台插件中显示的界面
    setting?: Component // 组件属性配置面板
    component?: Component // 组件渲染配置
    contextmenu?: Component // 设计区域的右键扩展菜单
    invisible?: boolean // 在左侧面板中是否可见
    activeKind?: 'box' | 'handle' // 选中组件的触发类型 box->点击组件即可选中；handle->点击组件操作图标才可选中
    handleIcon?: any // 默认 EditPen // 组件操作图标
    handlePosition?: 'leftTop' | 'top' | 'rightTop' // 图标位置默认 rightTop
    indicatorColor?: string // 组件选中或hover的边框颜色
    resizeable?: boolean// 是否可调整宽度 默认true 
    isBox?: boolean // 是否为容器 默认false
    builder?: (elem: Elem, params?: any) => any // 新建函数
    resizeHook?: (elemList: any[], index: number, width: number) => void, // 调整宽度的钩子
    pastHook?: (elem: any, clipboardElem: any) => { elemList: any[], index: number } // 粘贴钩子
}

• 示例

index.ts
export default <Config>{
    group: groupBase,
    key: 'z-video',
    name: '视频',
    component: VideoView,
    setting: VideoSetting,
    icon: 'VideoCameraFilled',
    builder: (elem: Elem): Video => ({...elem})
}

特色组件

• 表格

预览地址

http://101.37.17.58/dospectrum/web/index.html#/sign 账号:dos 密码:dos

开源

代码优化后开源