A real-time rich text editing method based on markup language

Abstract

The present invention relates to a real-time rich text editing method based on markup language, using a webview, the text content is wrapped in a contenteditable div, and both display and editing are allowed; S2, after the user edits in a block, by listening to the input event, a brush function is triggered, the function obtains the textContent of the block, and then parses it word by word into AST through a regular expression; S3, matches the / ^\r? \n / ‑>softbreak type; S6, uses window.getSelection() to obtain the cursor position, adds the md‑expand class to the style where the cursor is located, and then uses CSS to display:inline the content of .md‑expand meta, so as to realize that the content of the original markup language is displayed at the cursor position. Advantages: the user writes a simple and easy-to-learn markup language, and displays the rich text format editor corresponding to the markup language in real time in the same interface.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a real-time rich text editing method based on markup language. Background Art

[0002] The current solution for generating rich text is mainly through a WYSIWYG interface, or the user writes source code and generates rich text content after program escape.

[0003] It is difficult for users of WYSIWYG editors (such as Word, RTF) to use a pure keyboard to complete texts with multiple formats (such as titles, text, tables, formulas, etc.). The texts produced by them are also difficult to distinguish between the "format" in style and the "format" in structure (for example, a large bold and centered sentence in style may be a normal paragraph with the style adjusted to large bold and centered, or it may be a title with the style adjusted to large bold and centered). Some editors even only have differences in style, not structure. Content generated by WYSIWYG editors often requires the installation of programs that use the same standard in order to be edited or even browsed (for example, to open and edit Word files, users must install software that supports Microsoft's relevant format standards or patented technologies).

[0004] Another way is to use source code (such as LaTeX, HTML, BBCode), which is then converted into rich text by a specific program. For example, writing HTML code <h1>title< / h1> , after being escaped by the browser program, it is displayed as a "title". This method requires users to have relevant knowledge and has high requirements for users. When writing and previewing, they cannot be seamlessly connected in the same interface. Summary of the invention

[0005] The present invention solves the above technical problems and provides a real-time rich text editing system based on markup language, which allows users to write a simple and easy-to-learn markup language and displays the rich text format corresponding to the markup language in real time in the same interface.

[0006] In order to solve the above technical problems, the technical solution provided by the present invention is: a real-time rich text editing method based on markup language, that is, a real-time rich text editing system based on Typora lightweight editor, comprising the following steps:

[0007] S1. Use a webview and wrap the text content in a contenteditable div to allow both display and editing.

[0008] S2. After the user edits in a block, a brush function is triggered by listening to the input event. The function obtains the textContent of the block and then parses it word by word into an AST (abstract syntax tree) through a regular expression.

[0009] S3, match / ^\r? \n / ->softbreak type, the remaining text matches / ^^\\([\\`*{}\[\]()#+\-.!_>$|<~"'&]) / ->escape type; the remaining text after matching matches / ^<\uE016?((([^>]+(@|:)[^>]+))|(\s*www\.[^>]+))\uE017?\uE019?> / ->Autolink type;

[0010] S4. Repeat this process for all supported inline styles until all texts are matched and an AST is obtained.

[0011] S5. Then implement a toHTML function to convert AST into HTML:

[0012] Include Softbreak-> <inline> <meta> \n< / inline>

[0013] Escape->If the character X is escaped, it will be transferred to <inline> <meta> \<di splay>X< / inline> ,

[0014] Autolink-> <inline> <meta> <<display type=”link”href=”linktarget”> link quote <meta> >< / inline> ;

[0015] S6. Use window.getSelection() to get the cursor position, add the md-expand class to the style where the cursor is located, and then use CSS to display the content of .md-expand meta with display:inline to display the content of the original markup language at the cursor position.

[0016] As an improvement, <meta> The part is hidden using display:none. <display>The part is displayed in the corresponding format.

[0017] As an improvement, the supported formats include: first-level heading, second-level heading, third-level heading, fourth-level heading, fifth-level heading, sixth-level heading, body paragraphs, quotes, ordered lists, unordered lists, task lists, line breaks, YAMLFrontMatters, automatic directories, hyperlinks, pictures, codes, inline formulas, bold, italics, code blocks (support automatic highlighting), formula blocks, highlights, superscripts, subscripts, footnotes, horizontal lines, flow charts, tables, and support for HTML-based extensions.

[0018] The present invention has the following advantages: Compared with the traditional WYSIWYG editor, the system of the present invention does not require the user to select the format using the mouse. The user does not need to care about specific styles. For example, the user does not need to make a paragraph of text bold, large, and centered to make it look like a title, and other computer programs do not need to compare complex styles to determine whether a large paragraph of text is a subtitle or a medium title. The rich text content written by the user is stored as plain text in the product of the present invention, and can be modified using any text editing software that comes with the system, without being restricted by the above disclosed content.

[0019] Compared with direct source code writing, users can preview, view, and modify rich text in real time just like using a WYSIWYG editor, without the need for an additional compiler or an additional preview window. At the same time, users who are not familiar with the markup language used by the system of the invention can also edit rich text from UI elements such as menus and right-clicks of the mouse, just like a WYSIWYG editor, without the need for a complicated learning process. DETAILED DESCRIPTION

[0020] The present invention is described in further detail below.

[0021] A real-time rich text editing method based on markup language comprises the following steps:

[0022] S1. Use a webview and wrap the text content in a contenteditable div to allow both display and editing.

[0023] S2. After the user edits in a block, a brush function is triggered by listening to the input event. The function obtains the textContent of the block and then parses it word by word into an AST (abstract syntax tree) through a regular expression.

[0024] S3, match / ^\r? \n / ->softbreak type, the remaining text matches / ^^\\([\\`*{}\[\]()#+\-.!_>$|<~"'&]) / ->escape type; the remaining text after matching matches / ^<\uE016?((([^>]+(@|:)[^>]+))|(\s*www\.[^>]+))\uE017?\uE019?> / ->Autolink type;

[0025] S4. Repeat this process for all supported inline styles until all texts are matched and an AST is obtained.

[0026] S5. Then implement a toHTML function to convert AST into HTML:

[0027] Include Softbreak-> <inline> <meta> \n< / inline>

[0028] Escape->If the character X is escaped, it will be transferred to <inline> <meta> \<di splay>X< / inline> < / display> ,

[0029] Autolink-> <inline> <meta> <<display type=”link”href=”linktarget”> link quote <meta> >< / inline> ;

[0030] S6. Use window.getSelection() to get the cursor position, add the md-expand class to the style where the cursor is located, and then use CSS to display the content of .md-expand meta with display:inline to display the content of the original markup language at the cursor position.

[0031] As an improvement, <meta> The part is hidden using display:none. <display>The part is displayed in the corresponding format.

[0032] As an improvement, the supported formats include: first-level heading, second-level heading, third-level heading, fourth-level heading, fifth-level heading, sixth-level heading, body paragraphs, quotes, ordered lists, unordered lists, task lists, line breaks, YAMLFrontMatters, automatic directories, hyperlinks, pictures, codes, inline formulas, bold, italics, code blocks (support automatic highlighting), formula blocks, highlights, superscripts, subscripts, footnotes, horizontal lines, flow charts, tables, and support for HTML-based extensions.

[0033] Embodiment 1

[0034] Take "emphasis" as an example. Its symbol language is **emphasis**, which will be displayed as HTML <strong> emphasize< / strong> , for users, the default is to see the words in bold and emphasized;

[0035] When a user inputs a paragraph of text containing **emphasis**, it will be displayed as a paragraph of text containing **emphasis** after escape, rather than the original paragraph of text containing **emphasis** source code;

[0036] But when the cursor moves to the **emphasized**, the markup language "**" will be fully displayed, making it convenient for users to change it. After the user deletes the *, the source code is changed to a paragraph of text containing *emphasized*;

[0037] Displayed as a paragraph of emphasized text to achieve a seamless transition from source code to final result.

[0038] In the specific implementation of the present invention, the content written by the user is converted into corresponding HTML content through real-time translation and displayed in the built-in HTML browser. The user does not need to care about the specific "style" of the text, such as the font, color, font size, alignment, etc., but only cares about which structure it belongs to in terms of content, such as whether it is the text or the title, and the specific style will be "attached" to it through the built-in CSS or the user-defined CSS file.

[0039] Because this editor uses a plain text-based markup language, subsequent modifications are not limited to a specific editor. Users can use built-in editors such as Vi or Notepad to open and edit, which is difficult to do with rich text file formats such as doc.

[0040] The present invention and its implementation methods are described above, and such description is not restrictive, and the actual structure is not limited thereto. In short, if ordinary technicians in the field are inspired by it, without departing from the purpose of the invention, they can design structures and embodiments similar to the technical solution without creativity, which should all fall within the protection scope of the present invention.< / display>

Claims

1. A real-time rich text editing method based on markup language, characterized in that: The following steps are involved: S1. Use a webview and wrap the text content in a contenteditable div to allow both display and editing. S2. After the user edits in a block, a brush function is triggered by listening to the input event. The function obtains the textContent of the block and then parses it word by word into AST through regular expressions. S3, match / ^\r? \n / ->softbreak type, the remaining text matches / ^^\\([\\`*{}\[\]()#+\-.!_>$|<~"'&]) / ->escape type; the remaining text after matching matches / ^<\uE016?((([^>]+(@|:)[^>]+))|(\s*www\.[^>]+))\uE017?\uE019?> / ->Autolink type; S4. Repeat the above steps for all supported ones until all the texts are matched and an AST is obtained. S5. Then implement a toHTML function to convert AST into HTML: Include Softbreak-> <inline> <meta> \n< / inline> Escape->If the character X is escaped, it will be transferred to <inline> <meta> \<di splay>X< / inline> , Autolink-> <inline> <meta> <<display type=”link”href=”link target”> link quote <meta> >< / inline> ; S6. Use window.getSelection() to get the cursor position, add the md-expand class to the style where the cursor is located, and then use CSS to display the content of .md-expand meta with display:inline to display the content of the original markup language at the cursor position.

2. The real-time rich text editing method based on markup language according to claim 1, characterized in that: <meta> The part is hidden using display:none. <display> The part is displayed in the corresponding format.< / display> 3. The real-time rich text editing method based on markup language according to claim 1, characterized in that: The supported formats include: first-level heading, second-level heading, third-level heading, fourth-level heading, fifth-level heading, sixth-level heading, body paragraphs, quotes, ordered lists, unordered lists, task lists, line breaks, YAML Front Matters, automatic directories, hyperlinks, pictures, codes, inline formulas, bold, italics, code blocks, formula blocks, highlights, superscripts, subscripts, footnotes, horizontal lines, flow charts, tables, and supports HTML-based extensions.