CN114510907A - Rich text display and refresh method and terminal - Google Patents
Rich text display and refresh method and terminal Download PDFInfo
- Publication number
- CN114510907A CN114510907A CN202011277775.5A CN202011277775A CN114510907A CN 114510907 A CN114510907 A CN 114510907A CN 202011277775 A CN202011277775 A CN 202011277775A CN 114510907 A CN114510907 A CN 114510907A
- Authority
- CN
- China
- Prior art keywords
- text
- custom
- content
- node
- rendering
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 22
- 238000009877 rendering Methods 0.000 claims abstract description 77
- 238000013500 data storage Methods 0.000 claims abstract description 13
- 238000012545 processing Methods 0.000 claims description 22
- 238000004590 computer program Methods 0.000 claims description 10
- 230000009286 beneficial effect Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/151—Transformation
- G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Document Processing Apparatus (AREA)
Abstract
The invention discloses a rich text display and refreshing method and a terminal; according to a pre-defined data storage format JSON Schema, all defined elements and text nodes are obtained; if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering and generating page content corresponding to the custom attribute by the corresponding rendering component; if the node is a text node, rendering the text content of the text node by a text rendering component according to the custom attribute of the text node to generate the text content; the method is based on the background and thought of front-end componentization, the self-definition of the JSON Schema in the data storage format is carried out in advance, the degree of freedom is high, the expansibility of the data format is improved, the corresponding component is selected to be rendered according to the type of the page element, and the maintainability of the code is improved.
Description
Technical Field
The invention relates to the technical field of Web front-end development, in particular to a rich text display and refreshing method and a terminal.
Background
In a conventional front-end rich text editor, data is rendered based on a DOM tree (Document Object Model) by calling a DOM API interface to perform various operations. In this way, the data format is limited by the format of the DOM tree, the extensibility is limited, and the maintainability drops rapidly with the expansion of the code size.
Disclosure of Invention
The technical problem to be solved by the invention is as follows: a rich text display and refresh method and a terminal are provided, and the expansibility of a data format and the maintainability of codes are improved.
In order to solve the technical problems, the invention adopts the technical scheme that:
a method of rich text presentation and refresh, comprising:
s1, acquiring all custom elements and text nodes according to a pre-custom data storage format JSON Schema;
s2, if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering by the corresponding rendering component to generate page content corresponding to the custom attribute;
and S3, if the node is a text node, rendering the text content of the text node by the text rendering component according to the custom attribute of the text node to generate the text content.
In order to solve the technical problems, the invention adopts the technical scheme that:
a rich text presentation and refresh terminal comprising a processor, a memory, and an executable computer program stored on the memory and executable on the processor, the processor when executing the executable computer program implementing the steps of:
s1, acquiring all custom elements and text nodes according to a pre-custom data storage format JSON Schema;
s2, if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering by the corresponding rendering component to generate page content corresponding to the custom attribute;
and S3, if the node is a text node, rendering the text content of the text node by the text rendering component according to the custom attribute of the text node to generate the text content.
The invention has the beneficial effects that: the method is based on the background and thought of front-end componentization, the self-definition of the JSON Schema in the data storage format is carried out in advance, the degree of freedom is high, the expansibility of the data format is improved, the corresponding component is selected to be rendered according to the type of the page element, and the maintainability of the code is improved.
Drawings
FIG. 1 is a flow chart of a method of rich text presentation and refresh in accordance with an embodiment of the present invention;
FIG. 2 is a block diagram of a rich text display and refresh terminal according to an embodiment of the present invention;
description of reference numerals:
1. a rich text display and refresh terminal; 2. a processor; 3. a memory.
Detailed Description
In order to explain technical contents, achieved objects, and effects of the present invention in detail, the following description is made with reference to the accompanying drawings in combination with the embodiments.
Referring to fig. 1, a method for rich text display and refresh includes:
s1, acquiring all custom elements and text nodes according to a pre-custom data storage format JSON Schema;
s2, if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering by the corresponding rendering component to generate page content corresponding to the custom attribute;
and S3, if the node is a text node, rendering the text content of the text node by the text rendering component according to the custom attribute of the text node to generate the text content.
From the above description, the beneficial effects of the present invention are: the method is based on the background and thought of front-end componentization, the self-definition of the data storage format JSON Schema is carried out in advance, the degree of freedom is high, the expansibility of the data format is improved, the corresponding components are selected to be rendered according to the types of the page elements, and the maintainability of the code is improved.
Further, the custom elements can be nested with each other, and the text nodes can not be nested.
As can be seen from the above description, the custom elements can be nested with each other, and the degree of freedom and extensibility are higher.
Further, the step S2 further includes:
and the corresponding rendering component judges whether a nested child node exists in a custom element, if so, the custom element is a corresponding father node, and the content of the child node is rendered at the corresponding position of the page content of the father node according to the attribute of the child node.
As can be seen from the above description, for the nested custom elements, the content of the child node is rendered at the position corresponding to the parent node according to the attribute of the child node, so that the requirements of page design are met, and the requirements are stricter.
Further, the step S3 is followed by:
and S4, acquiring an operation request of a user, calling a first rendering component corresponding to the click content according to the click content in the operation request, and processing the operation request, wherein the operation request comprises an operation of not changing the JSON Schema and an operation of changing the JSON Schema.
According to the description, the corresponding rendering component responsible for rendering the content is selected for processing according to the click content in the user request, the condition of the selected processing component is clear, and the maintainability is further improved.
Further, in step S4, the invoking a first rendering component corresponding to the clicked content and processing the operation request specifically includes:
calling a first rendering component corresponding to the click content;
judging whether the operation request is an operation without changing a JSON Schema, if so, performing corresponding processing on the first rendering assembly according to the operation request;
otherwise, the first rendering component converts the Operation request into one or more atomic Operation operations corresponding to the JSON Schema, modifies the JSON Schema according to the atomic Operation, generates a new JSON Schema, acquires all custom elements and text nodes according to the new JSON Schema, and executes steps S2 and S3 to refresh and re-render the page.
According to the above description, when the user changes the JSON Schema, the operation needs to be converted into an atomic operation for processing, and then the page is refreshed and re-rendered, so that the modification of the user can be fed back in real time, and the use experience of the user is improved.
Referring to fig. 2, a rich text presentation and refresh terminal includes a processor, a memory, and an executable computer program stored in the memory and running on the processor, and when the processor executes the executable computer program, the following steps are implemented:
s1, acquiring all custom elements and text nodes according to a pre-custom data storage format JSON Schema;
s2, if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering by the corresponding rendering component to generate page content corresponding to the custom attribute;
and S3, if the node is a text node, rendering the text content of the text node by the text rendering component according to the custom attribute of the text node to generate the text content.
From the above description, the beneficial effects of the present invention are: the method is based on the background and thought of front-end componentization, the self-definition of the JSON Schema in the data storage format is carried out in advance, the degree of freedom is high, the expansibility of the data format is improved, the corresponding component is selected to be rendered according to the type of the page element, and the maintainability of the code is improved.
Further, the custom elements can be nested with each other, and the text nodes can not be nested.
As can be seen from the above description, the custom elements can be nested with each other, and the degree of freedom and extensibility are higher.
Further, the step S2 further includes:
and the corresponding rendering component judges whether a nested child node exists in a custom element, if so, the custom element is a corresponding father node, and the content of the child node is rendered at the corresponding position of the page content of the father node according to the attribute of the child node.
As can be seen from the above description, for the nested custom elements, the content of the child node is rendered at the position corresponding to the parent node according to the attribute of the child node, so that the requirements of page design are met, and the requirements are stricter.
Further, the processor executing step S3 of the computer program further includes:
and S4, acquiring an operation request of a user, calling a first rendering component corresponding to the click content according to the click content in the operation request, and processing the operation request, wherein the operation request comprises an operation of not changing the JSON Schema and an operation of changing the JSON Schema.
As can be seen from the above description, in the processing of the user request, according to the clicked content in the user request, the corresponding rendering component responsible for rendering the content is selected for processing, and the condition for selecting the component for processing is clear, so that the maintainability is further improved.
Further, in step S4, the invoking a first rendering component corresponding to the clicked content and processing the operation request specifically includes:
calling a first rendering component corresponding to the click content;
judging whether the operation request is an operation without changing a JSON Schema, if so, performing corresponding processing on the first rendering assembly according to the operation request;
otherwise, the first rendering component converts the Operation request into one or more atomic Operation operations corresponding to the JSON Schema, modifies the JSON Schema according to the atomic Operation, generates a new JSON Schema, acquires all custom elements and text nodes according to the new JSON Schema, and executes steps S2 and S3 to refresh and re-render the page.
According to the above description, when the user changes the JSON Schema, the operation needs to be converted into an atomic operation for processing, and then the page is refreshed and re-rendered, so that the modification of the user can be fed back in real time, and the use experience of the user is improved.
Referring to fig. 1, a first embodiment of the present invention is:
a rich text display and refresh method presets JSON Schema as follows:
s1, acquiring all custom elements and text nodes according to a pre-custom data storage format JSON Schema;
s2, if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering by the corresponding rendering component to generate page content corresponding to the custom attribute;
the custom elements can be mutually nested, and the text nodes can not be nested;
the step S2 further includes:
the corresponding rendering component judges whether a nested child node exists in a custom element, if so, the custom element is a corresponding father node, and the content of the child node is rendered at the corresponding position of the page content of the father node according to the attribute of the child node;
and S3, if the node is a text node, rendering the text content of the text node by the text rendering component according to the custom attribute of the text node to generate the text content.
In this embodiment, as shown in the above code, the first custom element type is List, and 2 child nodes of the type List-item are nested, so that a corresponding List defined in the rich text editor and a List item component are called to render, the List component renders content rendered by the List item at a corresponding position of the List, the second custom element type is Image, and similarly, the Image component is called to render.
S4, obtaining an operation request of a user, calling a first rendering component corresponding to the click content according to the click content in the operation request, and processing the operation request, wherein the operation request comprises an operation of not changing a JSON Schema and an operation of changing the JSON Schema;
in step S4, the invoking the first rendering component corresponding to the click content and the processing the operation request specifically include:
calling a first rendering component corresponding to the click content;
judging whether the operation request is an operation without changing a JSON Schema, if so, performing corresponding processing on the first rendering assembly according to the operation request;
otherwise, the first rendering component converts the Operation request into one or more atomic Operation operations corresponding to the JSON Schema, modifies the JSON Schema according to the atomic Operation, generates a new JSON Schema, acquires all custom elements and text nodes according to the new JSON Schema, and executes steps S2 and S3 to refresh and re-render the page.
In this embodiment, the operation of not changing the JSON Schema may be: when a user clicks the Image, the highlight edge is rendered by the Image component;
the operation of changing the JSON Schema may be: and if the user needs to Insert a new list-item after the last list-item in the list, calling a ListItem component to convert the Operation request of the user into a corresponding atomic Operation (Insert _ Node), correspondingly modifying the JSON Schema according to the atomic Operation to generate a new JSON Schema, and refreshing and re-rendering the rich text editor.
Referring to fig. 2, the second embodiment of the present invention is:
a rich text presentation and refresh terminal 1, comprising a processor 2, a memory 3 and an executable computer program stored on the memory 3 and executable on the processor 2, wherein the processor 2 executes the executable computer program to implement the rich text presentation and refresh method of embodiment 1.
In summary, the rich text display and refresh method and terminal provided by the invention are based on the background and thought of front-end componentization, the customization of the data storage format JSON Schema is performed in advance, the degree of freedom is high, the expansibility of the data format is improved, the corresponding components are selected for rendering according to the types of the page elements, the maintainability of the code is improved, the customized elements can be nested with each other, the degree of freedom and the expandability are further improved, the rendering components corresponding to the content are selected for processing according to the content selected by the user, the condition of the components selected for processing is clear, the maintainability is further improved, when the JSON Schema is changed, the page content is automatically refreshed and re-rendered, and the use experience of the user is improved.
The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all equivalent changes made by using the contents of the present specification and the drawings, or applied directly or indirectly to the related technical fields, are included in the scope of the present invention.
Claims (10)
1. A method of rich text presentation and refresh, comprising:
s1, acquiring all custom elements and text nodes according to a pre-custom data storage format JSON Schema;
s2, if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering by the corresponding rendering component to generate page content corresponding to the custom attribute;
and S3, if the node is a text node, rendering the text content of the text node by the text rendering component according to the custom attribute of the text node to generate the text content.
2. A method for rich text presentation and refresh as claimed in claim 1, wherein said custom elements are nestable with each other and said text nodes are not nestable.
3. A method for rich text presentation and refreshing as claimed in claim 2, wherein said step S2 further comprises:
and the corresponding rendering component judges whether a nested child node exists in a custom element, if so, the custom element is a corresponding father node, and the content of the child node is rendered at the corresponding position of the page content of the father node according to the attribute of the child node.
4. A method for rich text presentation and refreshing as claimed in claim 1, wherein said step S3 is followed by further comprising:
and S4, acquiring an operation request of a user, calling a first rendering component corresponding to the click content according to the click content in the operation request, and processing the operation request, wherein the operation request comprises an operation of not changing the JSON Schema and an operation of changing the JSON Schema.
5. The method according to claim 4, wherein in step S4, the invoking of the first rendering component corresponding to the clicked content processes the operation request specifically as:
calling a first rendering component corresponding to the click content;
judging whether the operation request is an operation without changing a JSON Schema, if so, performing corresponding processing on the first rendering assembly according to the operation request;
otherwise, the first rendering component converts the Operation request into one or more atomic Operation operations corresponding to the JSON Schema, modifies the JSON Schema according to the atomic Operation, generates a new JSON Schema, acquires all custom elements and text nodes according to the new JSON Schema, and executes steps S2 and S3 to refresh and re-render the page.
6. A rich text presentation and refresh terminal comprising a processor, a memory, and an executable computer program stored on the memory and executable on the processor, wherein the processor when executing the executable computer program implements the steps of:
s1, acquiring all custom elements and text nodes according to a pre-custom data storage format JSON Schema;
s2, if the element is a custom element, calling a rendering component corresponding to the element type in the rich text editor according to the element type and the custom attribute of the custom element, and rendering by the corresponding rendering component to generate page content corresponding to the custom attribute;
and S3, if the node is a text node, rendering the text content of the text node by the text rendering component according to the custom attribute of the text node to generate the text content.
7. A rich text presentation and refresh terminal as claimed in claim 6, wherein said custom elements are nestable with each other and said text nodes are not nestable.
8. The rich text presentation and refresh terminal as claimed in claim 7, wherein said step S2 further comprises:
and the corresponding rendering component judges whether a nested child node exists in a custom element, if so, the custom element is a corresponding father node, and the content of the child node is rendered at the corresponding position of the page content of the father node according to the attribute of the child node.
9. A rich text presentation and refresh terminal as claimed in claim 6, wherein said processor after executing said step S3 of said computer program further comprises:
and S4, acquiring an operation request of a user, calling a first rendering component corresponding to the click content according to the click content in the operation request, and processing the operation request, wherein the operation request comprises an operation of not changing the JSON Schema and an operation of changing the JSON Schema.
10. The rich text display and refresh terminal of claim 9, wherein in the step S4, the invoking of the first rendering component corresponding to the clicked content processes the operation request specifically by:
calling a first rendering component corresponding to the click content;
judging whether the operation request is an operation without changing a JSON Schema, if so, performing corresponding processing on the first rendering assembly according to the operation request;
otherwise, the first rendering component converts the Operation request into one or more atomic Operation operations corresponding to the JSON Schema, modifies the JSON Schema according to the atomic Operation, generates a new JSON Schema, acquires all custom elements and text nodes according to the new JSON Schema, and executes steps S2 and S3 to refresh and re-render the page.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011277775.5A CN114510907A (en) | 2020-11-16 | 2020-11-16 | Rich text display and refresh method and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011277775.5A CN114510907A (en) | 2020-11-16 | 2020-11-16 | Rich text display and refresh method and terminal |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114510907A true CN114510907A (en) | 2022-05-17 |
Family
ID=81546990
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011277775.5A Pending CN114510907A (en) | 2020-11-16 | 2020-11-16 | Rich text display and refresh method and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114510907A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115859919A (en) * | 2023-03-02 | 2023-03-28 | 北京智启蓝墨信息技术有限公司 | Method and system for storing structured rich-format text |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101324844A (en) * | 2008-07-10 | 2008-12-17 | 电子科技大学 | Method for making rich text control with intelligent apperception |
| US20140095968A1 (en) * | 2012-10-03 | 2014-04-03 | Plutext Pty Ltd | Systems and methods for electronic form creation and document assembly |
| CN108846087A (en) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | A kind of page rendering method, apparatus, terminal and server |
| CN111241793A (en) * | 2020-02-17 | 2020-06-05 | 湖南快乐阳光互动娱乐传媒有限公司 | Method, system, and medium for parsing rich text editor content for native client rendering |
| CN111708535A (en) * | 2020-06-17 | 2020-09-25 | 网易（杭州）网络有限公司 | Image-text display control method and device and electronic equipment |
-
2020
- 2020-11-16 CN CN202011277775.5A patent/CN114510907A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101324844A (en) * | 2008-07-10 | 2008-12-17 | 电子科技大学 | Method for making rich text control with intelligent apperception |
| US20140095968A1 (en) * | 2012-10-03 | 2014-04-03 | Plutext Pty Ltd | Systems and methods for electronic form creation and document assembly |
| CN108846087A (en) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | A kind of page rendering method, apparatus, terminal and server |
| CN111241793A (en) * | 2020-02-17 | 2020-06-05 | 湖南快乐阳光互动娱乐传媒有限公司 | Method, system, and medium for parsing rich text editor content for native client rendering |
| CN111708535A (en) * | 2020-06-17 | 2020-09-25 | 网易（杭州）网络有限公司 | Image-text display control method and device and electronic equipment |
Non-Patent Citations (1)
| Title |
|---|
| 我叫陈小皮: "微信小程序rich-text富文本用法实例分析", Retrieved from the Internet <URL:https://www.jb51.net/article/161549.htm> * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115859919A (en) * | 2023-03-02 | 2023-03-28 | 北京智启蓝墨信息技术有限公司 | Method and system for storing structured rich-format text |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR102185864B1 (en) | Server-side rendering method and system of native content for presentation | |
| US9576068B2 (en) | Displaying selected portions of data sets on display devices | |
| US9857959B2 (en) | Supporting webpage design and revision irrespective of webpage framework | |
| JP6051337B2 (en) | Client-side page processing | |
| US10437584B2 (en) | Web client command infrastructure integration into a rich client application | |
| CN107066618B (en) | Method and device for displaying converted webpage | |
| KR101494844B1 (en) | System for Transforming Chart Using Metadata and Method thereof | |
| US9967370B2 (en) | OData enabled mobile software applications | |
| CN111611518B (en) | Automatic visual display page publishing method and system based on Html5 | |
| JP2004005568A (en) | Updating of high-speed gui style of legacy application | |
| JP2008542919A (en) | Precise grain control of element z-order in display | |
| US11677807B2 (en) | System and method to standardize and improve implementation efficiency of user interface content | |
| US20240007701A1 (en) | Continuing video playback when switching from a dynamic page to a non-dynamic page | |
| WO2023103430A1 (en) | Data visualization display method and apparatus, medium and electronic device | |
| US20090287724A1 (en) | Data Viewer Management | |
| US7703015B2 (en) | Delta-handling in server-pages | |
| US7461337B2 (en) | Exception markup documents | |
| CN114510907A (en) | Rich text display and refresh method and terminal | |
| CN109542418B (en) | Service code generation method and computer terminal | |
| CN113934957A (en) | Method and system for generating rendering sketch file from webpage | |
| CN107391175B (en) | Control data configuration method and computer readable storage medium | |
| CN115329720A (en) | Document display method, device, equipment and storage medium | |
| US20180130240A1 (en) | Displaying visualization images on portable electronic device | |
| JPWO2007013280A1 (en) | Plug-in module execution method, browser execution method, mailer execution method, program, terminal device, and computer-readable recording medium on which page data is recorded | |
| CN101676905A (en) | Layout for modifying resource contents based on customized rules |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |