Document writing method and system based on convenient writing and rich interaction rendering

Abstract

The invention relates to a document writing method and system based on convenient writing and rich interactive rendering, and the method comprises the steps: defining a label grammar, specifically defining a label name, a type, an attribute and a behavior; according to the label grammar, realizing HTML template generation logic corresponding to the label; converting the document content into structured data through a document analysis algorithm; and traversing the structured data, calling HTML template generation logic, and executing view rendering and interaction logic. The bottom layer renders and processes the document through HTML / JS / CSS, and the problem that traditional document styles and interaction are limited can be solved; specific rendering and interaction effects can be completed by setting tag attributes, and the problem of complex document writing can be solved; the content of the table label is in a CSV data format, data redundancy can be further reduced, and data migration is facilitated; label embedding is supported in the CSV format data, and table cell level style control and combination control can be achieved; the invention belongs to the technical field of document writing and can be used for taking notes, writing academic papers and the like.

Description

Technical Field

[0001] The present invention relates to the technical field of document writing, and in particular, to a document writing method and system based on convenient writing and rich interactive rendering. Background Art

[0002] Traditional document editors (such as WORD) and online editors (such as iFlytek Docs) have obvious limitations in visual presentation. For example, these editors cannot achieve picture carousel, table pagination, custom anchor styles, and cannot create responsive layouts.

[0003] Traditional document editors (such as WPS), document languages (such as Markdown), and online editors (such as Youdao Note) generally lack interactive capabilities, such as being unable to perform table paging / searching, accordion expansion / collapse, GIF playback / pause, etc.

[0004] There are many pipe symbols (|) and hyphens (-) in Markdown table data, and there are a large number of and tags in HTML tables, which are somewhat redundant compared to CSV format data. At the same time, there are certain difficulties in migrating data between traditional document editors (such as WPS).

[0005] Existing Web technologies (HTML / CSS / JS) have developed maturely. There are many excellent JS / CSS plugin resources in the current Internet environment. However, when using these technologies for document writing, it faces the problem of relatively high complexity, which makes it difficult for ordinary users or non-professional developers to use Web technologies for document writing.

[0006] In summary, the existing document editing-related technologies have many problems in terms of content style flexibility, interactive experience, and writing complexity, and there is an urgent need for a new technical solution to improve and perfect them. Summary of the Invention

[0007] The present invention provides a document writing method and system based on convenient writing and rich interactive rendering to achieve the effects of reducing the complexity of document writing, improving the flexibility of document content styles, and enhancing the interactivity of document content.

[0008] To achieve the above effects, the present invention adopts the following technical solutions:

[0009] A document writing method and system based on convenient writing and rich interactive rendering includes the following steps:

[0010] S1. Define tag syntax, specifically, clarify the tag name, type, attributes, and behaviors;

[0011] S2. Implement the HTML template generation logic corresponding to the tags according to the tag syntax;

[0012] S3. Convert the document content into structured data through a document parsing algorithm;

[0013] S4. Traverse the structured data, call the HTML template generation logic, and execute the view rendering and interaction logic.

[0014] Among them, S1 and S2 are the tag system construction logics, and S3 and S4 are the document parsing and rendering logics; when the tag system is built and perfected, S1 and S2 will no longer exist.

[0015] Among them, the S1 tag types include:

[0016] S1.1. Inline tags: Used to display content presented within a single line, and its format is: @[tag name](…).

[0017] Inline tags include, but are not limited to, text tags (@[text](…)), image tags (@[image](…)), animated image tags (@[gif](…)), link tags (@[link](…)), anchor tags (@[anchor](…)), audio tags (@[audio](…)), video tags (@[video](…)), radio button tags (@[radio](…)), checkbox tags (@[checkbox](…)); where "…" in the tag parentheses represents tag attributes (the same below).

[0018] Furthermore, inline tags also include TAG tags (@[tag](…)); placing the TAG tag at any position in the text and setting the TAG tag attributes can control the style of the paragraph where the text is located. The TAG tag is defined to solve the problem that the Markdown language does not support custom styles; as an extension of its function, it also supports combining block, table, and component tags to modify the style of the paragraph where it is located.

[0019] S1.2. Block tags: Used to combine other elements in the page to form an independent content container. It can wrap inline tags, text content, and structured text format content. By specifying the block tag attributes, the overall style can be set (such as changing the background color, setting the border, etc.), thereby enhancing the visual hierarchy of the document content; its tag format is: :::block(…) Block content :::

[0020] S1.3. Table tags: The content of the table tags is in CSV format data, which is used to present the CSV format content in a table form; among them: S1.3.1. In the CSV format data, inline tags (excluding TAG tags), Markdown, etc. can be embedded to achieve effects such as embedding pictures, animated pictures, links, anchors, etc. in the table; S1.3.2. In the CSV format data, TAG tags (tag(…)) can be embedded to achieve cell-level style control and cell merging control; S1.3.3. The table tag attributes support table-wide style control, cell-level style control, and cell merging control; S1.3.4. The table tag attributes support dynamic effect control such as paging, searching, sorting, etc.; Its tag format is: :::table(…) CSV format data :::

[0021] S1.4. Component tags: They are further encapsulations of functional modules containing multiple elements. By integrating relevant elements, interactions, and rendering effects, reusable unified functional units are formed, including but not limited to carousel tags, accordion tags, and question tags; the corresponding tag formats are as follows in sequence: Carousel label Accordion label Exam label :::carousel(…) Carousel label content::: :::accordion(…) Accordion label content::: :::exam(…) Exam label content:::

[0022] The S1 tag attributes, tag behaviors, and other tag formats are as follows:

[0023] S1.5. Tag attributes: The “…” in the parentheses of S1.1 to 1.4 represents tag attributes, including self-attributes, CSS class name attributes, and HTML style attributes (refer to the definitions of each tag attribute in Specific Embodiments 1 to 10). Among them: Self-attributes: Such as attributes like merge-list and loader of the table tag; CSS class name attributes: The value is a CSS class name (className), and the class names are separated by spaces; HTML style attributes: Composed of CSS attributes and values separated by commas, such as: border=none, font-size=10, etc.

[0024] S1.6. Tag attribute rules: Each attribute is separated by a half-width comma (,), and the attribute and value are connected by an equal sign (=); For CSS class name attributes, if there are multiple class names, each class name is separated by a space; HTML style attributes are composed of CSS attributes and values separated by commas, such as: border=none, font-size=10, etc.; When the unit of the attribute value is pixel (px), px can be omitted; When there is a half - angle comma or a half - angle parenthesis in the attribute value, the text needs to be enclosed in half - angle double quotes or half - angle single quotes; if there are special characters such as half - angle single quotes, double quotes or carriage returns in the text, an escape character (\) needs to be added to the left of the special character.

[0025] S1.7. Label behavior: It includes third - party or custom JS / CSS scripts or JS / CSS code blocks declared in the document.

[0026] S1.8. Based on the various label formats defined in S1.1 to 1.4, the formula label and the icon label formats are agreed as follows: Label type Label symbol Description Formula label $Inline formula$$$Display formula$$ Such as mathematical formulas, chemical formulas, etc. Chart label ```Chart name Chart code``` Chart name such as: mermaid, chart, flow Such as flowcharts, Gantt charts, bar charts, etc.

[0027] S1.9. The present invention retains the Markdown and HTML label types.

[0028] The various labels involved in S1.1 to 1.4 are further described as follows: S1.1.1. Text label (@[text](…)): It is used to embed and format text content in the document; S1.1.2. Image label (@[image](…)): It is used to embed and display static image content in the document; S1.1.3. Animated GIF label (@[gif](…)): It is used to embed and display GIF animated images and covers in the document. By clicking the play button, the effect of controlling the play and pause of the animated GIF can be achieved; S1.1.4. Link label (@[link](…)): It is used to create hyperlinks in the document to achieve jumping between internal document links or external network links; S1.1.5. Anchor label (@[anchor](…)): It is used to establish an anchor point in the document as the target of link jumping. Usually, it needs to be combined with the link label (@[link](…)) or the `[link description](url)` label to achieve the quick positioning function; S1.1.6. Audio label (@[audio](…)): It is used to embed and play audio content in the document; S1.1.7. Video label (@[video](…)): It is used to embed and play video content in the document; S1.1.8. Radio button label (@[radio](…)): It is used to create radio buttons in the document to enable the user to select only one option from multiple options; S1.1.9, Multiple-choice Button Label (@[checkbox](…)): Used to create multiple-choice buttons in a document, allowing users to select one or more options from multiple choices; S1.4.1, Carousel Label (:::carousel(…)…:::): Used to cycle through a series of content. Inline labels, text content, and structured text format content can be embedded in the label; S1.4.2, Accordion Label (:::accordion(…)…:::): Used to build a vertical collapsible accordion; includes a title area and a content area. The title area is used to trigger the collapse / expand operation, and the content area is associated with the title area, switching the display state in response to the operation; Inline labels, text content, and structured text format content can be embedded in the label; S1.4.3, Exam Label (:::exam(…)…:::): Used to create exam questions; belongs to a custom label; Taking multiple-choice questions as an example, by specifying the label type as multiple-choice questions, inputting options, correct answers, and explanations, a multiple-choice question can be generated; Multiple-choice questions have interactive effects such as checking the multiple-choice options, showing the correct answers, and explanations.

[0029] Regarding the generation logic of the HTML template corresponding to the label according to the label syntax in S2, refer to the specific implementation section.

[0030] The structured data format and document parsing algorithm principle in S3 are as follows: S3.1, Structured data, format: {0: [], 1:[], …}, where 0 and 1 represent the first page and the second page respectively. The data format in []: [{txt: other data}, {block: block data}, {table: table data}, {tex: formula data}, {carousel: carousel data}, {exam: exam data},…]; The data types in [] include block data, table data, formula data, and component data; The txt includes but is not limited to inline label data, chart label data, Markdown data, ordinary text data, and HTML data.

[0031] When the document contains the JS / CSS paths or code blocks imported by the user, the structured data in S3 also includes the JS / CSS paths imported by the user and the declared JS / CSS code blocks.

[0032] S3.2, Document parsing algorithm principle, as Figure 2 shown, includes the following steps: S3.2.1, Corresponding Figure 2Step 1, declare constants and variables, including mapTemp (temporary mapping object), mapResult (return result), index (paging index), and hasCodeSign (whether surrounded by ` or '''); Among them, the global constant EH_BLOCK_TAGS in mapTemp is an array with values: [block, table, carousel, accordion, exam,...]; putting tex into mapTemp is to extract the inline formulas and prevent the subsequent conversion of carriage return characters into HTML ; S3.2.2, corresponding to Figure 2 Step 2, traverse the article line by line; S3.2.3, corresponding to Figure 2 Step 3, determine whether there is a next line according to the page break (EH_PAGE_BREAK); S3.2.4, corresponding to Figure 2 Step 4, if there is data in the current line, obtain the hasCodeSign value, that is, whether it is surrounded by ` or '''); S3.2.5, corresponding to Figure 2 Step 5, if the current line is a page break (EH_PAGE_BREAK), then call the pushParsedDataToResultMap method. And initialize the next page: mapResult[++index] = []; S3.2.6, corresponding to Figure 2 Step 6, if there is data in the current line: Not surrounded by ` or ''': if it is formula (tex) data, call the parseDocTexByRow method, otherwise call the parseDocByRow method; Surrounded by ` or ''': call the appendParsedDocToTempMap method; S3.2.7, corresponding to Figure 2 Step 7, if there is a next line, call the appendParsedDocToTempMap method; S3.2.8, corresponding to Figure 2 Step 8, append the non-empty data in mapTemp to mapResult[index]; S3.2.9, corresponding to Figure 2 Step 9, return the structured data, that is, mapResult; Figure 2The parseDocTexByRow and parseDocByRow shown above complete the parsing of various types of data and the transfer of temporary data in mapTemp to mapResult data. Parsing-related methods such as parseDocTexByRow, parseDocByRow, and appendParsedDocToTempMap are as follows Figure 3 .

[0033] After the parsing in S3.2, the structured data in the format of {0: [], 1:[], …} involved in S2.1 can be obtained.

[0034] Advantages of the S3.2 parsing algorithm: Only need to add the component tag name in the constant EH_BLOCK_TAGS to parse the content of the corresponding component, without developing other logics.

[0035] For the document parsing and rendering process involved in S3, please refer to Figure 1 .

[0036] Based on the structured data involved in the above S3, traversing the structured data in S4 and executing the view rendering and interaction logics are as follows: S4.1. Traverse the structured data {0: [], 1:[], …}, obtain the structured data of the first page: []; and declare a constant array: parts = []; S4.2. Traverse the structured data [] of the first page, and during the traversal, obtain the current tag and content; S4.3. If the tag is equal to "tex", append the current content to parts; S4.4. If EH_BLOCK_TAGS contains the tag, convert the content corresponding to the current tag (including the tag and attributes) into HTML, and append the above HTML to parts; S4.5. If the tag is equal to "txt", convert the current content into HTML, and append the above HTML to parts; S4.6. Assemble the content elements in parts and perform preliminary view rendering: obtain the HTML string of the first page and assign it to the innerHTML property of the DOM element of the first page; S4.7. For formula data, chart data, and data with interactivity or requiring secondary rendering, the corresponding JS / CSS needs to be pre-loaded statically or dynamically; static loading means loading all necessary JS and CSS at once when the page is loaded, and dynamic loading means loading the corresponding JS and CSS on demand when needed; For JS / CSS that needs to be dynamically loaded, a global constant indicating whether to dynamically load JS / CSS can be defined. For example: export const LIB_LOADED_OBJ = {tex: false, codeBlock: false, bootstrapTable: false, …}; During the traversal in S2.2 or S3.2 above, according to specific tags or tag attributes, the loading status of the corresponding elements in LIB_LOADED_OBJ can be initialized through regular expression matching or native JS inclusion methods (e.g., tex: true indicates that formula JS / CSS needs to be dynamically loaded); after dynamic loading, the interactivity of the view can be achieved. If necessary, Figure Two redrawing can be performed S4.8. Repeat the above logic to complete the rendering and interaction logic of all page views; the page styles include but are not limited to web preview mode, slide show mode, (Word) page mode.

[0037] S4.4 aims to convert block data, table data, or component data into HTML, including the following processes: S4.4.1. Obtain the tag attributes and the tag content (excluding attributes, the same below); the parsing method for the tag content can refer to S4.5.1; S4.4.2. Generate the outer HTML template according to the tag attributes; S4.4.3. Generate the tag content HTML according to the tag attributes and the tag content; S4.4.4. Obtain the outer HTML corresponding to the current tag;

[0038] S4.5 aims to convert inline tag data, chart tag data, Markdown data, and ordinary text data into HTML, including the following processes: S4.5.1. Parse the content corresponding to the txt. According to the specific format of the inline tag (@[tag name](…)), the content is split into an array in the format: [{type: value}, …], where: The type value: includes but is not limited to: text (text), image (image), gif (animated image), link (link), anchor (anchor), audio (audio), video (video), radio (radio button), checkbox (checkbox), tag (tag), txt (others); value value: ① When type is txt, the content of value includes but is not limited to chart data, Markdown data, plain text data, and HTML data; ② When type is not equal to txt, the content of value is the value of the inline tag attribute; for example, the following text: @[text](value=red font, color=red) text label This is **bold** font. After being parsed by S4.5.1, the resulting array is: [{text:'value=red font, color=red '}, {txt: 'text label This is **bold** font'}]; S4.5.2. Declare a constant array: parts = []; Traverse the array obtained in S4.5.1; After parsing each type of data in the array into HTML in turn, append it to parts; Among them: If the type value is not equal to tag, the corresponding tag and attributes can be parsed, and the corresponding HTML can be generated according to the tag preset template; If type is equal to tag, the corresponding tag and attributes can be parsed, and the HTML style of the paragraph where it is located can be updated according to the tag attributes; If the current type is Markdown data and plain text data in the txt type, it can be converted to HTML with the help of a third-party plugin, such as https: / / github.com / markedjs / marked; if the current type is chart data in the txt type, it can be first converted to an HTML code snippet, and then the secondary rendering of the chart view can be performed by calling the third-party JS rendering method of the chart; S4.5.3. Assemble the content elements in parts to complete the conversion of inline tag data, chart tag data, Markdown data, and plain text data into HTML;

[0039] Furthermore, an input prompt function can be implemented. For example, when entering "@", the inline tag list described in S1.1 will pop up, and when entering "@[text](", all attribute lists will pop up to facilitate users to write documents.

[0040] Furthermore, the effect of directly editing the view for document writing can be achieved; the principle is: set the contenteditable attribute of the outermost view to true, and set event listeners for it, listening for pointerdown, keydown, beforeinput, and input events. Obtain the view elements through event.target and curElement.closest methods, and then the view can be added, modified, or deleted, etc.

[0041] A document processing system based on convenient writing and rich interactive rendering, including the following modules: Tag definition module: used to define tag syntax, clarify tag names, types, attributes, and behaviors; the tag types include inline tags, block tags, table tags, and component tags; Template generation module: used to implement the HTML template generation logic corresponding to tags according to tag syntax; Parsing module: used to convert document content into structured data through a document parsing algorithm; Rendering execution module: used to traverse structured data, call the HTML template generation logic, and execute view rendering and interactive logic; Interactive script processing module: used to load third-party or custom JS / CSS scripts, or JS / CSS code blocks declared in the document to support the dynamic interaction of tag behaviors.

[0042] The beneficial effects of the present invention are that it can reduce the complexity of writing documents, improve the flexibility of document content styles, and enhance the interactivity of document content, as shown in: ① By presetting tag attributes and tag behaviors, specific rendering and interactive effects can be achieved by setting tag attributes, thereby reducing the complexity of writing documents; ② Tag attributes include self-attributes, CSS class name attributes, and HTML style attributes; it solves the problems of insufficient flexibility and interactivity of traditional document styles, such as anchor point style modification, table paging / search, etc.; for table and component tags, it also supports the modification of inner element styles. For example, table tags support freely setting table styles in row dimensions and cell dimensions, and also support setting in specified intervals; thereby further improving the flexibility of document content styles; ③ Specific embodiments E5-5-1 (89.6%), E6-5-1 (85.2%), E7-5-1 (93.5%), E7-5-2 (72.5%), E7-5-3-1 (92.3%) show that using the tags involved in S1.1 to 1.4 to write documents can significantly reduce the code amount compared with using HTML, JavaScript, and CSS languages for document writing, saving about 72.5% to 93.5%; thereby reducing the complexity of writing documents; ④ Through TAG tags, the problem that the Markdown language does not support custom styles can be solved; at the same time, TAG tags support combining block, table, and component tags to modify the styles of the paragraphs where they are located; thereby further improving the flexibility of document content styles; ⑤ By agreeing that the content of table tags is CSV format data, the redundancy of data can be reduced to a certain extent, the storage space of data can be reduced, and the migration of data can be made more convenient; ⑥ In the CSV format data of the table content, embedding picture / video / link tags (E7-5-2), TAG tags (E10-1), etc. is supported, thus further enhancing the flexibility of the document content style;

[0043] The JS / CSS plugins and their versions involved in the present invention: bootstrap-5.3.3: https: / / github.com / twbs / bootstrap layui-2.9.23: https: / / github.com / layui / layui bootstrap-table-1.24.0; https: / / github.com / wenzhixin / bootstrap-table / tree / develop marked-15.0.6: https: / / github.com / markedjs / marked Description of the Drawings

[0044] Figure 1 : Document parsing and rendering process; Figure 2 : S3 parsing algorithm code snippet 1; Figure 3 : S3 parsing algorithm code snippet 2; Figure 4 : Steps included in the present invention; Figure 5 : Generation logic of text label HTML template; Figure 6 : Example of text label interactive rendering; Figure 7 : Generation logic of anchor and link label HTML template; Figure 8 : Example of anchor and link label interactive rendering; Figure 9 : Default style and interactive code snippet of dynamic graph Figure 10 : Generation logic of block label HTML template; Figure 11 : Generation logic of table label HTML template; Figure 12 : Method for converting CSV content in table label into inner layer code of HTML; Figure 13 : Method for constructing bootstrap-table table parameters according to table attributes; Figure 14: When the table loader is Bootstrap, view Figure Two The rendering logic for the second time; Figure 15 : The logic for generating the HTML template of the carousel component label; Figure 16 : The logic for generating the HTML template of the accordion component label; Figure 17 : The view after rendering the text label E1-5-1; Figure 18 : The view after rendering the anchor label E2-5-1; Figure 19 : The view after rendering the dynamic graph label E5-5-1; Figure 20 : The view after rendering the block label E6-5-1; Figure 21 : The view after rendering the table label E7-5-1; Figure 22 : The view after rendering the table label E7-5-2; Figure 23 : The view after rendering the table label E7-5-3-1; Figure 24 : The view after rendering the table label E7-5-3-2; Figure 25 : The view after rendering the carousel label E8-3-1; Figure 26 : The view after rendering the accordion label E9-3-1; Figure 27 : The view after rendering the TAG label E10-1.

[0045] Among them: Figure 1 Step 4: The JS / CSS paths imported through the import label in the document and the JS / CSS code blocks declared by the declaration label. This step only exists when the user needs to customize the label; Figure 1 Step 5: The structured data involved in S2.1; Figure 1 Step 6: The basis for judging whether to dynamically load JS / CSS is: ① There are specific labels (such as figure formula labels) or label attributes; ② The declared or imported JS / CSS is not empty; Figure 1 Step 7: The loading order of JS / CSS is not absolute. For example, it can also be Figure 1 Started to load JS / CSS at step 20; Figure 1Step 8: The process below this step is the process of processing the structured data on the first page; Figure 1 Step 10: If it is formula data, then enter Figure 1 Step 11, append the formula label and content to the parts array, and then when Figure 1 Step 19 is regarded as Figure Two rendered for the second time, render the formula. It is also possible to Figure 1 directly generate HTML for the formula in Step 11 and append it to the parts array; Figure 1 Steps 12 and 13: Parsing logic for block / table / component data. It includes constructing the parent element HTML template according to the label attributes, obtaining the label content HTML according to the label attributes and label content, and obtaining the final HTML of the corresponding label; Figure 1 Step 17: Logic for parsing inner label data, chart label data, Markdown data, plain text data, HTML data, etc.; Figure 1 Step 19: Usually, the view can be completed after one rendering. However, when encountering data such as formula data, chart data, and data with interactivity or requiring secondary rendering, it is necessary to pre-load the corresponding JS / CSS statically or dynamically and then render again; Figure 1 Step 20: Used to implement the interactive effects of the document. This step can also be placed Figure 1 in Step 7 to complete. Specific implementation mode

[0046] The principles and features of the present invention will be described below with reference to the accompanying drawings. The examples given are only used to explain the present invention and are not intended to limit the scope of the present invention.

[0047] The present invention provides a document writing method and system based on convenient writing and rich interactive rendering to achieve the effects of reducing the complexity of document writing, improving the flexibility of document content styles, and enhancing the interactivity of document content.

[0048] To achieve the above effects, it is first necessary to complete the tag system involved in S1.1 to 1.4. To make the page present different styles, the present invention supports selecting a default pre-loaded front-end framework. The following embodiments all assume that bootstrap.min.css and bootstrap.bundle.min.js have been statically loaded.

[0049] Embodiment 1: Constructing text tags Text tags (@[text](…)) are used to set text styles. The specific implementation method of constructing text tags is as follows:

[0050] Define the tag syntax based on S1, specifically including S1.1 inline tags, S1.5 tag attributes, S1.6 tag attribute rules, and S1.7 tag behaviors. The definable tag syntax and tag attribute introductions are as follows:

[0051] E1-1. Text tag syntax @[text](css=className, html style, value=text content, id=ID, type=type, title=title, path=text file path, href=link, data-*=data attribute value, role=role, aria-*=ARIA attribute value)

[0052] E1-2. Introduction to text tag attributes E1-2-1. @[text]: Text identifier; E1-2-2. (...): The content in the parentheses is the tag attribute, consisting of value, css, html style, type, title, path, href, role, data-*, and aria-*. Each attribute is separated by a comma, and the attribute and value are connected by "=". E1-2-3. value: Text content; E1-2-4. css: Text CSS (optional), the value is the CSS class name (className), and the class names are separated by spaces; E1-2-5. html style: Text HTML style (optional), consisting of CSS properties and values separated by commas, such as: border=none, font-size=10, etc.; E1-2-6. id: ID (optional), the value should be unique within the document scope; E1-2-7. type: HTML tag type (optional), values: p (default) | button | span | div | a, etc.; It is not recommended to set this attribute. It is preferred to set it through CSS class names or HTML styles; E1-2-8. title: Title (optional), the prompt content that pops up when the mouse hovers over the text; E1-2-9. path: Text file path (optional), when the path and value attributes cannot exist simultaneously; E1-2-10. href: Link (optional); E1-2-11. data-*: Data attribute value (optional); E1-2-12, role: HTML enhanced attribute, role (optional), usually used in combination with aria-* attributes; E1-2-13, aria-*: ARIA attribute value (optional).

[0053] Based on S2, according to the tag syntax, implement the HTML template generation logic corresponding to the tag. The HTML template logic corresponding to the text tag refers to Figure 5 , the HTML template corresponding to the text tag is as follows:

[0054] E1-3, HTML template corresponding to the text tag

[0055] E1-4, Explanation of the HTML template corresponding to the text tag E1-4-1, htmlTag: HTML tag, which is the value of type in E1-2-7: p (default) | button | span | div | a; E1-4-2, property: The own property of the text tag, that is, the property other than the CSS class name property and the HTML style property is the own property (the same below); E1-4-3, cssAttr: CSS class name property, the value is: class="eh-text ${textClassName}", where textClassName is the value of the css property in E1-2-4; E1-4-4, styleAttr: HTML style property, the value is: style="${textStyle}"; textStyle is the declared set of text HTML style properties; E1-4-5, value: Text content, the value is: the value of the value property in E1-2-3 or the text content under the path in E1-2-9.

[0056] E1-5, Text parsing and rendering logic

[0057] E1-5-1, for example, the following piece of text @[text](value=Set the text CSS style to text-primary and make it bold at the same time, css=text-primary, font-weight=bold)

[0058] After being processed by the document parsing algorithm described in S3, the document content is converted into structured data. The structured data is: {0: [{txt: "Set the CSS style of the text to text-primary and make it bold"}}

[0059] After traversing the structured data in S4 and invoking the HTML template generation logic, the generated HTML is obtained: Set the CSS style of the text to text - primary and make it bold

[0060] Execute the S4 view rendering and interaction logic to obtain Figure 17 The rendered view as shown

[0061] E1-5-2. For more rendering examples of text labels, refer to Figure 6 On the left is the document text content, and on the right is the rendered effect; Figure 6 In the "expand / collapse effect", by clicking on the text of the rendered view, the expand / collapse interaction logic can be achieved; among them, the expand / collapse interaction logic is encapsulated in the bootstrap.bundle.min.js code.

[0062] The characteristics of the text label are as follows: Only one text label is required to set the text style. Compared with tags such as p, button, span, a in HTML, it is easier for users to understand. This label supports introducing CSS class names and HTML styles, so that the rendering of label elements is no longer restricted; when dealing with the interaction logic related to this element, the element can be found through the class name (eh-text) or ID, so that the interaction logic related to this element can be achieved.

[0063] Example 2: Construct an anchor label The anchor label (@[anchor](…)) is used to create an anchor point in the document and usually needs to be combined with the link label (@[link](…)) or the `[link description](url)` label to achieve the quick positioning function. The specific implementation method of constructing the anchor label is as follows:

[0064] Based on S1, define the label syntax, specifically including S1.1 inline label, S1.5 label attributes, S1.6 label attribute rules, S1.7 label behavior. The defined label syntax and label attribute introduction are as follows:

[0065] E2-1. Text label syntax @[anchor](id=anchor number, href=link, css=className, offset=up|down,title=title, show=none|id|title, html style)

[0066] E2-2. Introduction to anchor label attributes E2-2-1, @[anchor]: Anchor identifier; E2-2-2, (...) : The content in parentheses consists of id, href, css, offset, title, show, and html styles, with each attribute separated by a comma, and the attribute and value connected by "=" E2-2-3, id: Anchor number, and the id cannot be repeated in the same document; E2-2-4, href: The link is divided into a relative link (i.e., a link within the document) and an absolute link (i.e., a full-path link). The relative link starts with #, such as href=#anchor-11, and the absolute link is like: href=www.domain.com; E2-2-5, css: Cascading Style Sheets (CSS), optional, with the value being the CSS class name (className), and it is recommended to reference the className in bootstrap5; E2-2-6, offset: Offset position (optional), with the value being up|down. up: Offset upward; down: Offset downward; E2-2-7, title: Title (optional); E2-2-8, show: Displayed text (optional), with the value being none|id|title, and the default is to display the id; E2-2-9, html style: Link HTML style (optional), consisting of CSS properties and values separated by commas, such as: color=red!important, margin-left=20.

[0067] Based on S2 and according to the tag syntax, implement the logic for generating the HTML template corresponding to the tag. The HTML template logic for the anchor tag refers to Figure 7 , and the HTML template corresponding to the anchor tag is as follows:

[0068] E2-3, HTML template corresponding to the anchor tag ` <a class="${clazz} ${properties.css}" ${hrefattr}${idattr}${styleattr}${titleattr}> <${properties.offset}>${showText}< / ${properties.offset}> `

[0069] E2-4, Explanation of the HTML template corresponding to the anchor tag E2-4-1, clazz: eh-anchor; E2-4-2, property.css: CSS class name property E2-4-3, hrefAttr: href property; E2-4-4, styleAttr: HTML style attribute, with the value: style="${textStyle}"; textStyle is the declared set of text HTML style attributes; E2-4-5, titleAttr: title attribute; E2-4-6, showText: depends on the show attribute in E2-2-8. If show=id, it is the value of the id attribute; if show=title, it is the value of the title attribute; otherwise it is empty; E2-4-7, properties.offset: corresponds to the offset attribute value in E2-2-6. If offset=up, then ${showText} is 标签包围，如果offset=down，则${showText}被标签包围；否则不被任何标签包围。

[0070] E2-5、锚点解析渲染逻辑锚点是一种用于快速定位到特定位置的标记，在网页或文档中广泛应用。若要实现快速定位功能，需历经设置锚点和引用锚点这两个步骤：

[0071] E2-5-1、比如下面一段文本这是编号锚点示例，显示编号@[anchor](id=11, title=编号锚点, color=#173194, background-color=lightgray, css=className, offset=up, show=id)

[0072] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据，结构化数据为：{0: [{txt: "这是编号锚点示例，显示编号@[anchor](id=11, title=编号锚点,color=#173194, background-color=lightgray, css=className, offset=up, show=id)"}}

[0073] 经过S4遍历结构化数据，调用HTML模板生成逻辑，得到生成的HTML：这是编号锚点示例，显示编号11

[0074] 执行S4视图渲染及交互逻辑，得到图18所示的渲染后视图。

[0075] E2-5-2、锚点标签更多渲染示例可参考图8中标签为@[anchor]的示例，其中左侧为文档文本内容，右侧为渲染后的效果。

[0076] 锚点标签解决了传统文档编辑器以及在线编辑器无法设置锚点样式的问题。

[0077] 实施例3：构建链接标签链接标签（@[link](…)）用于在文档内部或外网链接之间实现跳转，方便引用其他资源，以下仅列出链接标签语法，其各属性说明、以及解析渲染逻辑可参考锚点标签：链接标签语法：@[link](href=链接, css=className, offset=up|down, title=标题, html样式)链接标签对应的HTML模板逻辑参考图7，渲染示例以及点击链接标签跳转到锚点标签的示例参考图8；

[0078] 实施例4：构建更多行内标签参考实施例1构建文本标签，可继续构建出图片标签（@[image](…)）、音频标签（@[audio](…)）、视频标签（@[video](…)）、单选按钮标签（@[radio](…)）、多选按钮标签（@[checkbox](…)）。

[0079] 实施例5：构建动态图标签动态图标签（@[gif](…)）用于在文档中插入GIF动态图以及封面，通过点击播放按钮，以实现控制动态图播放暂停的效果。构建动态图标签具体实施方式如下：

[0080] 基于S1定义标签语法，具体包括S1.1行内标签、S1.5标签属性、S1.6标签属性规则、S1.7标签行为，可定义标签语法以及标签属性介绍如下：

[0081] E5-1、动态图标签语法@[gif](src=gif图片地址, poster=封面地址, autoplay=是否自动播放, alt=图片描述, css=className, html样式, btn-css=播放按钮className, btn-*=播放按钮html样式)

[0082] E5-2、动态图标签属性介绍E5-2-1、@[gif]：GIF图像标识；E5-2-2、(…)：括号中的内容由src、poster、autoplay、alt、css、html样式组成，各属性以",”隔开，属性和值以"=”相连；E5-2-3、src：GIF图片地址；E5-2-4、poster：封面地址（可选），设置poster，则必须设置宽高（width和height）；E5-2-5、autoplay：是否自动播放（可选），值：true|false；E5-2-6、alt：图片描述（可选），图像无法显示时的替代文本；E5-2-7、css：图像CSS（可选），值为CSS类名（className），类名之间以空格隔开，推荐引用bootstrap5中的className，比如css=alert alert-success；E5-2-8、html样式：GIF图片HTML样式（可选），由逗号分隔的CSS属性和值组成，如：border=none, font-size=10等；E5-2-9、btn-css：播放按钮CSS（可选），值为CSS类名（className）；E5-2-10、btn-*：播放按HTML样式（可选），btn-后连接CSS属性和值，如btn-color=red, btn-background=cyan。

[0083] 基于S2根据标签语法，实现标签对应的HTML模版生成逻辑，动态图标签对应的HTML模板如下：

[0084] E5-3、动态图标签对应的HTML模板E5-3-1、如果poster、width、height属性不为空，并且autoplay属性为false，则模版为：` <img class="eh-gif ${properties.css}" src="${properties.poster}" data-tag="${properties.src}" ${styleAttr}${altAttr}> <span class="eh-gif-poster eh-rounded-btn ${properties.btnCss}" ${btnstyleattr}>Gif `E5-3-2、如果不满足E5-3-1条件，则模板为：`<img class="${gifClass} ${properties.css}" src="${properties.src}" ${tagPoster}${styleAttr}${altAttr}>`

[0085] E5-4、动态图标签对应的HTML模板说明E5-4-1、properties.width：动态图宽度；E5-4-2、properties.height：动态图高度E5-4-3、properties.css：动态图CSS类名属性；E5-4-4、properties.src：动态图地址；E5-4-5、styleAttr：HTML样式属性；E5-4-6、altAttr：HTML ALT属性；E5-4-6、properties.btnCss：动态图播放按钮CSS类名属性；E5-4-6、btnStyleAttr：动态图播放按钮HTML样式属性；E5-4-7、gifClass：设置了封面并且为播放状态的CSS类名；E5-4-8、tagPoster：data-tag属性，播放时，存放封面地址，暂停时存放动态图地址。

[0086] E5-5、动态图解析渲染逻辑动态图标签涉及到播放按钮样式的定义以及点击播放 / 暂停交互功能的定义；基于S4.7所述的具备交互性或需要二次渲染的数据时，需要预先静态或动态加载对应的JS / CSS。

[0087] 为了实现动态图标签的默认样式以及交互逻辑，可定义动态图封面（eh-gif-poster）、播放按钮（eh-rounded-btn）的CSS类名以及点击动态图暂停（processGifSrcClick）、点击播放按钮播放（processGifPosterClick）的JS方法，上述CSS类名以及JS方法名参考图9。

[0088] 对于图9所示的JS / CSS，可选择以下其中一种方案进行加载：①静态加载：将以上CSS、JS代码块分别放到<style>< / style>、<script>< / script>标签内；或者将以上CSS、JS保存到文件，然后通过 <link href="CSS路径" rel="stylesheet"><script src="JS路径">< / script>静态加载；②动态加载：当检测到有gif标签时，动态加载图9所示的JS / CSS；具体地，向LIB_LOADED_OBJ中添加元素gif，值为false；当检测到gif标签时，将LIB_LOADED_OBJ中的gif值设置为true；在渲染前判断，如果LIB_LOADED_OBJ['gif']等于true，则加载图9中的JS / CSS。

[0089] E5-5-1、比如下面一段文本GIF图像自动播放：@[gif](src=https: / / cdnqiniu.benhuisen.com / test / 1.gif)GIF图像设置封面：@[gif](src=https: / / cdnqiniu.benhuisen.com / test / 1.gif, css=shadow,poster=https: / / cdnqiniu.benhuisen.com / test / 1.png, autoplay=false, btn-color=cyan, width=200, height=200)

[0090] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据，结构化数据为：{0: [{txt: " GIF图像自动播放：\n@[gif](src=https: / / cdnqiniu.benhuisen.com / test / 1.gif)\n\nGIF图像设置封面：\n@[gif](src=https: / / cdnqiniu.benhuisen.com / test / 1.gif, css=shadow, poster=https: / / cdnqiniu.benhuisen.com / test / 1.png, autoplay=false, btn-color=cyan, width=150,height=150)"}}

[0091] 经过S4遍历结构化数据，调用HTML模板生成逻辑，得到生成的HTML：GIF图像自动播放：GIF图像设置封面： Gif

[0092] 执行S4视图渲染及交互逻辑，得到图19所示的渲染后视图。

[0093] 通过点击上述视图的Gif按钮，可控制Gif的播放和暂停；从而解决了传统文档无法控制动态图播放和暂停的问题。

[0094] 实现上述效果用了247个字符，如果用HTML / JS / CSS语言实现上述效果，需要用到约2386个字符；可节省约89.6%的代码量。

[0095] 实施例6：构建区块标签区块标签（:::block(…)…:::）用于组合其他元素。在页面中会独占一行。可将`文本(text)、图片(image|gif)、链接(link)、锚点(anchor)`等元素包裹在一个区块内，以方便进行整体样式的设置（如改变背景颜色、设置边框等），使文档内容更有层次感。构建动态图标签具体实施方式如下：

[0096] 基于S1定义标签语法，具体包括S1.2区块标签、S1.5标签属性、S1.6标签属性规则，可定义标签语法以及标签属性介绍如下：

[0097] E6-1、区块标签语法:::block(css=className, html样式, badge-text=徽章文字, badge-css=徽章className, badge-*=徽章html样式值, id=ID, data-*=数据属性值, role=角色,aria-*=ARIA属性值) 区块内容:::

[0098] E6-2、区块标签属性介绍E6-2-1、:::block … :::：区块标识，被包围的部分为区块内容；E6-2-2、(…)：括号中的内容由css、html样式、badge-text、badge-css、badge-*、id、、data-*、role、aria-*组成，各属性以",”隔开，属性和值以"=”相连；E6-2-3、css：区块CSS（可选），值为CSS类名（className），类名之间以空格隔开；E6-2-4、html样式：区块HTML样式（可选），由逗号分隔的CSS属性和值组成，如：border=none, font-size=10等；E6-2-5、badge-text：徽章文字（可选）；E6-2-6、badge-css：徽章CSS（可选），值为CSS类名（className）：eh-block-badgelt|rt|lb|rb、eh-block-badge triangle lt|rt|lb|rb，其中lt|rt|lb|rb分别表示左上角|右上角|左下角|右下角；E6-2-7、badge-*：徽章HTML样式（可选），badge-后连接CSS属性和值，如badge-color=red, badge-background=cyan；E6-2-8、id：ID（可选），在文档范围内值要唯一；E6-2-9、data-*：数据属性值（可选）；E6-2-10、role：HTML增强属性，角色（可选），通常和aria-*属性结合使用；E6-2-11、aria-*：ARIA属性值（可选）。

[0099] 基于S2根据标签语法，实现标签对应的HTML模版生成逻辑，区块标签对应的HTML模板逻辑参考图10，区块标签对应的HTML模板如下：

[0100] E6-3、区块标签对应的HTML模板E6-3-1、如果badge-text不为空，则模版为：` <div class="eh-block ${blockCss}" ${blockproperty}${blockstyle}> ${strCenter} <span class="${blockBadgeCss}" ${blockbadgestyle}>${blockBadgeText} `E6-3-2、如果不满足E6-3-1条件，则模板为：` <div class="eh-block ${blockCss}" ${blockproperty}${blockstyle}> ${strCenter} `

[0101] E6-4、区块标签对应的HTML模板说明E6-4-1、blockCss：区块CSS类名属性；E6-4-2、blockProperty：区块自身属性；E6-4-3、blockStyle：区块HTML样式属性；E6-4-4、blockBadgeCss：区块徽章CSS类名属性；E6-4-5、blockBadgeStyle：区块徽章HTML样式属性；E6-4-6、blockBadgeText：区块徽章文字；E6-4-7、strCenter：区块内容，如果标签内容包含Markdown文本，需要将Markdown文本转化为HTML；

[0102] E6-5、区块标签解析渲染逻辑

[0103] E6-5-1、比如下面一段文本:::block(border=1px solid red, padding=10px, margin-bottom=16px,badge-text=示例, badge-css=eh-block-badge rt)带徽章示例::::::block(css=alert alert-warning, badge-text=示例, badge-css=eh-block-badge triangle rt, border=none)带徽章示例2::::::block(css=alert alert-danger)引入图片：@[image](src=https: / / cdnqiniu.benhuisen.com / test / 1.png, width=auto,height=60)引入文本：@[text](value=文本内容, color=blue):::

[0104] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据，结构化数据为：{'0': [{block: ':::block(border=1px solid red, padding=10px, margin-bottom=16px, badge-text=示例, badge-css=eh-block-badge rt)\n带徽章示例\n:::\n'},{ txt: '\n'},{block: ':::block(css=alert alert-warning, badge-text=示例, badge-css=eh-block-badge triangle rt, border=none)\n带徽章示例2\n:::\n'},{ txt: '\n'},{block: ':::block(css=alert alert-danger)\n引入图片： \n@[image](src=https: / / cdnqiniu.benhuisen.com / test / 1.png, width=auto,height=60px)\n\n引入文本： \n@[text](value=文本内容, color=blue)\n:::\n'}]}

[0105] 经过S4遍历结构化数据，调用HTML模板生成逻辑，得到生成的HTML： 带徽章示例 示例 带徽章示例2 示例 引入图片： 引入文本： 文本内容

[0106] 执行S4视图渲染及交互逻辑，得到图20所示的渲染后视图。

[0107] 实现上述效果用了392个字符，如果用HTML / JS / CSS语言实现上述效果，需要用到约2644个字符；可节省约85.2%的代码量。

[0108] 实施例7：构建表格标签表格标签（:::table(…)…:::）用于将CSV格式内容以表格形式呈现。该标签支持嵌入`文本(text)、图片(image|gif)`、`链接(link)`、`锚点(anchor)`、`标签(tag)`等子标签，可轻松实现插入图片、链接、锚点以及合并行 / 列等功能；通过引入加载器，可轻松实现表格分页、排序、搜索等功能。构建动态图标签具体实施方式如下：

[0109] 基于S1定义标签语法，具体包括S1.3表格标签、S1.5标签属性、S1.6标签属性规则，可定义标签语法以及标签属性介绍如下：

[0110] E7-1、表格标签语法:::table(border=是否显示边框，header=是否有表头，css=className, html样式, loader=表格加载器, search=是否支持搜索, page-size=一页数据条数, page-list=可选每页数据条数, sort-index=排序列索引, column-width=列宽度, merge-list=合并单元格规则列表, tr-css_{row}=className, tr-{css属性}_{row}=css属性值, td-css_{row}_{column}=className, td-{css属性}_{row}_{column}=css属性值)CSV格式数据:::

[0111] E7-2、表格标签属性介绍E7-2-1、:::table … :::：表格标识，被包围的部分为表格CSV格式内容；E7-2-2、(…)：括号中的内容由border、header、css、html样式、loader、search、page-size、page-list、sort-index、column-width、merge-list、tr-css_{row}、tr-{css属性}_{row}、td-css_{row}_{column}、td-{css属性}_{row}_{column}组成，各属性以",”隔开，属性和值以"=”相连；E7-2-3、border：是否显示边框（可选），值0（默认）|1。border=1表示显示边框；border=0表示无边框；E7-2-4、header：是否有表头（可选），值0（默认）|1。header=1表示有表头；header=0表示无表头；E7-2-5、css：表格CSS（可选），值为CSS类名（className），类名之间以空格隔开，推荐引用bootstrap5中的className，比如css=table table-hover；E7-2-6、html样式：表格HTML样式（可选），由逗号分隔的CSS属性和值组成，如：border=none, font-size=10等；E7-2-7、loader：表格加载器（可选），值空（默认）|bootstrap|layui。通过该属性，可实现表格分页、搜索、排序等交互效果。loader不为空时，search、page-size、page-list、sort-index有效；E7-2-8、search：是否支持搜索（可选），值0（默认）|1。search=1表示支持搜索；search=0表示不支持搜索；E7-2-9、page-size：当数据分页显示时，一页数据显示的条数（可选），值0（默认）|正整数；E7-2-10、page-list：当数据分页显示时，可选每页数据条数（可选），page-list=10-20-50表明支持每页展示10、20和50条；E7-2-11、sort-index：支持排序的列的索引（可选），sort-index=0-1-3表明第1、2、4列支持排序。

[0112] E7-2-12、column-width：列宽度（可选），column-width=0_120-2_80表明第1列宽度120px、第三列宽度90px。

[0113] E7-2-13、merge-list：合并单元格规则列表（可选）。格式：row_column_colspan_rowspan-…。其中，row、column为起始行、列索引，从0开始，colspan为横向合并单元格数量，rowspan为纵向合并单元格数量；例如merge-list=0_0_2_1-3_2_1_2表明第1行、1列横向合并两个单元格、纵向合并一个单元格（即不合并）；第4行、3列横向合并一个单元格、纵向合并两个单元格；E7-2-14、tr-css_{row}：表格行CSS（可选），值为CSS类名（className），类名之间以空格隔开。其中{row}值：空|rowIndex|startIndex~endIndex。例如：tr-css=text-danger表示所有行CSS为text-danger；tr-css_1=text-danger表示第2行CSS为text-danger；tr-css_0~3=text-danger表示第1~4行CSS为text-danger。

[0114] E7-2-15、tr-{css属性}_{row}：表格行CSS属性（可选），值为CSS属性值。其中{css属性}也叫style属性，如background-color等；{row}值：空|rowIndex|startIndex~endIndex。例如：tr-background-color=red表示所有行背景为红色；tr-background-color_1=red表示第2行背景为红色；tr-background-color_0~3=red表示第1~4行背景为红色。

[0115] E7-2-16、td-css_{row}_{column}：表格单元格CSS（可选），值为CSS类名（className），类名之间以空格隔开。其中{row}和{column}分别代表行和列的索引（从0开始），值均为：空|index|startIndex~endIndex。例如：td-css=text-danger表示所有单元格CSS为text-danger；td-css_1_2=text-danger表示2行3列的单元格CSS为text-danger；tr-css_0~3_1~2=text-danger表示1~4行2~3列的单元格CSS为text-danger。

[0116] E7-2-17、td-{css属性}_{row}_{column}：表格单元格CSS属性（可选），值为CSS属性值。其中{css属性}也叫style属性，如background-color等；{row}和{column}分别代表行和列的索引（从0开始），值均为：空|index|startIndex~endIndex。例如：td-background-color=red表示所有单元格背景为红色；td-background-color_1_2=red表示2行3列的单元格背景为红色；tr-background-color_0~3_1~2=red表示1~4行2~3列的单元格背景为红色。

[0117] 基于S2根据标签语法，实现标签对应的HTML模版生成逻辑，表格标签对应的HTML模板逻辑参考图11、图12和图13；如图11所示，当无加载器时（loader属性为空），会调用图12所示的csvToTable方法生成表格内层HTML；当有加载器时，需要先调用图13所示的constructData方法，将标签属性转化为第三方加载器需要的参数格式，表格标签对应的HTML模板如下：

[0118] E7-3、表格标签对应的HTML模板E7-3-1、无加载器模板` <table ${tableproperty}${tableborder} class="eh-table ${tableCss}" ${tablestyle} data-index="${dataIndex}"> ${tableHtml} `E7-3-2、加载器为bootstrap` <table ${tableproperty}${tableborder} class="eh-${tableLoader}-table${tableCss}" ${tablestyle} data-index="${dataIndex}">`E7-3-2、加载器为layui` <table ${tableproperty}${tableborder} class="eh-${tableLoader}-table${tableCss}" ${tablestyle} data-index="${dataIndex}" lay-filter="table_${dataIndex}">`

[0119] E7-4、表格标签对应的HTML模板说明E7-4-1、tableProperty：表格自身属性；E7-4-2、tableBorder：表格边框属性；E7-4-3、tableCss：表格CSS类名；E7-4-4、tableStyle：表格HTML样式属性；E7-4-5、dataIndex：表格索引；E7-4-6、tableHtml：表格内层HTML；E7-4-7、lay-filter：当加载器为layui时存在，表格唯一标识，其作用在于表格渲染、事件监听以及数据操作等多个方面。

[0120] E7-5、表格解析渲染逻辑E7-5-1、比如下面一段文本无加载器、有边框、有表头场景:::table(border=1, header=1)标题1,标题2,标题3内容1,内容2,内容3:::

[0121] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据，结构化数据为：{'0': [{ txt: '无加载器、有边框、有表头场景\n'},{table: ':::table(border=1, header=1)\n标题1,标题2,标题3\n内容1,内容2,内容3\n:::'}]}

[0122] 经过S4遍历结构化数据，调用HTML模板生成逻辑，得到生成的HTML：无加载器、有边框、有表头场景 标题1 标题2 标题3 内容1 内容2 内容3

[0123] 执行S4视图渲染及交互逻辑，得到图21所示的渲染后视图。

[0124] E7-5-2、为了实现S1.3.1以及S1.3.3所述效果，同E7-5-1步骤，无加载器条件下，表格标签内的CSV数据中包含图片、视频、锚点、链接、Markdown文本元素，以及属性包含设置单元格字体颜色、边框、合并单元格等，下面文本渲染后的视图如图22所示；:::table(css=table table-bordered table-hover small, border=red 2pxdashed, td-css_1_0~1=text-primary, merge-list=2_0_1_2-4_0_2_1)普通图片@[image](src=https: / / cdnqiniu.benhuisen.com / test / 1.png,height=30),GIF@[gif](src=https: / / cdnqiniu.benhuisen.com / test / 1.gif, width=30)图片链接：@[link](href=#anchor-200, title=点击跳转到右侧锚点),@[anchor](id=200, title=锚点, show=title)合并行,单元格样式-,-合并列,-Markdown**字体加粗**,Markdown[链接](http: / / www.baidu.com)"插入视频@[video](src=https: / / www.runoob.com / try / demo_source / movie.mp4,preload=true, width=auto, height=auto, poster=https: / / cdnqiniu.benhuisen.com / test / 1.png, width=130, height=130)",-:::

[0125] E7-5-3、以下实施例为加载器（loader）为bootstrap的场景，目的是为了实现S1.3.3以及S1.3.4所述效果：

[0126] 基于S4.7如公式数据、图表数据、以及具备交互性或需要二次渲染的数据时，需要预先静态或动态加载对应的JS / CSS所述，为节省内存以及带宽，优选动态加载bootstrap-table所需的JS / CSS；完成动态加载后，执行S4所述的视图渲染及交互逻辑；如图11所示，当加载器为bootstrap时，会需要先调用图13所示的constructData方法构建bootstrap-table所需的参数格式；并返回E7-3-2所述的表格HTML模板：` <table ${tableproperty}${tableborder} class="eh-${tableLoader}-table${tableCss}" ${tablestyle} data-index="${dataIndex}">`接着执行S4.6，进行视图的初步渲染；视图初步渲染结束后，执行S4.7所述的视图二次渲染；二次渲染后，表格将具备E7-2所述的各属性对应的样式效果，二次渲染逻辑参考图14；表格的翻页、搜索、排序等交互效果，已封装在bootstrap-table.min.js文件中并已动态加载，所以表格将具备翻页、搜索、排序等交互效果。

[0127] E7-5-3-1：如下文本:::table(loader=bootstrap, header=1, search=1, page-size=2, sort-index=0-2, page-list=4-19, column-width=0_120-2_240)标题1,标题2,标题3内容1,内容2,内容3内容4,内容5,内容6内容7,内容8,内容9内容10,内容11,内容12内容13,内容14,内容15:::

[0128] 参数说明loader=bootstrap：加载器为bootstrap；header=1：有表头；search=1：支持搜索；page-size=2：每页数据条数为2；sort-index=0-2：第1、3列支持排序；page-list=4-19：页码下拉菜单分别为4和19条；column-width=0_120-2_240：设置第1列宽度120px，第3列宽度240px。

[0129] 渲染效果如图23所示。

[0130] E7-5-3-2：如下文本:::table(loader=bootstrap, header=1, page-size=6, merge-list=0_0_2_1-1_1_1_2, tr-background-color_2~3=#0CC, td-css_1~2_1~2=text-primary)标题1,标题2,标题3内容1,内容2,内容3内容4,内容5,内容6内容7,内容8,内容9内容10,内容11,内容12内容13,内容14,内容15:::

[0131] 参数说明loader=bootstrap：加载器为bootstrap；header=1：有表头；search=1：支持搜索；page-size=6：每页数据条数为6；merge-list=0_0_2_1-1_1_2_1：代表从第1行1列个单元格开始，横向合并两个单元格；从第2行2列个单元格开始，纵向合并两个单元格；tr-background-color_2~3=#0CC：设置第3、4行背景颜色为#0CCtd-css_1~2_1~2=text-primary：设置第2~3行以及第2~3列的单元格字体CSS类名为text-primary。

[0132] 渲染效果如图24所示。

[0133] 结合上述实施例，下面表格为使用表格标签与HTML / JS / CSS在代码量上的对比： 编号 表格标签字符数 HTML / JS / CSS字符数（≈） 节约代码量（≈） E7-5-1 71 1090 93.5% E7-5-2 615 2235 72.5% E7-5-3-1 199 2568 92.3%

[0134] 以上实施例表明，使用表格标签可节省约72.5%~93.5%的代码量；使用表格标签的好处是，支持以行维度、单元格维度自由设定表格样式，同时支持指定区间设定，灵活度高；同时通过指定加载器，可以实现翻页、搜索、排序等交互效果；同时表格CSV格式数据，可在一定程度上降低数据的冗余，减少数据的存储空间，让数据的迁移更便捷。

[0135] 实施例8：构建轮播标签轮播标签（:::carousel(…)…:::）用于循环浏览一系列内容，轮播标签中可插入图片`@[image](…)`、视频`@[video](…)`、HTML代码等。构建轮播标签具体实施方式如下：

[0136] 基于S1定义标签语法，具体包括步骤S1.4 组件标签、S1.5标签属性、S1.6标签属性规则，可定义标签语法以及标签属性介绍如下：

[0137] E8-1、轮播标签语法:::carousel(css=className, html样式, theme=主题, anim=动画, interval=间隔时间, indicator=是否显示指示器, control=是否显示控制器, caption-title-{index}=字幕标题, caption-content-{index}=字幕内容, caption-css=字幕className, caption-{css属性}=字幕css属性值)轮播内容:::

[0138] E8-2、轮播标签属性介绍E8-2-1、:::carousel…:::：轮播标识；E8-2-2、(…)：括号中的内容由css、html样式、theme、anim、interval、indicator、control、caption-title-{index}、caption-content-{index}、caption-css、caption-{css属性}组成，各属性以",”隔开，属性和值以"=”相连；E8-2-3、css：轮播CSS（可选），值为CSS类名（className），类名之间以空格隔开；E8-2-4、html样式：轮播HTML样式（可选），由逗号分隔的CSS属性和值组成，如：border=none, font-size=10等；E8-2-5、theme 主题（可选），值light(默认)|dark，分别代表浅色模式|深色模式；E8-2-6、anim 动画（可选），值slide(默认)|fade，分别代表滑动切换|淡入淡出；E8-2-7、interval 一个项目自动播放到下一个项目的间隔时间（可选），值空(默认5秒)|0|正整数（毫秒），interval=0代表默认不自动播放；E8-2-8、indicator：是否显示指示器（可选），值0（默认）|1。indicator=1表示显示指示器；indicator=0表示隐藏指示器；E8-2-9、control：是否显示控制器（可选），值0（默认）|1。control=1表示显示控制器；control=0表示隐藏控制器；E8-2-10、caption-title-{index}：字幕标题（可选），其中index表示轮播项目的索引，从0开始。如果值中包含逗号,，需要用引号("或')括起来；E8-2-11、caption-content-{index}：字幕内容（可选），其中index表示轮播项目的索引，从0开始。如果值中包含逗号,，需要用引号("或')括起来；E8-2-12、caption-css：字幕CSS（可选），值为CSS类名（className）；E8-2-13、caption-{css属性}：字幕CSS属性（可选），值为CSS属性值。其中{css属性}也叫style属性，如background-color等。

[0139] 基于S2根据标签语法，实现标签对应的HTML模版生成逻辑，轮播标签对应的HTML模板逻辑以及HTML模板参考图15。

[0140] E8-3、轮播解析渲染逻辑

[0141] E8-3-1、比如下面一段文本:::carousel(indicator=1, control=1, anim=fade, caption-css=text-primary, caption-content-0=这是内容)@[image](src=https: / / cdnqiniu.benhuisen.com / test / b1.png)@[image](src=https: / / cdnqiniu.benhuisen.com / test / b2.png)@[image](src=https: / / cdnqiniu.benhuisen.com / test / b3.png):::

[0142] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据。

[0143] 经过S4遍历结构化数据，调用HTML模板生成逻辑，执行视图渲染及交互逻辑，得到渲染后的视图如图25所示。

[0144] E8-3-2、比如下面一段文本:::carousel(indicator=1, control=1, width=450, height=300, anim=slide, caption-font-size=18px, caption-title-0=图片类型, caption-title-1=视频类型, caption-title-2=HTML标签)@[image](src=https: / / cdnqiniu.benhuisen.com / test / b1.png, css=h-100)@[video](src=https: / / cdnqiniu.benhuisen.com / test / movie.mp4, preload=true, height=100%, object-fit=fill) 支持HTML标签内容 :::

[0145] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据。

[0146] 经过S4遍历结构化数据，调用HTML模板生成逻辑，执行视图渲染及交互逻辑。

[0147] 实现上述E8-3-1效果用了271个字符，如果用HTML / JS / CSS语言实现上述效果，需要用到约2127个字符；可节省约87.3%的代码量。

[0148] 向轮播标签中添加图片标签，即可实现自动轮播效果，同时支持点击指示器或控制器实现切换交互效果，如 E8-2轮播标签属性所述，除了可设定轮播主题、标题、动画、HTML样式外，还可以指定视频、HTML等（如E8-3-2实施例表明轮播元素）作为轮播元素，灵活度高。

[0149] 实施例9：构建手风琴标签手风琴标签（:::accordion(…)…:::）构建垂直折叠手风琴。标签中可放入文本、图片等以及HTML代码等，约定奇数行为标题栏，偶数行为内容栏；构建手风琴标签具体实施方式如下：

[0150] 基于S1定义标签语法，具体包括步骤S1.4 组件标签、S1.5标签属性、S1.6标签属性规则，可定义标签语法以及标签属性介绍如下：

[0151] E9-1、手风琴标签语法:::[accordion](css=className, html样式, flush=冲洗边框, expand-index=默认展开索引, bs-parent-index=关联索引, title-css_{index}=标题classNametitle-{css属性}_{index}=标题css属性值, content-css_{index}=内容className,content-{css属性}_{index}=内容css属性值)手风琴内容:::

[0152] E9-2、手风琴标签属性介绍E9-2-1、:::accordion…:::：手风琴标识；E9-2-2、(…)：括号中的内容由css、html样式、flush、expand-index、bs-parent-index、title-css_{index}、title-{css属性}_{index}、content-css_{index}、 content-{css属性}_{index}组成，各属性以",”隔开，属性和值以"=”相连；E9-2-3、css：轮播CSS（可选），值为CSS类名（className），类名之间以空格隔开；E9-2-4、html样式：轮播HTML样式（可选），由逗号分隔的CSS属性和值组成，如：border=none, font-size=10等；E9-2-5、flush 是否冲洗（隐藏）边框（可选），值0(默认)|1；E9-2-6、expand-index 默认展开的索引列表（可选），expand-index=0-1-3表明默认展开第1、2、4项；E9-2-7、bs-parent-index 与父元素关联的索引列表（可选），bs-parent-index=0-3表明当第1和4项为关闭状态，点击第1和4项后，第1和4项展开的同时，其他的展开项会折叠；E9-2-8、title-css_{index}：标题CSS（可选），值为CSS类名（className），类名之间以空格隔开。其中{index}值：空|itemIndex|startIndex~endIndex；E9-2-9、title-{css属性}_{index}：标题CSS属性（可选），值为CSS属性值。其中{css属性}也叫style属性，如background-color等。其中{index}值：空|itemIndex|startIndex~endIndex；E9-2-10、content-css_{index}：内容CSS（可选），值为CSS类名（className），类名之间以空格隔开。其中{index}值：空|itemIndex|startIndex~endIndex；E9-2-11、content-{css属性}_{index}：内容CSS属性（可选），值为CSS属性值。其中{css属性}也叫style属性，如background-color等。其中{index}值：空|itemIndex|startIndex~endIndex。

[0153] 基于S2根据标签语法，实现标签对应的HTML模版生成逻辑，手风琴标签对应的HTML模板逻辑以及HTML模板参考图16。

[0154] E9-3、手风琴解析渲染逻辑

[0155] E9-3-1、比如下面一段文本:::accordion(expand-index=0-1-3-4, bs-parent-index=0-1, content-background-color_1~2=red)@[text](value=标题1, color=red)@[text](value=内容1)@[text](value=标题2)@[text](value=内容2, css=text-primary h-100 w-100, display=block,background-color=cyan)@[text](value=标题3)@[text](value=内容3)@[text](value=标题4-HTML代码块) 支持HTML标签内容 @[text](value=标5-图片)@[image](src=https: / / cdnqiniu.benhuisen.com / test / 1.png,height=40):::

[0156] 参数说明：expand-index=0-1-3-4：默认展开第1、2、4、5项；bs-parent-index：与父元素关联的索引列表为0和1；content-background-color_1~2=red：第2和3项内容元素背景为红色。

[0157] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据。

[0158] 经过S4遍历结构化数据，调用HTML模板生成逻辑，执行视图渲染及交互逻辑，得到渲染后的视图如图26所示。

[0159] 实现上述E9-3-1效果用了490个字符，如果用HTML / JS / CSS语言实现上述效果，需要用到约3911个字符；可节省约87.5%的代码量。

[0160] 向手风琴标签中添加标题以及内容元素，即可实现手风琴折叠效果，如 E8-2手风琴标签属性所述，除了可设定内容样式，折叠效果外，还可以指定文本、图片、HTML等作为手风琴内容元素，灵活度高。

[0161] 实施例10：构建TAG标签TAG标签（@[tag](…)）用于设定其所在段落的HTML样式。将TAG标签置于文本中任意位置，通过设置TAG标签属性，即可控制该文本所在段落样式；构建TAG标签具体实施方式如下：

[0162] 基于S1定义标签语法，具体包括步骤S1.1行内标签、S1.5标签属性、S1.6标签属性规则，可定义标签语法以及标签属性介绍如下：

[0163] E10-1、TAG标签语法@[tag](title=标题, href=链接, colspan=合并列数, rowspan=合并行数, css=className, html样式, inner-property=内层标签属性, inner-css=内层标签className, inner-html样式=内层标签html样式)

[0164] TAG标签可放于Markdown文本、区块标签，表格标签等中，比如下面一段文本：**外层标签示例**@[tag](color=red, background-color=cyan)**内层标签示例**@[tag](color=red, inner-background-color=cyan, inner-padding=3px, inner-title=title):::block(css=alert alert-info)@[tag](color=red, inner-background-color=cyan !important, inner-padding=10px)**块级元素示例**@[tag](color=red, background-color=blue !important)## 块级元素示例::::::table(css=table table-bordered border-primary)合并行@[tag](rowspan=2),单元格样式@[tag](color=white, background-color=blue, title="单元格样式", css=p-3)temp合并列@[tag](colspan=2, css=text-danger):::

[0165] 经过S3所述的文档解析算法处理，将文档内容转化为结构化数据。

[0166] 经过S4的处理，得到图27所示的渲染后视图。

[0167] 通过上述E10-1实施例表明，TAG标签（@[tag](…)）可解决以下问题：

[0168] ①解决了Markdown语言不支持自定义样式的问题；②通过向S1.3.2所述的表格标签CSV格式数据中嵌入行内标签（@[tag](…)），可解决单元格级样式控制以及单元格合并控制的问题。

[0169] 以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1. A document writing method and system based on convenient writing and rich interactive rendering, comprising the following steps: S1. Define tag syntax, specifically to clarify tag name, type, attributes and behavior; S2. Implement the HTML template generation logic corresponding to the tag according to the tag syntax; S3, convert document content into structured data through document parsing algorithm; S4, traverse the structured data, call the HTML template generation logic, and execute the view rendering and interaction logic; The S1 tag types include: S1.

1. Inline tags: are used to display content within a line, including but not limited to text tags, image tags, link tags, anchor tags, audio tags, and video tags; among which: Text tags: used to embed and format text content in documents; Image tag: used to embed and display static image content in a document; Link tag: used to create hyperlinks in a document to jump between links within the document or between external links; Anchor tag: used to create an anchor in a document as the target of a link jump; Audio tag: used to embed and play audio content in a document; Video tag: used to embed and play video content in a document; S1.2, Block tags: used to combine other elements in the page to form an independent content container. It can wrap inline tags, text content, and structured text format content; S1.3, Table tag: The tag content is CSV format data. The function of this tag is to present the CSV format content in a table form; S1.4, component label: is to further encapsulate the functional module containing multiple elements, and form a reusable unified functional unit by integrating related elements, interactions and rendering effects, including but not limited to carousel labels and accordion labels; among them: Carousel tags: used to cycle through a series of content. Tags can be embedded with inline tags, text content, and structured text format content. Accordion tag: used to build a vertical folding accordion; including a title area and a content area. The title area is used to trigger the folding / expanding operation. The content area is associated with the title area and switches the display state in response to the operation. The S1 tag attributes and tag behaviors include: S1.

5. Tag attributes: including but not limited to self attributes, CSS class name attributes and HTML style attributes; S1.7, Tag behavior: contains third-party or custom JS / CSS scripts or JS / CSS code blocks declared in the document.

2. The document writing method and system based on convenient writing and rich interactive rendering according to claim 1, characterized in that: The inline tags in S1.1 are used to display the content presented in a line, and the format is: @[tag name](…), where the "…" in the tag brackets is the tag attribute (the same below). The inline tags include but are not limited to the following types: text tags (@[text](…)), image tags (@[image](…)), link tags (@[link](…)), anchor tags (@[anchor](…)), audio tags (@[audio](…)), video tags (@[video](…)); The block tag format in S1.2 is as follows: :::block(…) Block content ::: The table tag format in step 1.3 is as follows: :::table(…) CSV format data ::: The component tag format in step 1.4 is as follows: :::tag name(…) Tag content ::: The component tags include, but are not limited to, the following types: carousel tags (:::carousel(…)…:::), accordion tags (:::accordion(…)…:::).

3. The document writing method and system based on convenient writing and rich interactive rendering according to claim 2, characterized in that, The inline tags also include GIF tags (@[gif](…)); GIF tags are used to embed and display GIF animations and covers in the document, and by clicking the play button, the effect of controlling the play and pause of the GIF animation can be achieved.

4. The document writing method and system based on convenient writing and rich interactive rendering according to claim 1, characterized in that, The inline tags also include TAG tags; by placing the TAG tags at any position in the text and setting the TAG tag attributes, the style of the paragraph where the text is located can be controlled.

5. The document writing method and system based on convenient writing and rich interactive rendering according to claim 1, characterized in that The tag attributes of the table tags include at least one of the following control logics: ① Cell-level style control: Independent style definitions for single or multiple cells are achieved through tag attributes; ② Cell merging control: Independent style definitions for single or multiple cells are achieved through tag attributes; ③ Table dynamic effect control: Table paging, searching, and sorting dynamic effects are achieved through tag attributes.

6. The document writing method and system based on convenient writing and rich interactive rendering according to claim 4, characterized in that, When the text is the content of the table tag (i.e., CSV format data) and the TAG tag is placed in the CSV format data, table cell-level style control and cell merging control can be achieved by setting the TAG tag attributes.

7. The document writing method and system based on convenient writing and rich interactive rendering according to claim 1, wherein The S1 tag attribute rules are as follows: Each attribute is separated by a half-width comma (,), and the attribute and value are connected by an equal sign (=); for the CSS class name attribute, if there are multiple class names, each class name is separated by a space; the HTML style attribute is composed of CSS attributes and values separated by commas; when the attribute value unit is pixels (px), px can be omitted; when there is a half-width comma or half-width parenthesis in the attribute value, the text needs to be enclosed in half-width double quotes or half-width single quotes.

8. The document writing method and system based on convenient writing and rich interactive rendering according to claim 1, characterized in that The structured data format in step 3 is: {0: [], 1:[], …}, where 0 and 1 represent the first page and the second page respectively; the data format in [] is: [{txt: other data}, {block: block data}, {table: table data}, {tex: formula data}, {carousel: carousel data},…]; the data types in [] include block data, table data, formula data, and component data; txt includes, but is not limited to, inline tag data, chart tag data, Markdown data, ordinary text data, and HTML data.

9. The method according to claim 1, wherein Further includes: A visual editing function, that is, by setting the contenteditable attribute and event listening of the view, the document view can be directly operated to write the document.

10. A document processing system based on convenient writing and rich interactive rendering, characterized in that It includes the following modules: Label Definition Module: used to define label syntax, clarify label names, types, attributes, and behaviors; the label types include inline labels, block labels, table labels, and component labels; Template Generation Module: used to implement the HTML template generation logic corresponding to labels according to label syntax; Parsing Module: used to convert document content into structured data through a document parsing algorithm; Rendering Execution Module: used to traverse structured data, call the HTML template generation logic, and execute view rendering and interaction logic; Interactive Script Processing Module: used to load third-party or custom JS / CSS scripts, or JS / CSS code blocks declared in the document to support dynamic interactions of label behaviors.

Images