从零搭建一款PC页面编辑器PC-Dooring

徐小夕 等级 524 0 0

之前一直忙着调研lowcode平台和开发以下两个项目:

没有太多时间做PC端搭建化项目, 好在搭建平台很多原理都是通用的, 所以早在去年我就开发好了面向PC端的编辑器PC-Dooring, 虽然在设计上还有些不足(在后面的内容中会提到) , 但是基本模型已经实现, 接下来就和大家一起分享一下具体的实现.

为了保证文章整体的逻辑性和条理性, 我将可视化搭建平台的具体的实现划分为了以下几个部分:

  • PC编辑器效果展示
  • 整体技术架构
  • 可视化搭建技术实现方式
  • 编辑器核心思路
  • 编辑器架构模型
  • 如何开发标准物料组件
  • 编辑器后期规划

PC编辑器效果展示

从零搭建一款PC页面编辑器PC-Dooring

在上面的演示中, 组件库方式和H5-Dooring类似, 只不过组件库笔者采用了PC端专属的组件库antd, 所以我们可以将antd支持的任何组件集成进PC-Dooring.

整体技术架构

整体技术架构和H5-Dooring类非常相似, 也是遵循笔者的产品设计哲学—— 不要让用户思考. 降低一切拖拽复杂度, 采用智能网格的交互模式来实现(这种设计方式有一定的局限, 仅供大家参考, 当然也可以使用V6.Dooring的自由布局模式). 整体架构如下图所示:

从零搭建一款PC页面编辑器PC-Dooring

由上图我们可以看出编辑器主要分为如下几个部分:

  • 组件物料
  • 画布区
  • 属性编辑区
  • 功能辅助
  • 其他

目前组件物料主要实现了基础组件, 可视化组件媒体组件, 其他类的组件实现也类似, 技术整体实现我们会在下面介绍.

可视化搭建技术实现方式

从零搭建一款PC页面编辑器PC-Dooring

前端框架我们还是使用的React, 当然大家也可以使用Vue3.0, 原理都是相通的, 不同插件之间也提供了多框架的支持. 编辑器核心的一环就是组件拖拽, 这里笔者使用了社区比较强大且稳定的库react-dnd, 其拖拽分为两个部分, 一个是从组件区拖拽到画布区, 另一个是画布区内部组件的自由拖拽. 我们可以用原生H5的拖放API来实现第一部分的功能, 本质是将拖动源携带的数据传到画布制定区域, 目标源监听事件拿到携带的数据动态渲染出实际的组件. 过程如下:

从零搭建一款PC页面编辑器PC-Dooring

当然深入研究过react-dnd的朋友都知道, 以上两个功能通过react-dnd都可以实现, 大家可以参考它的官网react-dnd官网学习研究具体实现流程, 也可以直接参考PC-Dooring源码.

至于组件库, 我们可以采用任何我们熟悉的组件库, 比如antd, element, zant等, 组件物料需要遵循我们约定的DSL协议, 这里大家可以参考工业级协议标准odata规范. 有了一定的规范, 我们就可以包装标准的组件物料从而集成第三方组件库了.

至于功能辅助模块和状态管理, 我们可以采用如mobx, redux, dva等来实现, 最终目的就是让编辑器不同部分能相互关联, 实时更新组件状态, 以及数据回传能力.

编辑器核心思路

编辑器核心实现思路笔者之前也分析了几个现有方案, 发现字节魔方的思路很贴切, 这里附上一个原理图:

从零搭建一款PC页面编辑器PC-Dooring

核心就是通过编辑器产生的有效词法数据, 让渲染器能解析渲染成可用的HTML页面.

编辑器整体架构模型

编辑器整体架构模型主要是为了让大家全局的了解可视化编辑器的实现思路, 以及未来的规划方向, 笔者做了一个基本的草图, 如下:

从零搭建一款PC页面编辑器PC-Dooring

如何开发标准物料组件

开发标准组件物料需要遵循我们编辑器内部的数据协议和组件开发规范, 在PC-Dooring中开发组件主要由以下几部分组成:

  • 组件代码
  • schema定义
  • template定义

组件代码就是组件内部具体的实现, 如下案例:

import React, { memo } from 'react';
import { ITextConfig } from './schema';
import logo from '@/assets/text.png';
const Text = memo((props: ITextConfig & { isTpl: boolean }) => {
  const { align, text, fontSize, color, lineHeight, isTpl } = props;
  return (
    <>
      {isTpl ? (
        <div>
          <img src={logo} alt=""></img>
        </div>
      ) : (
        <div style={{ color, textAlign: align, fontSize, lineHeight }}>{text}</div>
      )}
    </>
  );
});
export default Text;

schema定义了组件的属性约束, 可编辑项类型以及默认值, 如下:

import {
  IColorConfigType,
  INumberConfigType,
  ISelectConfigType,
  ITextConfigType,
  TColorDefaultType,
  TNumberDefaultType,
  TSelectDefaultType,
  TTextDefaultType,
} from '@/components/FormComponents/types';

export type TTextSelectKeyType = 'left' | 'right' | 'center';
export type TTextEditData = Array<
  ITextConfigType | IColorConfigType | INumberConfigType | ISelectConfigType<TTextSelectKeyType>
>;
export interface ITextConfig {
  text: TTextDefaultType;
  color: TColorDefaultType;
  fontSize: TNumberDefaultType;
  align: TSelectDefaultType<TTextSelectKeyType>;
  lineHeight: TNumberDefaultType;
}

export interface ITextSchema {
  editData: TTextEditData;
  config: ITextConfig;
}
const Text: ITextSchema = {
  editData: [
    {
      key: 'text',
      name: '文字',
      type: 'Text',
    },
    {
      key: 'color',
      name: '标题颜色',
      type: 'Color',
    },
    {
      key: 'fontSize',
      name: '字体大小',
      type: 'Number',
    },
    {
      key: 'align',
      name: '对齐方式',
      type: 'Select',
      range: [
        {
          key: 'left',
          text: '左对齐',
        },
        {
          key: 'center',
          text: '居中对齐',
        },
        {
          key: 'right',
          text: '右对齐',
        },
      ],
    },
    {
      key: 'lineHeight',
      name: '行高',
      type: 'Number',
    },
  ],
  config: {
    text: '我是文本',
    color: 'rgba(60,60,60,1)',
    fontSize: 18,
    align: 'center',
    lineHeight: 2,
  },
};
export default Text;

template主要规定了组件在画布中展示的基本方式, 如下:

const template = {
  type: 'Text',
  h: 20,
  displayName: '文本组件',
};
export default template;

当然大家也可以扩展其定义或者将schematemplate合并. 只要一个组件符合了以上约定, 都可以被我们编辑器所消费.

编辑器后期规划

PC编辑器目前仍存在一些问题没有很好的解决, 比如布局方式的局限性导致必须横向扩展很多组件才能满足不同用户的个性化需求, 其次就是组件联动机制, 需要统一数据中心来管理, 后面会在H5-Dooring 中展示具体的实现方式, 大家感兴趣也可以实现一下.

目前PC-Dooring已经在github上以MIT协议完全开源, 如果大家感兴趣,也可以贡献你的一份力量, 帮助社区解决更多问题.

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!微信搜 “趣谈前端”,发现更多有趣的H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战.

收藏
评论区

相关推荐

从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统(https://juejin.im
前端进阶之从零到一实现单向 & 双向链表
前言 前端工程师对于算法和数据结构这块的知识的掌握程度,是进阶高级工程师的非常重要的标志之一,为了总结一下数据结构和算法方面的知识,笔者今天继续把链表这一块的知识补上,也作为自己知识体系的一个梳理,笔者早在去年就写过一篇关于使用javascript实现二叉树和二叉搜索树的文章,如果感兴趣或者想进阶高级的朋友们可以参考学习一下: JavaScript 中的二
从零开始刷力扣(一)——485:最大连续1的个数
分类:数组的遍历 题目描述: 给定一个二进制数组, 计算其中最大连续1的个数。 示例1: 输入: 1,1,0,1,1,1 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 思路 初始化count和maxCount,然后遍历数组,遇见1则count,并且更新与maxCount比较,若比maxCount更大,则更新m
从零开始刷力扣(二)——495:提莫攻击
分类:数组的遍历 题目描述: 在《英雄联盟》的世界中,有一个叫 “提莫” 的英雄,他的攻击可以让敌方英雄艾希(编者注:寒冰射手)进入中毒状态。现在,给出提莫对艾希的攻击时间序列和提莫攻击的中毒持续时间,你需要输出艾希的中毒状态总时长。 你可以认为提莫在给定的时间点进行攻击,并立即使艾希处于中毒状态 示例1: 输入: 1,4, 2 输出: 4 原因:
H5游戏开发:FC小蜜蜂 | Aotu.io「凹凸实验室」
H5游戏开发:FC小蜜蜂 by TH(https://github.com/ONESUNDAY) on 20180128 使用 Phaser 游戏引擎开发,主要
H5游戏开发:消灭星星 | Aotu.io「凹凸实验室」
H5游戏开发:消灭星星 by leeenx(https://github.com/leeenx) on 20180
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5Dooring(http://h5.dooring.cn/) 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring(https://github.com/MrXujiang/v6.dooring.public). 接下来笔者就来带大家一起看看我们的方案设计和技术实现
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
从零搭建一款PC页面编辑器PC-Dooring
之前一直忙着调研lowcode平台和开发以下两个项目: H5编辑器 , 可视化大屏编辑器没有太多时间做PC端搭建化项目, 好在搭建平台很多原理都是通用的, 所以早在去年我就开发好了面向PC端的编辑器, 虽然在设计上还有些不足(在后面的内容中会提到), 但是基本模型已经实现, 接下来就和大家一起分享一下具体的实现.为了保证文章整体的逻辑性和条理性, 我将可
go语言定义“零值可用”的类型
1. Go 类型的零值作为 C 程序员出身的我,我总是喜欢用在使用 C 语言的”受过的苦“与 Go 语言中得到的”甜头“做比较,从而来证明 Go 语言设计者在当初设计 Go 语言时是做了充分考量的。在 C99 规范中,有一段是否对栈上局部变量进行自动清零初始化的描述: 如果未显式初始化且具有自动存储持续时间的对象,则其值是不确定的。规范的用语总是晦涩难懂的。
Dooring可视化之从零实现动态表单设计器
前言之前笔者有写过一篇如何设计动态表单配置平台的文章,但是由于笔者电脑问题代码丢失,所以后期重新实现了一套表单设计器,并优化了之前的设计方式,特地做一下总结和复盘。 你将收获 动态表单开发的一般思路 可视化领域中的表单引擎 从零实现一款动态表单设计器 利用H5Dooring开发一款表单设计平台 正文按照习惯,我们先看看表单设计器实现的效果展示:上图中我们将表
计算机组成原理4.2指令寻址方式
4.2.1指令寻址和数据寻址 4.2.1.1指令寻址:顺序寻址: 取出指令后PC指向下一条需执行指令的地址。 1)顺序寻址:定长指令字结构寻址:假设指令字长 存储字长 16bit 2Byte,且主存按字编址。则每次取出指令后PC + 1;若主存按字节编址,意味着每条指令都会占两个地址,则每次取出指令后PC + 2。变长指令字结构寻址:指令字长 存储字
python——零基础照样学
零基础,可以学编程嘛?这是很多初学者的心里都会存在的一个问题,当然,计算机方面的基础对任何一门编程语言的学习都是会有所帮助的,但是如果你在编程语言的学习上是零基础的话,也不用担心,因为不论哪门语言的学习,总是会有一个开始的。谁不是从零基础开始呢。 我个人观点是python,是最适合作为学习编程路上的入门语言。原因大家都懂,python语言相对于其他语言来说
从零使用electron搭建桌面端可视化编辑器
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术