從零搭建一款PC頁面編輯器PC-Dooring

時(shí)間：2023-07-22 00:51:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-22 00:51:01 來源：網(wǎng)站運(yùn)營

從零搭建一款PC頁面編輯器PC-Dooring：之前一直忙著調(diào)研lowcode平臺(tái)和開發(fā)以下兩個(gè)項(xiàng)目: - H5編輯器H5-Dooring , - 可視化大屏編輯器V6.Dooring

沒有太多時(shí)間做PC端搭建化項(xiàng)目, 好在搭建平臺(tái)很多原理都是通用的, 所以早在去年我就開發(fā)好了面向PC端的編輯器PC-Dooring, 雖然在設(shè)計(jì)上還有些不足(在后面的內(nèi)容中會(huì)提到) , 但是基本模型已經(jīng)實(shí)現(xiàn), 接下來就和大家一起分享一下具體的實(shí)現(xiàn).

為了保證文章整體的邏輯性和條理性, 我將可視化搭建平臺(tái)的具體的實(shí)現(xiàn)劃分為了以下幾個(gè)部分:

• PC編輯器效果展示
• 整體技術(shù)架構(gòu)
• 可視化搭建技術(shù)實(shí)現(xiàn)方式
• 編輯器核心思路
• 編輯器架構(gòu)模型
• 如何開發(fā)標(biāo)準(zhǔn)物料組件
• 編輯器后期規(guī)劃

PC編輯器效果展示

在上面的演示中, 組件庫方式和H5-Dooring類似, 只不過組件庫筆者采用了PC端專屬的組件庫antd, 所以我們可以將antd支持的任何組件集成進(jìn)PC-Dooring.

整體技術(shù)架構(gòu)

整體技術(shù)架構(gòu)和H5-Dooring類非常相似, 也是遵循筆者的產(chǎn)品設(shè)計(jì)哲學(xué)—— 不要讓用戶思考. 降低一切拖拽復(fù)雜度, 采用智能網(wǎng)格的交互模式來實(shí)現(xiàn)(這種設(shè)計(jì)方式有一定的局限, 僅供大家參考, 當(dāng)然也可以使用V6.Dooring的自由布局模式). 整體架構(gòu)如下圖所示:







由上圖我們可以看出編輯器主要分為如下幾個(gè)部分: - 組件物料 - 畫布區(qū) - 屬性編輯區(qū) - 功能輔助 - 其他

目前組件物料主要實(shí)現(xiàn)了基礎(chǔ)組件, 可視化組件和 媒體組件, 其他類的組件實(shí)現(xiàn)也類似, 技術(shù)整體實(shí)現(xiàn)我們會(huì)在下面介紹.

可視化搭建技術(shù)實(shí)現(xiàn)方式

前端框架我們還是使用的React, 當(dāng)然大家也可以使用Vue3.0, 原理都是相通的, 不同插件之間也提供了多框架的支持. 編輯器核心的一環(huán)就是組件拖拽, 這里筆者使用了社區(qū)比較強(qiáng)大且穩(wěn)定的庫react-dnd, 其拖拽分為兩個(gè)部分, 一個(gè)是從組件區(qū)拖拽到畫布區(qū), 另一個(gè)是畫布區(qū)內(nèi)部組件的自由拖拽. 我們可以用原生H5的拖放API來實(shí)現(xiàn)第一部分的功能, 本質(zhì)是將拖動(dòng)源攜帶的數(shù)據(jù)傳到畫布制定區(qū)域, 目標(biāo)源監(jiān)聽事件拿到攜帶的數(shù)據(jù)動(dòng)態(tài)渲染出實(shí)際的組件. 過程如下:







當(dāng)然深入研究過react-dnd的朋友都知道, 以上兩個(gè)功能通過react-dnd都可以實(shí)現(xiàn), 大家可以參考它的官網(wǎng)react-dnd官網(wǎng)學(xué)習(xí)研究具體實(shí)現(xiàn)流程, 也可以直接參考PC-Dooring源碼.

至于組件庫, 我們可以采用任何我們熟悉的組件庫, 比如antd, element, zant等, 組件物料需要遵循我們約定的DSL協(xié)議, 這里大家可以參考工業(yè)級(jí)協(xié)議標(biāo)準(zhǔn)odata規(guī)范. 有了一定的規(guī)范, 我們就可以包裝標(biāo)準(zhǔn)的組件物料從而集成第三方組件庫了.

至于功能輔助模塊和狀態(tài)管理, 我們可以采用如mobx, redux, dva等來實(shí)現(xiàn), 最終目的就是讓編輯器不同部分能相互關(guān)聯(lián), 實(shí)時(shí)更新組件狀態(tài), 以及數(shù)據(jù)回傳能力.

編輯器核心思路

編輯器核心實(shí)現(xiàn)思路筆者之前也分析了幾個(gè)現(xiàn)有方案, 發(fā)現(xiàn)字節(jié)魔方的思路很貼切, 這里附上一個(gè)原理圖:







核心就是通過編輯器產(chǎn)生的有效詞法數(shù)據(jù), 讓渲染器能解析渲染成可用的HTML頁面.

編輯器整體架構(gòu)模型

編輯器整體架構(gòu)模型主要是為了讓大家全局的了解可視化編輯器的實(shí)現(xiàn)思路, 以及未來的規(guī)劃方向, 筆者做了一個(gè)基本的草圖, 如下:

如何開發(fā)標(biāo)準(zhǔn)物料組件

開發(fā)標(biāo)準(zhǔn)組件物料需要遵循我們編輯器內(nèi)部的數(shù)據(jù)協(xié)議和組件開發(fā)規(guī)范, 在PC-Dooring中開發(fā)組件主要由以下幾部分組成:

• 組件代碼
• schema定義
• template定義

組件代碼就是組件內(nèi)部具體的實(shí)現(xiàn), 如下案例:

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定義了組件的屬性約束, 可編輯項(xiàng)類型以及默認(rèn)值, 如下:

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: '標(biāo)題顏色', type: 'Color', }, { key: 'fontSize', name: '字體大小', type: 'Number', }, { key: 'align', name: '對(duì)齊方式', type: 'Select', range: [ { key: 'left', text: '左對(duì)齊', }, { key: 'center', text: '居中對(duì)齊', }, { key: 'right', text: '右對(duì)齊', }, ], }, { key: 'lineHeight', name: '行高', type: 'Number', }, ], config: { text: '我是文本', color: 'rgba(60,60,60,1)', fontSize: 18, align: 'center', lineHeight: 2, },};export default Text;template主要規(guī)定了組件在畫布中展示的基本方式, 如下:

const template = { type: 'Text', h: 20, displayName: '文本組件',};export default template;當(dāng)然大家也可以擴(kuò)展其定義或者將schema和template合并. 只要一個(gè)組件符合了以上約定, 都可以被我們編輯器所消費(fèi).

編輯器后期規(guī)劃

PC編輯器目前仍存在一些問題沒有很好的解決, 比如布局方式的局限性導(dǎo)致必須橫向擴(kuò)展很多組件才能滿足不同用戶的個(gè)性化需求, 其次就是組件聯(lián)動(dòng)機(jī)制, 需要統(tǒng)一數(shù)據(jù)中心來管理, 后面會(huì)在H5-Dooring 中展示具體的實(shí)現(xiàn)方式, 大家感興趣也可以實(shí)現(xiàn)一下.

目前PC-Dooring已經(jīng)在github上以MIT協(xié)議完全開源, 如果大家感興趣,也可以貢獻(xiàn)你的一份力量, 幫助社區(qū)解決更多問題.

覺得有用 ？喜歡就收藏，順便點(diǎn)個(gè)贊吧，你的支持是我最大的鼓勵(lì)！微信搜 “趣談前端”，發(fā)現(xiàn)更多有趣的H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn).