Past selections
H5 editor's picture upload and picture library design scheme
How to realize the real-time preview and real-machine scan code preview function of H5 editor
Getting started with online IDE development: implementing an online code editor from scratch
A visual editor for h5 pages based on React+Koa-Dooring
Summary of TS core knowledge points and analysis of actual project cases
Preface
HTML5 is the latest revision of HTML. It is designed to support multimedia on mobile devices, so as to present us with richer page performance. HTML5 is also cross-platform and is designed to work on different types of hardware (PC, tablet, mobile phone, TV, etc.). Therefore, applications in different scenarios are derived, such as mobile official website, H5 event page, H5 marketing page, etc. With the development of Internet pairs, the mobile BI model in the field of big data can also be carried by H5.
In order to meet the above needs, many companies have begun to build H5 editing platforms, such as a certain show and a certain exhibition.The author has also open sourced his own H5 editor H5-Dooring before to facilitate companies to quickly build H5 pages that meet business scenarios.
We all know that in order to design an easy-to-use H5 editor, we must simplify user operations and reduce user cost to the extreme. To achieve this standard, we need to have the following conditions:
Rich component library
Rich picture resources
Flexible component configuration
Foolish operation
H5 page template (template library) out of the box
The above five conditions are very important reference indicators for the development of the H5 editor. The author has specific implementation plans for the first four conditions in the previous article. The author will specifically introduce the implementation of the template library function in the H5 editor. I hope to give the same IT engineers who need this requirement have a reference.
Chapter Summary
The basic idea of template library design in H5 editor
How to realize the communication between iframe child page and parent page
Solution to automatically generate cover image based on dom element
text
As a front-end engineer, solving project problems is one of our basic responsibilities. We can use the knowledge we have acquired to solve problems and needs in project development. This is also the first stage of our professional career, namely— —Adaptation period. If we want to continue to be promoted, we need to continue to upgrade and master various skills, so that we can use the best solution to solve problems efficiently in the future when we encounter problems, which is the second stage — -Development period.
Next, the author will take you step by step to complete the template library in the H5 editor and realize the automatic generation of cover plans. You need to master the basic capabilities that front-end engineers need to have: javascript, html5 and modular development methods (es6 modularity and How to use third-party modules).
The basic idea of designing template library of H5 editor
We all know that most of the page rendering in the H5 editor is based on the json schema, and each component can be refined into a json metadata. This is so that we can control the component more fine-grained, and the template is A block or complete page composed of many components corresponds to a json element array. So the corresponding solution is that we provide users with a button to save the template. When the user clicks save, we only need to get the currently configured json data , Save it in the corresponding database. The data structure is roughly as follows:
[
{
"id": "12reg2",
"name": "趣谈前端落地页",
"tpl": [...组件配置数据项]
},
{
"id": "12rdg5",
"name": "H5-Dooring落地页",
"tpl": [...组件配置数据项]
}
]
复制代码
We can take out the above data in the database and directly render it with react or vue. As for how to get the json data, please refer to the specific implementation process of H5-Dooring.
But saving data is not enough. After users store their own templates, if they want to directly use the previously configured templates later, how to find them quickly? Although we can identify different templates by the name of the template, but once There are more and more templates, and users cannot easily select the template they want from the name of the template, so at this time we often expect the H5 editor to provide the function of template preview. As shown below:
so we encountered One difficult problem is how to generate a template preview.
How to generate template preview
The general idea of generating template preview is to generate a screenshot of the preview page based on our preview page, and then store it in the corresponding template data. The steps are as follows: So the user needs to configure the H5 template on the editing page of the H5 editor, and then jump to the preview Page, based on the preview page to generate a preview screenshot, and finally jump back to the editing page to save. This process is not very user-friendly, because it involves the mutual jump of different pages, we can further optimize, directly generate preview pictures on the editing page , In order to realize this logic, we have two schemes:
Request the preview page through the server, generate a screenshot of the page on the server and store it in the database together with the template data
Generate preview images based on dom front-end through canvas + iframe technology
Because the former implementation process is more complicated, you need to rely on libraries such as puppeteer, and also keep the pictures and template data in sync, so I recommend the second option, pure front-end implementation. I will be in the next content one by one Introduction.
How to realize the communication between iframe child page and parent page
In the above introduction, we chose to use canvas + iframe technology to achieve page screenshots. Let's take a look at the implementation effect first:
from the above figure we can see that we provide users with two ways to set the cover: use the default image and automatically generate the cover.
Users can use the default cover provided by Dooring or directly use the generated preview cover. In Figure 2, the pop-up window is actually an iframe. The author designed a mechanism to automatically upload the screenshot to the server after the iframe content is rendered, and then the iframe and parent The page communication passes the image url to the editing page, and then saves it with the template data. To realize the page parent-child communication, we need to understand how the iframe interacts with the parent page. For a detailed introduction to the parent-child page communication, please refer to the author’s old record The cross-page communication problem in the project and the front-end implementation of file download function . Here we take a look at how the iframe communicates with the parent page:
// iframe点用副页面函数
parent.window.getFaceUrl(url);
// 父页面定义的全局函数
window.getFaceUrl = (url) => {
setFaceUrl(url)
setShowModalIframe(false)
}
复制代码
Above we have basically overcome the father-son value transfer and the entire process design plan. Since there are many specific details, such as how to store data and how to integrate data into the template, you can learn about it in the author's H5-Dooring project.
Solution to automatically generate cover image based on dom element
The above basically implements the saving process of the entire template library. Next, we implement the details of saving preview images. Since we generate preview images based on page elements, we need the front end to be able to convert dom into images. Here the author investigated 2 well-known Library:
html2canvas
dom-to-image
Because html2canvas is still in the experimental stage, and the friends around the author have indeed written indescribable bugs after using Europe, the author analyzed the dom-to-image, which can basically meet the current needs, so we directly use it to achieve.
We need to get the process implemented above, that is, we need to convert the dom into a picture, then send it to the server, finally get the picture address returned by the server, and finally save the picture address and template data together. Let's look at the code directly:
import domtoimage from 'dom-to-image';
// ...其他库
// 将dom转化为图片逻辑
const generateImg = (cb) => {
domtoimage.toBlob(ref.current)
.then(function (blob) {
const formData = new FormData();
formData.append('file', blob, 'tpl.jpg');
req.post('/files/xxx/xxx', formData).then((res) => {
cb && cb(res.url)
})
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
复制代码
The next steps are very simple, get the image url and pass it to the parent page for display and storage.
H5 editor H5-Dooring update instructions
The author of the above tutorial has been integrated into H5-Dooring. For some more complex interactive functions, it can also be realized through reasonable design. You can explore and study by yourself.
github????: H5 online editor H5-Dooring
Since H5-Dooring is still constantly updating and iterating, the author will specifically introduce the updated content:
Refactored the overall interface of the H5 editor:
Add picture library function:
Visual data source editing function:
Template library implementation:
Preview interface optimization:
At last
If you want to learn more H5 games, webpack, node, gulp, css3, javascript, nodeJS, canvas data visualization and other front-end knowledge and actual combat, welcome to study and discuss together in "Interesting Frontend" to explore the front-end boundary together.
Comment area
The author will hold a book-sending activity with prizes in the next issue, hurry up and tell the book in your heart~