Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to build PC page editor PC-Dooring", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to build PC page editor PC-Dooring" bar!

I have been busy researching the lowcode platform and developing the following two projects:

H5 Editor H5-Dooring

Visual large screen editor V6.Dooring

There is not much time to do PC-side building projects, fortunately, many principles of building the platform are universal, so I developed a PC-oriented editor PC-Dooring as early as last year. Although there are still some deficiencies in the design (which will be mentioned later), the basic model has been implemented, and then I will share the specific implementation with you.

In order to ensure the logic and organization of the article as a whole, I divide the specific implementation of the visual platform into the following parts:

PC editor effect display

Overall technical architecture

Implementation of Visualization Construction Technology

The core idea of editor

Editor architecture model

How to develop standard material components

Editor post-planning

PC editor effect display

Pc-dooring

In the above demonstration, the component library is similar to H5-Dooring, except that the author adopts the PC-specific component library antd, so we can integrate any component supported by antd into PC-Dooring.

Overall technical architecture

The overall technical architecture is very similar to the H5-Dooring class, and it also follows the author's product design philosophy-don't let users think. Reduce all drag-and-drop complexity and adopt the interactive mode of intelligent grid (this design method has some limitations for your reference only, of course, you can also use the free layout mode of V6.Dooring). The overall architecture is shown in the following figure:

Image.png

From the above picture, we can see that the editor is mainly divided into the following parts:

Assembly material

Canvas area

Attribute editing area

Functional assistance

Other

At present, component materials mainly implement basic components, visual components and media components, and the component implementations of other classes are also similar. We will introduce the overall implementation of the technology below.

Implementation of Visualization Construction Technology

Image.png

Front-end framework we still use React, of course, we can also use Vue3.0, the principle is the same, different plug-ins also provide multi-framework support. The core of the editor is component dragging. Here, the author uses the powerful and stable community library react-dnd, which is divided into two parts: one is dragging from the component area to the canvas area, and the other is the free dragging of internal components in the canvas area. We can use the drag-and-drop API of native H5 to achieve the first part of the function, in essence, the data carried by the drag source is transferred to the canvas development area, and the target source listening event takes the carried data to dynamically render the actual components. The process is as follows:

Image.png

Of course, friends who have studied react-dnd deeply know that the above two functions can be realized through react-dnd. You can refer to its official website react-dnd to study the specific implementation process, or you can directly refer to the PC-Dooring source code.

As for the component library, we can use any component library that we are familiar with, such as antd, element, zant, etc., the component materials need to follow our agreed DSL protocol, here you can refer to the industrial protocol standard odata specification. With certain specifications, we can package standard component materials to integrate third-party component libraries.

As for the functional assistant module and state management, we can use such as mobx, redux, dva and so on. The ultimate goal is to enable different parts of the editor to be related to each other, real-time update the status of components, and the ability to return data.

The core idea of editor

The author has also analyzed several existing schemes before and found that the idea of byte Rubik's cube is very appropriate. Here is a schematic diagram:

Image.png

The core is the valid lexical data generated by the editor so that the renderer can parse and render into available HTML pages.

Editor overall architecture model

The overall architecture model of the editor is mainly to give you a global understanding of the implementation of the visual editor, as well as the future planning direction, the author made a basic sketch, as follows:

Image.png

How to develop standard material components

The development of standard component materials needs to follow the data protocols and component development specifications within our editor. The development of components in PC-Dooring is mainly composed of the following parts:

Component code

Schema definition

Template definition

The component code is the specific implementation within the component, as shown in the following example:

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?)

): ({text}));}); export default Text

Schema defines the attribute constraints, editable item types, and default values for the component, as follows:

Import {IColorConfigType, INumberConfigType, ISelectConfigType, ITextConfigType, TColorDefaultType, TNumberDefaultType, TSelectDefaultType, TTextDefaultType,} from'@ / components/FormComponents/types'; export type TTextSelectKeyType = 'left' |' right' | 'center'; export type TTextEditData = Array

; export interface ITextConfig {text: TTextDefaultType; color: TColorDefaultType; fontSize: TNumberDefaultType; align: TSelectDefaultType; lineHeight: TNumberDefaultType;} export interface ITextSchema {editData: TTextEditData; config: ITextConfig } const Text: ITextSchema = {editData: [{key: 'text', name:' text', type: 'Text',}, {key:' color', name: 'title color', type: 'Color',}, {key:' fontSize', name: 'font size', type: 'Number'' }, {key: 'align', name:' alignment', type: 'Select', range: [{key:' left', text: 'left alignment',}, {key: 'center', text:' alignment',} {key: 'right', text:' right alignment',}, {key: 'lineHeight', name:' row height', type: 'Number',},], config: {text:' I am the text', color: 'rgba', fontSize: 18 Align: 'center', lineHeight: 2,},} Export default Text

Template mainly specifies the basic way in which components are displayed on the canvas, as follows:

Const template = {type: 'Text', h: 20, displayName:' text component',}; export default template

Of course, you can also expand its definition or merge schema and template. As long as a component meets the above conventions, it can be consumed by our editor.

Editor post-planning

At present, there are still some problems in the PC editor that have not been well solved, such as the limitation of the layout mode, which leads to the horizontal expansion of many components to meet the personalized needs of different users, and the second is the component linkage mechanism, which needs to be managed by a unified data center. Later, the specific implementation will be shown in H5-Dooring, which can be implemented if you are interested.

Thank you for reading, the above is the content of "how to build PC page editor PC-Dooring", after the study of this article, I believe you have a deeper understanding of how to build PC page editor PC-Dooring, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.