The open source H5 editor H5-Dooring 2 months ago has been successfully iterated to version 1.0, from the initial basic page generation framework to the current support for richer component resources, interaction capabilities and data tracking capabilities. The design and iteration of H5-Dooring has also received feedback and inspiration from many netizens. There are also many like-minded friends who have joined in to make H5-Dooring better and more powerful. Here is our latest version and function implementation.
Original design intention
The main purpose of the author’s initial development of this project was to improve the cost and efficiency of personal and corporate development of H5 pages. By building blocks, existing component libraries or external component resources (under design) can be used to build H5 applications suitable for different scenarios. , And supports one-click download of code, allowing technicians to easily deploy H5 pages to their own servers. I have done many small code generation applications before, but they are all designed for programmers to write less code, not enough to become It is a real open source project, so I plan to put H5-Dooring on the ground and make it a truly valuable project.
Next, the author will introduce the functions and implementation ideas of the latest version of the H5 editor, and how to implement the WYSIWYG solution attempt.
Preview of the latest version of the editor
Form data kanban and data analysis:
Technology stack
I also introduced the technology stack and infrastructure implementation used by H5-Dooring in my article before. If you are interested, you can refer to the implementation of an h5 page visual editor based on React+Koa.
Recently, we are using nest to reconstruct the back-end part of the project, and we will introduce certain technical solutions later. Here is a brief introduction to the technology stack implemented by the project:
umi3.0 + two + antd4.0
react + react ecology
nest + mysql + redis
nginx + pm2
So this project is a full-stack project, and the implementation of many core functions depends on the agreed DSL layer, page rendering layer and back-end capabilities.
Function points and implementation plan
The author's previous series of articles have introduced specific function points and implementation schemes, here we mainly introduce the new functions that are available in version 1.0.
Added rich text component, calendar component, button interaction component, column component
The author uses the domestic braft for the rich text component, and the preview is as follows: because the project was developed with antd4.0, the author specially encapsulated a set of rich text editor adapted to the antd4.0 component, supporting the controlled mode of the Form component. Those who are interested can learn the specific implementation on github.
The calendar component has also been added recently, mainly to achieve a richer H5 page display, as follows: we can set the selected time range, the main color of the selected range, the date, etc. The date component is mainly used by the author of Zarm's Calendar component, The core is as follows:
import React, { useState, memo, useEffect, useRef } from 'react';
import { Calendar } from 'zarm';
import styles from './index.less';
import { ICalendarConfig } from './schema';
const CalendarPlayer = memo((props: ICalendarConfig & { isTpl: boolean }) => {
const { time, range, color, selectedColor, round, isTpl } = props;
const realRange = range.split('-');
const [value, setValue] = useState<Date[] | undefined>([new Date(`${time}-${realRange[0]}`), new Date(`${time}-${realRange[1]}`)]);
const [min] = useState(new Date(`${time}-01`));
const [max] = useState(new Date(`${time}-31`));
const boxRef = useRef<any>(null);
return <div className={styles.calenderWrap} style={
{borderRadius: round + 'px', pointerEvents: isEditorPage ? 'none' : 'initial'}} ref={boxRef}>
<Calendar
multiple={!!range}
value={value}
min={min}
max={new Date(max)}
disabledDate={(date:any) => /(0|6)/.test(date.getDay())}
onChange={(value:Date[] | undefined) => {
setValue(value);
}}
/>
</div>
});
export default CalendarPlayer;
This is also a way to implement Dooring components, and interested friends are welcome to add more rich component support for Dooring.
Before, a friend asked me why the project uses so many components and the speed is still fast when previewing the H5 page. Here I explain the specific implementation method, as shown in the figure below: So our mobile products and dependent resources are very few , And optimized at the webpack layer and server layer, so the mobile terminal will access the H5 page very quickly. This optimization will be introduced in detail later, and the performance is still being optimized.
Button interaction components The author has written articles that specifically introduce how to implement button interaction, custom interaction code, and rich text pop-up interaction. If you are interested, you can refer to the article Low-code development platform core function design-component custom interaction Achieved .
The author here shows the specific interaction method: the interactive user who opens the pop-up window can customize the content in the pop-up window, as follows:
At this time, the preview effect on the mobile phone is as follows:
for the customization
code, the author integrates the code editing library codemirror, so that we You can customize the interaction capabilities, as follows:
Next is our column component, which is mainly based on business requirements. The implementation method is the same as the basic component. You can experience it online.
Added import and export json file function
The main reason for this function is to facilitate collaborative design of H5 pages. For example, if one person designs an H5 page and wants other people to participate in the design, you can export the current H5 page as JSON, and another person can import this JSON file. You can immediately render into the exact same H5 page, and then modify or improve it. As follows:
Regarding how to implement the download json, the author also introduced in the previous article, we can use file-saverthis third-party module to do it. Upload and analysis json can be implemented by ourselves. The author uses the Upload + FileReader APIimplementation. The core code is as follows:
const uploadprops = useMemo(() => ({
name: 'file',
showUploadList: false,
beforeUpload(file, fileList) {
// 解析并提取json数据
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
importTpl && importTpl(JSON.parse(data))
};
reader.readAsText(file);
}
}), []);
Added one-click screenshot and high-definition poster image generation function
This section is mainly to provide a quick mapping solution for the H5 page, which is convenient for operators or technical personnel to evaluate the page effect. From the front-end implementation perspective, we mainly use canvasthe conversion of dom. The principle is as follows: The author has also shared the specific implementation before For the solution, you can refer to the following articles:
How does the front end realize the one-click screenshot function?
Here I recommend two useful canvasscreenshot tools, html2canvasand dom-to-imagethe screenshot process of the Dooring page is as follows:
Added right-click menu and custom keyboard shortcut functions
In order to further improve the efficiency of users building H5 pages, the author has added a right-click menu, which can easily copy the components that have been made, or delete them with one key, as follows: but for keyboard controllers, they prefer to realize all functions through the keyboard. so I added a keyboard shortcut, support for a key copy, paste, delete elements, as follows:
it is recommended that a few okay to use the right-click menu and keyboard shortcuts library
react-contexify, keymaster.
New page configuration
This section is mainly to give the H5 page more freedom, you can customize the page title, SEOkeywords, page background and background image, etc., as follows: more page customization capabilities will be added later.
Interface design optimization
Compared with version 0.1, the interface has been greatly adjusted and optimized, such as our login page: preview page:
Support sdk introduction
This is also an attempt by the author before, allowing H5-Dooring to sdkbe implanted into any websystem in a way, and provides customized functions and displays api, mainly as follows: The implementation principle was also introduced in the article before. As follows:
Those who are interested can refer to the following articles of the author:
How to quickly package your application into js-sdk?
Later planning
The main thing to do in the later period is to continue to enrich high-quality business components, refactor githubthe design architecture of the existing code, do a good job in the layering of views, data, and logic, separate the page renderer and form renderer, and provide component opening capabilities and enhancements Back-end service capabilities, etc., welcome interested friends to make valuable suggestions and issuecontinue to iterate and optimize.
github address: https://github.com/MrXujiang/h5-Dooring
Welcome everyone fork and star.
Relax