Rich Text Editing Method, Apparatus, Device, and Computer-Readable Storage Medium

Abstract

The present application provides a rich text editing method, device and equipment. The method of the present application, based on a rich text editor framework configured with a rich text editor protocol, when starting the rich text editor, displays a rich text editing area on the rich text editing page, and creates a data model of the document content of the rich text editor based on the configured rich text editor protocol information; in response to an interaction operation in the rich text editing area, executes a command corresponding to the interaction operation to update the data model; creates a control tree according to the updated data model; creates a rendering tree according to the control tree; performs layout and drawing according to the rendering tree to update the display effect of the document content of the rich text editor. When applied to Flutter, based on a rich text editor framework configured with the Slate rich text editor protocol on Flutter, it can implement complex rich text editing capabilities based on Flutter.

Description

Technical Field

[0001] This application relates to computer technology, and in particular, to a rich text editing method, apparatus, and device. Background Art

[0002] Flutter is a mobile UI (User Interface) framework and an open-source SDK (Software Development Kit) for building cross-platform mobile APPs, which can quickly build high-quality user interfaces on Android and iOS systems.

[0003] Flutter itself does not have a rich text editor. The text input box Textfield provided by Flutter only supports the most basic text input and editing capabilities, and the native rich text display capabilities are relatively simple and do not have the rich text editing capabilities such as supporting custom expressions, themes, and ordered paragraphs. Summary of the Invention

[0004] This application provides a rich text editing method, apparatus, and device to solve the problem that the existing Flutter does not have the ability to support rich text editing.

[0005] On the one hand, this application provides a rich text editing method, including:

[0006] In response to starting the rich text editor, display a rich text editing area on the rich text editing page, and create a data model for the document content of the rich text editor based on the configured rich text editor protocol information;

[0007] In response to an interaction operation in the rich text editing area, execute the command corresponding to the interaction operation to update the data model;

[0008] Create a control tree according to the updated data model;

[0009] Create a rendering tree according to the control tree;

[0010] Perform layout and drawing according to the rendering tree to update the display effect of the document content of the rich text editor.

[0011] On the other hand, this application provides a rich text editing apparatus, including:

[0012] A startup module, configured to, in response to starting the rich text editor, display a rich text editing area on the rich text editing page, and create a data model for the document content of the rich text editor based on the configured rich text editor protocol information;

[0013] An interaction processing module, configured to execute a command corresponding to the interaction operation in response to an interaction operation within the rich text editing area, and update the data model;

[0014] A rendering module, configured to:

[0015] Create a control tree according to the updated data model;

[0016] Create a rendering tree according to the control tree;

[0017] Perform layout and drawing according to the rendering tree to update the display effect of the document content of the rich text editor.

[0018] On the other hand, the present application provides an electronic device, including: a processor, and a memory communicatively connected to the processor;

[0019] The memory stores computer-executable instructions;

[0020] The processor executes the computer-executable instructions stored in the memory to implement the rich text editing method described above.

[0021] On the other hand, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored, and when the computer-executable instructions are executed by a processor, they are used to implement the rich text editing method described above.

[0022] The rich text editing method, device and equipment provided by the present application are based on a rich text editor framework configured with a rich text editor protocol. When starting the rich text editor, a rich text editing area is displayed on the rich text editing page, and a data model of the document content of the rich text editor is created based on the configured rich text editor protocol information; in response to an interaction operation within the rich text editing area, a command corresponding to the interaction operation is executed to update the data model; a control tree is created according to the updated data model; a rendering tree is created according to the control tree; layout and drawing are performed according to the rendering tree to update the display effect of the document content of the rich text editor. When applied to Flutter, based on a rich text editor framework configured with the Slate rich text editor protocol on Flutter, complex rich text editing capabilities can be achieved based on Flutter. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] The accompanying drawings herein are incorporated into the specification and constitute a part of the specification, showing embodiments consistent with the present application, and are used together with the specification to explain the principles of the present application.

[0024] Figure 1 It is a schematic diagram of a rich text editor framework based on a rich text editor protocol provided by an exemplary embodiment of the present application;

[0025] Figure 2 Schematic diagram of the Slate data model provided by an exemplary embodiment of the present application;

[0026] Figure 3 Flowchart of the rich text editing method provided by an exemplary embodiment of the present application;

[0027] Figure 4 Example diagram of a document content provided by an exemplary embodiment of the present application;

[0028] Figure 5 Example diagram of the tree structure of a Slate data model provided by an exemplary embodiment of the present application;

[0029] Figure 6 Flowchart of the rich text editing method provided by another exemplary embodiment of the present application;

[0030] Figure 7 Schematic diagram of the relative positional relationship between the document content, the visible area, and the rendering buffer of a rich text editor provided by an exemplary embodiment of the present application;

[0031] Figure 8 Example diagram of a Widget tree provided by an exemplary embodiment of the present application;

[0032] Figure 9 Example diagram of a RenderObject tree provided by an exemplary embodiment of the present application;

[0033] Figure 10 Overall flowchart of the rich text editing method provided by an exemplary embodiment of the present application;

[0034] Figure 11 Schematic diagram of the structure of a rich text editing device provided by an exemplary embodiment of the present application.

[0035] Through the above-mentioned drawings, the clear embodiments of the present application have been shown, and there will be more detailed descriptions hereinafter. These drawings and textual descriptions are not intended to limit the scope of the concept of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. Detailed implementation manners

[0036] Here, the exemplary embodiments will be described in detail, and the examples are shown in the drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementation manners described in the following exemplary embodiments do not represent all implementation manners consistent with the present application. On the contrary, they are merely examples of the devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0037] First, the terms involved in this application are explained as follows:

[0038] Flutter: A mobile UI framework, which is an open-source SDK for building cross-platform mobile apps and can quickly build high-quality user interfaces on Android and iOS systems.

[0039] Slate js: An open-source rich text editing framework implemented in typescript.

[0040] Section: A paragraph in a rich text editor, separated by line breaks between each paragraph.

[0041] Element: A container node (Node) in a rich text editor. In this application, a paragraph in the rich text editor corresponds to an Element node.

[0042] Text: The smallest rendering node (Node) in a rich text editor.

[0043] In addition, the terms "first", "second", "third", etc. are only used for descriptive purposes and cannot be understood as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. In the description of the following embodiments, "a plurality" means more than two, unless otherwise specifically defined.

[0044] Regarding the problem that Flutter itself does not have a rich text editor, and the text input box Textfield provided by Flutter only supports the most basic text input and editing capabilities, and the native rich text display capabilities are relatively simple and do not have the rich text editing capabilities such as supporting custom expressions, themes, and ordered paragraphs, this application provides a rich text editor framework that configures a rich text editor protocol on Flutter. Exemplarily, taking the configuration of the Slate rich text editor protocol on Flutter as an example, as Figure 1 shown, the rich text editor framework may include: a protocol layer, an ability extension layer, a rendering layer, and a business layer.

[0045] Specifically, the protocol layer configures the Slate rich text editor protocol information. Based on the Slate rich text editor protocol, it mainly defines the protocol layer control component (Editor), the Slate data model (Data Model), the Slate command (Commond), the logic-related configuration (Config), the atomic operation (Operation), and the data model normalization logic (Normalizing), etc. Among them, the logic-related configuration (Config) can be customized, such as exception reporting parameters, reporting sampling rates, etc.

[0046] Exemplarily, in the Slate rich text editor protocol configured by the protocol layer, it includes the following three most basic Node node types: Editor, Element, and Text. Among them:

[0047] Editor: The Editor root node that contains the entire document data of the rich text editor.

[0048] Element: The Element container node that has semantics in the custom domain.

[0049] Text: The Text leaf node that contains the document text.

[0050] The Node nodes of the entire document content of the rich text editor form a Data Model similar to the Dom tree. Figure 2 It is a schematic diagram of the Slate data model provided by an exemplary embodiment of this application. As Figure 2 shown, the Editor node is the root node in the Slate data model of the document content. The Slate data model includes multiple Element container nodes such as Element(image) and Element(Paragraph), as well as Text leaf nodes. Each node has node attribute information (properties). Each Element node can have child (children) nodes and can also be a child node of another node.

[0051] At the same time, the protocol layer defines at least one of the following atomic operations (Opeartion): insert_node, insert_text, merge_node, move_node, remove_node, remove_text, set_node, set_selection, split_node. The protocol layer uses Operation as the minimum abstraction of the document. The result of each Slate command (Commond) call is to generate one or more Operations. Executing these Opeartions one by one to complete the update of the protocol layer Data Mode can obtain the new document content.

[0052] The ability extension layer defines tools such as the Monitor control module, as well as plugins (Plugin) that implement a series of basic capabilities. For example, the undo / redo ability is implemented based on the History plugin, and the serialization ability is implemented based on the Serialization plugin, etc. Among them, the Monitor control module is used to monitor and control internal error messages that occur during the operation of the rich text editor, and report parameter error messages for some external Commond calls, etc. The specific functions of the Monitor control module support customization.

[0053] The rendering layer includes components such as Editor, Controller, Render that implements the rendering of document content, and Decoration that implements the rendering of non-document content, to achieve the rich text rendering and display on the Flutter side, as well as capabilities such as rich text gesture interaction operations (such as clicking, long pressing, dragging, etc.), cursor drawing, Selection selection area drawing, copy, select all, paste Overlay operations, rendering-related configurations (Config), etc.; at the same time, according to the user's interaction operations, the rendering layer realizes the editing and display of rich text by calling the Commond command of the protocol layer. In addition, the rendering layer in the new framework also includes the functions of the original rendering layer in Flutter.

[0054] The rendering layer mainly converts the custom Node nodes in the Slate data model into a multi-Span (paragraph) rendering method of rich text according to the Slate data model (Data Model) of the protocol layer, defines the RenderEditorInlineBox multi-Node scenario, custom rendering, and interaction capabilities such as gesture clicking, long pressing, and dragging; customizes the underlying rendering logic and Selection selection, text Offset logic, etc., to achieve a selection ability indistinguishable from plain text, so as to support the what-you-see-is-what-you-get editing ability of custom emojis. The rendering layer needs to handle the conversion and rendering processing from the Data Model to the Widget tree (also known as the control tree) and the rendering tree, as well as a series of tasks such as cursor display, gesture interaction, Overlay menu, and synchronization with the Native of the platform system (iOS or Android system).

[0055] Exemplarily, a core class (such as it can be named MuralMultiRenderEditable) can be defined in the rendering layer, which mainly handles the layout management of multiple Element nodes in the Slate protocol, and processes the logic such as clicking, cursor, and Selection area drawing. The Element rendering interface can be abstractly defined in the RenderEditorInlineBox class to achieve the following functions:

[0056] 1. Process the multi-Element scenario, convert the gesture click operation information into a Point object, thereby setting the Selection (selection area), drawing the cursor, selection area, etc.;

[0057] 2. Obtain the line height at the specified position;

[0058] 3. Through the input Point object, obtain the offset of the cursor in the entire rich text document (Document);

[0059] 4. According to the input Point object, obtain the text area (TextRange) of the cursor word (such as a single word selected by double-clicking).

[0060] Optionally, an inline type Text Node rendering interface can also be abstractly defined in the RenderEditorTextBox class to implement the following functions:

[0061] 1. According to the cursor position (TextPosition), obtain the offset of the line (inlineBox) where the cursor is located relative to the Element;

[0062] 2. According to the cursor position (TextPosition), obtain the line height of the line where the cursor is located;

[0063] 3. According to the cursor position (TextPosition), obtain the text area (TextRange) of the word currently determined by the cursor;

[0064] 4. According to the currently selected text area (TextSelection) (which may select text in one or more lines), obtain the position information of the text area (TextBox) to be rendered within the selection area (Selection) relative to the entire rich text document (Document). For example, if the currently selected text area includes text in multiple lines, then within the selection area, the text in the same line forms a rectangular text area (TextBox), and the position information of each text area relative to the entire rich text document is returned.

[0065] The rendering layer implements the rendering implementation objects for each type of node, which are used to implement the custom capabilities required for rendering the corresponding nodes. Exemplarily, a paragraph in the document content corresponds to an Element of the Block type, and in the rendering layer of Flutter, it corresponds to a RenderBox object, which implements the rendering interface of the Element defined in the protocol layer based on the RenderEditorInlineBox class. Each inline type of Text Node corresponds to a RenderBox object in the rendering layer of Flutter, and implements the rendering interface of the inline type of Text Node defined in the protocol layer by implementing the RenderEditorTextBox class.

[0066] At the business layer, flexible custom capabilities are supported. Users can achieve rich rich text custom capabilities, such as customizing emoticons, themes, paragraphs, formats, etc., by customizing Nodes, Renderings, Plugins, and Normalizing.

[0067] The rich text editing method provided by this application is based on a rich text editor framework configured with a rich text editor protocol. When starting the rich text editor, a rich text editing area is displayed on the rich text editing page, and a data model of the document content of the rich text editor is created based on the configured rich text editor protocol information; in response to an interaction operation in the rich text editing area, the command corresponding to the interaction operation is executed to update the data model; according to the updated data model, a control tree is created; according to the control tree, a rendering tree is created; and layout and drawing are performed according to the rendering tree to update the display effect of the document content of the rich text editor. When applied to Flutter, based on a rich text editor framework configured with the Slate rich text editor protocol on Flutter, complex rich text editing capabilities can be achieved based on Flutter. When applied to other text editors that do not have rich text editing capabilities, complex rich text editing capabilities can also be achieved.

[0068] The rich text editing method provided by this application can be specifically applied to the product information publishing scenario of an e-commerce platform. A rich text editor with complex rich text editing capabilities is provided on the publishing page, providing a more open product information editing ability, giving users more room to play, allowing users to flexibly customize the product information to be published, and producing higher-quality content. In addition, the rich text editing method provided by this application can also be applied to other scenarios that require rich text editing. Here, the application scenarios are not specifically limited.

[0069] The following uses specific embodiments to elaborate in detail on the technical solution of this application and how the technical solution of this application solves the above technical problems. The following several specific embodiments can be combined with each other, and the same or similar concepts or processes may not be elaborated in some embodiments. The embodiments of this application will be described below in conjunction with the accompanying drawings.

[0070] Figure 3 The flowchart of the rich text editing method provided for an exemplary embodiment of this application. The rich text editing method provided in this embodiment can be specifically applied to an electronic device for rich text editing. The electronic device can be a mobile terminal such as a smart phone or a tablet computer, or a personal computer, a server, a cloud computing device, etc., and no specific limitation is made here.

[0071] As Figure 3 shown, the specific steps of this method are as follows:

[0072] Step S301, in response to starting the rich text editor, display a rich text editing area on the rich text editing page, and create a data model of the document content of the rich text editor based on the configured rich text editor protocol information.

[0073] In actual application, when the user needs to perform rich text editing, the rich text editor is started by operating such as opening the rich text editing page. When starting the rich text editor, a rich text editing area is displayed on the rich text editing page to display the document content edited by the user in the rich text editing area, and support the user to perform interactive operations of rich text editing in the rich text editing area, such as inputting text, deleting text, and gesture interactions such as clicking, long pressing, and dragging.

[0074] When starting the rich text editor, create a data model of the document content of the rich text editor based on the configured rich text editor protocol information.

[0075] Exemplarily, based on Figure 1 the rich text editor framework shown, the protocol layer has predefined and configured the Slate rich text editor protocol information, defined and configured the Slate data model, Slate Commond, Opeartion, Normalizing of data model standardization, etc. Based on the Slate rich text editor protocol information of the protocol layer, the Slate data model of the document content of the rich text editor can be created.

[0076] Exemplarily, a Slate data model of the document content of the rich text editor can be created based on the configured Slate rich text editor protocol information.

[0077] Step S302: In response to an interaction operation within the rich text editing area, execute the command corresponding to the interaction operation to update the data model.

[0078] In this step, the interaction operation within the rich text editing area refers to the interaction operations of the user for rich text editing in the rich text editing area displayed on the rich text editing page, such as input, click (such as clicking on menu controls like bold, adding underline, setting font color, etc.), double-click, long press, drag, etc., which are used to achieve rich text editing such as inputting text, deleting text, moving text, making text bold, setting font color, etc.

[0079] These interaction operations can trigger the invocation of the command corresponding to the interaction operation. By executing the command corresponding to the interaction operation, the update of the data model is achieved, thereby updating the document content.

[0080] Exemplarily, based on Figure 1 the rich text editor framework shown, the rendering layer mainly converts the custom Node nodes in the Slate data model into a multi-Span (paragraph) rendering method of rich text according to the Slate data model in the protocol layer, defines the RenderEditorInlineBox multi-Node scenario, custom rendering, and interaction capabilities such as gesture click, long press, drag, etc.; customizes the underlying rendering logic and Selection selection, text Offset logic, etc., to achieve a selection ability indistinguishable from plain text, thereby supporting the what-you-see-is-what-you-get editing ability of custom emojis.

[0081] Exemplarily, in this step, the interaction operation can trigger the invocation of the corresponding Slate command for the interaction operation. By executing the corresponding Slate command for the interaction operation, the update of the Slate data model is achieved, thereby updating the document content.

[0082] Step S303: Create a control tree according to the updated data model.

[0083] When the interaction operation causes changes to the document content, after updating the data model, create the corresponding control tree according to the updated data model, thereby converting the data model based on the rich text editor protocol into a control tree, so that the modified document content in the rich text editor can be rendered onto the screen according to the control tree.

[0084] Exemplarily, when an interaction operation causes a change in the document content, after updating the Slate data model, a Widget tree (i.e., a control tree) of Flutter is created according to the updated Slate data model, so as to convert the Slate data model based on the Slate rich text editor protocol into a Widget tree of Flutter, so that the modified document content in the rich text editor can be rendered onto the screen based on Flutter.

[0085] Step S304: Create a rendering tree according to the control tree.

[0086] After creating the control tree corresponding to the updated data model, create the rendering tree corresponding to the control tree, that is, the rendering tree corresponding to the updated document data.

[0087] Exemplarily, after creating the Widget tree corresponding to the updated Slate data model, create the rendering tree (i.e., the RenderObject tree) corresponding to the Widget tree, that is, the rendering tree corresponding to the updated document data.

[0088] Step S305: Perform layout and painting according to the rendering tree to update the display effect of the document content in the rich text editor.

[0089] After creating the rendering tree, perform layout and painting according to the rendering tree to render the updated document content onto the screen, so as to refresh the display effect of the document content in the rich text editor.

[0090] Based on the rich text editor framework configured with the rich text editor protocol, when the rich text editor is started in this embodiment, a rich text editing area is displayed on the rich text editing page, and a data model of the document content of the rich text editor is created based on the configured rich text editor protocol information; in response to an interaction operation in the rich text editing area, execute the command corresponding to the interaction operation to update the data model; create a control tree according to the updated data model; create a rendering tree according to the control tree; perform layout and painting according to the rendering tree to update the display effect of the document content in the rich text editor. Based on the rich text editor framework configured with the Slate rich text editor protocol on Flutter, complex rich text editing capabilities can be achieved based on Flutter.

[0091] Figure 6A flowchart of a rich text editing method provided for another exemplary embodiment of the present application. Based on the above method embodiments, based on the viewport and / or rendering buffer of the rich text editor, when the document content in the rich text editor changes, only the content within the viewport and / or within the rendering buffer is laid out and painted, rather than laying out and painting the entire document content of the rich text editor. When performing ultra-long text editing, the rendering performance of the rich text editor can be significantly improved.

[0092] In this embodiment, taking the configuration of the Slate rich text editor protocol on Flutter as an example, the method of rich text editing is described in detail and exemplarily. In other embodiments of the present application, the rich text editor protocol can be configured on other text editors that do not have the ability to edit rich text, and a similar method can be used to implement the function of rich text editing.

[0093] As Figure 6 shown, the specific steps of this method are as follows:

[0094] Step S601, in response to starting the rich text editor, display a rich text editing area on the rich text editing page, and create a Slate data model of the document content of the rich text editor based on the configured Slate rich text editor protocol information.

[0095] In practical applications, when a user needs to perform rich text editing, the rich text editor is started by operating such as opening the rich text editing page. When starting the rich text editor, a rich text editing area is displayed on the rich text editing page to display the document content edited by the user in the rich text editing area, and support the user to perform interactive operations of rich text editing within the rich text editing area, such as inputting text, deleting text, and gesture interactions such as clicking, long-pressing, and dragging.

[0096] When starting the rich text editor, based on the configured Slate rich text editor protocol information, create a Slate data model of the document content of the rich text editor.

[0097] Exemplarily, taking the rich text in the rich text editor as Figure 4 the rich text shown, this rich text contains two paragraphs. The first paragraph includes three text blocks with different attributes, the contents of which are "Qingqing Zijin", "Youyou Wo Xin", and "Dan Wei Jun Gu". The second paragraph is a quoted paragraph (with a "|" quotation mark at the beginning), containing a text block with the content of "Chenyin Zhijin". The Slate data model of this document content created based on the configured Slate rich text editor protocol information can be as follows:

[0098]

[0099]

[0100] Figure 4 The Slate data model of the document content shown can be represented as Figure 5 the tree structure shown, including an Editor root node. Under the root node, there are two Element nodes. One of the Element nodes is an Element node of the Block type corresponding to the first paragraph in the document content, such as Figure 5 the first node from the left in the second layer from the top in []. Under this Element node, there are three inline Text nodes, such as Figure 5 the three Text leaf nodes from the left in the third layer from the top in [], corresponding to three text blocks with different attributes in the first paragraph of the document content. The three Text leaf nodes have different attribute information. The other Element node under the root node is a Quote-type Element node corresponding to the second paragraph in the document content, such as Figure 5 the second node from the left in the second layer from the top in [] (Quote). This Quote node represents an application paragraph. The paragraph header contains a vertical line decoration, and the body part is a nested Element node, that is, the Quote node has a child node which is an Element node of the Block type, such as Figure 5 the Element node in the third layer from the top in []. The Element child node of the Quote node has an inline Text node, such as Figure 5 the Text leaf node in the fourth layer from the top in [], corresponding to the text content in the second paragraph of the document content.

[0101] In this embodiment, the protocol layer configures the protocol information of the Slate rich text editor. Based on the Slate rich text editor protocol, Slate commands (Commond) and atomic operations (Operation) are configured.

[0102] Exemplarily, the protocol layer configures at least one of the following atomic operations (Opeartion): insert_node, insert_text, merge_node, move_node, remove_node, remove_text, set_node, set_selection, split_node.

[0103] The protocol layer uses atomic operations as the smallest abstraction of the document. The result of each Slate command call is to generate one or more atomic operations, which are arranged in a certain order to form an atomic operation sequence. By executing the atomic operations in the atomic operation sequence one by one, the update of the Data Mode in the protocol layer is completed, and the new document content can be obtained.

[0104] In response to an interaction operation in the rich text editing area, through steps S602 - S603, execute the Slate command corresponding to the interaction operation to update the Slate data model.

[0105] Step S602: In response to an interaction operation in the rich text editing area, call the Slate command corresponding to the interaction operation to generate an atomic operation sequence corresponding to the Slate command. The atomic operation sequence includes at least one atomic operation arranged in a specific order.

[0106] Among them, the interaction operation in the rich text editing area refers to the interaction operation of the user for rich text editing in the rich text editing area displayed on the rich text editing page, such as input, click (such as clicking on menu controls like bold, adding underline, setting font color, etc.), double - click, long - press, drag, etc., which are used to implement rich text editing such as inputting text, deleting text, moving text, making text bold, setting font color, etc.

[0107] When a user performs an interaction operation in the rich text editing area, call the Slate command corresponding to the interaction operation. When the Slate command is called, an atomic operation sequence corresponding to the Slate command is generated. The atomic operation sequence includes at least one atomic operation arranged in a specific order. By sequentially executing each atomic operation in the atomic operation sequence, the update of the Slate data model can be achieved, thereby updating the document content.

[0108] Step S603: According to the atomic operation sequence, execute at least one atomic operation corresponding to the Slate command to update the Slate data model.

[0109] After the atomic operation sequence corresponding to the Slate command, according to the arrangement order of the atomic operations in the atomic operation sequence, sequentially execute each atomic operation in the atomic operation sequence. When each atomic operation is executed, the Slate data model is updated.

[0110] Step S604: Perform a standardization process on the updated Slate data model.

[0111] After executing the atomic operation sequence of the Slate command corresponding to the interaction operation, the updated Slate data model can be normalized so that the normalized Slate data model meets a set of document standards for the document content of the pre-configured rich text editor. Once the document standards are established, any operation on the document should meet the requirement that the document before execution is based on a standard-compliant document and the document produced after execution is also standard-compliant.

[0112] Among them, the specific rules and document standards for normalizing the Slate data model can be configured and adjusted according to the actual application scenario, and no specific limitation is made here.

[0113] Exemplarily, normalizing the Slate data model may include performing a legal check on the Slate data model, such as merging adjacent texts.

[0114] In addition, if any change to the document content requires a full normalization of the Slate data model of the document content, the overhead is particularly large. Especially in the case of large documents, each operation of the user will be delayed in response. To reduce the scope of normalization processing and accelerate the execution efficiency of normalization processing, it is possible to mark which nodes are affected by the current operation, and the affected path is marked as a dirty path. For example, taking the Operation of deleting a node as an example, the ancestors of the deleted node will all be marked as dirty (the path of the deleted node does not need to be normalized because it has been deleted and thus does not need to be marked). Based on the recorded dirty path, the nodes in the Slate data model affected by the current operation are normalized, so as to ensure that the updated document data still meets the pre-configured document standards.

[0115] After the update of the Slate data model or the completion of the normalization processing, it can be notified to the Flutter rendering layer through the way of Notification, so that the rendering layer renders the current Slate data model to the screen through steps S605 - S607.

[0116] Exemplarily, the way through Notification means notifying the Flutter rendering layer by calling the notification interface of the Notifications API provided by the Flutter rendering layer, where the notification interface of the Notifications API is used to configure and display desktop notifications to the user.

[0117] Step S605: Determine the text information to be rendered according to the relative position information between the document content of the rich text editor and the visible area; create a Widget tree corresponding to the text information to be rendered according to the current Slate data model.

[0118] Among them, the visible area refers to the area within the rich text editing area that falls within the user's visible range. Usually, the visible area can be the rich text editing area. The text information to be rendered includes at least part of the data in the document content.

[0119] In practical applications, for the convenience of user operation, within the visible range of the screen of the rich text editing area, the rich text editing area can be used as the visible area of the rich text editor.

[0120] For ultra-long text editing, the entire document content cannot be displayed in the visible area of the rich text editor, only part of the content can be displayed, and the scope of the user's rich text editing is also limited to the part of the document content displayed in the visible area. In the traditional Flutter native text editing area (Text field), every change in the document content, such as input, deletion, gesture interaction, etc., will re-layout and paint the entire text editing area, resulting in poor performance and lack of smoothness.

[0121] In this embodiment, the visible area (Viewport) is introduced. When creating a Widget tree for rendering according to the updated Slate data model, based on the relative position information between the document content of the rich text editor and the visible area, the text information to be rendered is determined. This text information to be rendered is part of the data in the document content. Subsequently, only the text information to be rendered is rendered to the screen. Only when the document content of the rich text editor is relatively small, the entire document data will be rendered. In the ultra-long text editing scenario, the rendering performance of the rich text editor can be significantly improved.

[0122] In an optional implementation manner, in this step, according to the relative position information between the document content of the rich text editor and the visible area, the text information to be rendered is determined. Specifically, it can be implemented in the following manner:

[0123] According to the relative position information between the document content of the rich text editor and the visible area, determine the text paragraphs in which at least part of the content is within the visible area, and determine all the text information within the text paragraphs as the text information to be rendered.

[0124] In this implementation manner, when rendering the current Slate data model, only the document content within the current visible area in the rich text editing area needs to be rendered, which can improve the rendering performance.

[0125] In another alternative implementation, a rendering buffer may also be set. In this step, according to the relative position information between the document content of the rich text editor and the visible area, the text information to be rendered is determined. Specifically, it can be implemented in the following way:

[0126] According to the relative position information between the document content of the rich text editor and the visible area, as well as the configuration information of the rendering buffer, determine text paragraphs in which at least part of the content is within the visible area or the rendering buffer, and determine all the text information within the text paragraphs as the text information to be rendered.

[0127] Optionally, the rendering buffer may include a partial area before the visible area and a partial area after the visible area. The size of the rendering buffer can be configured and adjusted according to the needs of the actual application scenario, and no specific limitation is made here.

[0128] Exemplarily, Figure 7 shows the relative position relationship between the complete document content of the rich text editor, the visible area, and the rendering buffer. As Figure 7 shown, the widths of the visible area and the rendering buffer on the screen are both the same as the width of the document content (rich text editing area) on the screen. 2L represents the display height of the visible area, and the rendering buffer may include an area with a height of L above the visible area and an area with a height of L below the visible area. Here, L is a positive integer.

[0129] In this implementation, when rendering the current Slate data model, rendering the document content within the current visible area and the rendering buffer in the rich text editing area can further improve the rendering performance and shorten the rendering response time.

[0130] Step S606: Create a rendering tree according to the Widget tree.

[0131] After creating the Widget tree corresponding to the updated Slate data model, create the rendering tree (i.e., the RenderObject tree) corresponding to the Widget tree, that is, the rendering tree corresponding to the updated document data.

[0132] Exemplarily, according to the Widget tree, each Element object is created by calling the createElement() method on the Widget, forming an Element tree. Finally, the createRenderObject() method of the Element is called to create each render object renderObject, forming a RenderObject tree. An Element is an instantiated object of the Widget at a specific position in the UI tree. Most Elements have only a single renderObject, but there are also some Elements that have multiple child nodes, such as some classes that inherit from RenderObjectElement. Ultimately, the RenderObjects of all Elements form a tree, which is called the "RenderObject tree", i.e., the rendering tree.

[0133] Exemplarily, according to Figure 5 the Slate data model shown, based on the viewport, a Widget tree as shown in Figure 8 can be created. According to Figure 8 the Widget tree shown, a RenderObject tree as shown in Figure 9 can be created.

[0134] Step S607: Perform layout and painting according to the rendering tree to update the display effect of the document content in the rich text editor.

[0135] After creating the rendering tree, perform layout and painting according to the rendering tree, and render the updated document content onto the screen, thereby refreshing the display effect of the document content in the rich text editor.

[0136] In this embodiment, based on the rich text editor framework with the Slate rich text editor protocol configured on Flutter, the protocol layer continues some design principles of Slate js: supporting flexible and efficient customization capabilities, nested document models, clear hierarchical divisions, and complete unit tests. Based on the rich text editor framework with the Slate rich text editor protocol configured on Flutter, it supports custom configuration of at least one of the Node nodes, Element rendering interfaces, interaction operation types, Slate command information corresponding to interaction operations, rendering Widgets, and data model standardization logic in the text editor. The rich text display, editing, and operation protocols can be implemented based on the Slate protocol at the protocol layer; capabilities such as custom emojis, themes, and tags can be implemented at the rendering layer, and the emojis support what-you-see-is-what-you-get rendering, editing, Selection, etc.

[0137] Exemplarily, in response to a custom request, a custom configuration page is provided; according to the custom operations on the custom configuration page, custom configuration of at least one of nodes, Element rendering interfaces, interaction operation types, Slate command information corresponding to interaction operations, rendering Widgets, and data model standardization logic in the configured Slate rich text editor protocol information is implemented.

[0138] Exemplarily, taking custom emojis as an example, first define an emoji Element node and set the Inline and Void attributes to true:

[0139]

[0140]

[0141] After completing the customization of the Element and initial registration, when the user clicks on the custom emoji, the 'insert_node' method of the protocol is called:

[0142] final EmojiElement emoji = MuralCustomEmoji()..emojiUrl = '…';

[0143] muralController.insertNodes( <node>[emoji], move: true);

[0144] This realizes the ability expansion of inline custom emojis.

[0145] Exemplarily, Figure 10 is the overall flowchart of the rich text editing method based on Flutter provided by an exemplary embodiment of this application. Figure 10 Taking the operation of making text bold through an interactive operation as an example, the overall process of the rich text editing method based on Flutter is exemplarily described as follows. Figure 10 As shown, the specific steps are as follows:

[0146] Step S1: The user triggers the bold operation.

[0147] Among them, the user can make the selected text bold by clicking the bold button.

[0148] Step S2: The instance object of the rich text editor calls the bold method.

[0149] Exemplarily, the instance object of the rich text editor can be the Editor component, and the defined bold method can be called through Editor.addMark().

[0150] Step S3: Convert it into a bold command.

[0151] Exemplarily, Transforms.setNodes() can be used to convert the bold operation into the corresponding bold command.

[0152] When the bold command is executed, three atomic operations, split_node, set_selection, and set_node, as shown in 10, can be generated. Executing these three atomic operations in sequence can update the Slate data model.

[0153] Step S4: Execute split_node.

[0154] Step S5: Update the Slate data model.

[0155] Step S6: Execute set_selection.

[0156] Step S7: Update the Slate data model.

[0157] Step S8: Execute set_node.

[0158] Step S9: Update the Slate data model.

[0159] Step S10: Normalization processing.

[0160] In this step, the updated Slate data model is normalized.

[0161] Step S11: Notify the rendering layer.

[0162] In this step, the Flutter rendering layer is notified via Notification.

[0163] Step S12: Re-render.

[0164] In this step, a Widget tree is created based on the normalized Slate data model, a rendering tree is created based on the Widget tree, and layout and drawing are performed based on the rendering tree to update the display effect of the document content of the rich text editor.

[0165] This embodiment is based on a rich text editor framework configured with the Slate rich text editor protocol on Flutter. When the rich text editor is started, a rich text editing area is displayed on the rich text editing page, and a Slate data model of the document content of the rich text editor is created based on the configured Slate rich text editor protocol information; in response to an interaction operation in the rich text editing area, the Slate command corresponding to the interaction operation is executed to update the Slate data model; a Widget tree is created based on the updated Slate data model; a rendering tree is created based on the Widget tree; layout and drawing are performed based on the rendering tree to update the display effect of the document content of the rich text editor, thereby implementing complex rich text editing capabilities based on Flutter. Further, by introducing the viewport and / or rendering buffer of the rich text editor, when the document content in the rich text editor changes, only the content within the viewport and / or rendering buffer is laid out and drawn, rather than the entire document content of the rich text editor. When performing ultra-long text editing, the rendering performance of the rich text editor can be significantly improved.

[0166] Figure 11 It is a schematic structural diagram of a rich text editing device provided by an exemplary embodiment of the present application. The rich text editing device provided by the embodiments of the present application can execute the processing flow provided by the embodiments of the rich text editing method. As Figure 11 shown, the rich text editing device 110 includes: a startup module 111, an interaction processing module 112, and a rendering module 113.

[0167] Specifically, the startup module 111 is used to, in response to starting the rich text editor, display a rich text editing area on the rich text editing page, and create a data model of the document content of the rich text editor based on the configured rich text editor protocol information.

[0168] The interaction processing module 112 is used to, in response to an interaction operation within the rich text editing area, execute the command corresponding to the interaction operation and update the data model.

[0169] The rendering module 113 is used to:

[0170] Create a control tree according to the updated data model; create a rendering tree according to the control tree; perform layout and drawing according to the rendering tree to update the display effect of the document content of the rich text editor.

[0171] Optionally, the interaction processing module is further used to:

[0172] In response to an interaction operation within the rich text editing area, call the command corresponding to the interaction operation, generate an atomic operation sequence corresponding to the command, where the atomic operation sequence includes at least one atomic operation arranged in a specific order; according to the atomic operation sequence, execute at least one atomic operation corresponding to the command and update the data model.

[0173] Optionally, the interaction processing module is further used to:

[0174] After executing at least one atomic operation corresponding to the command and updating the data model, perform a standardization process on the updated data model.

[0175] Optionally, the rendering module is further used to:

[0176] Determine the text information to be rendered according to the relative position information between the document content of the rich text editor and the visible area, where the visible area is the rich text editing area, and the text information to be rendered includes at least part of the data in the document content; create a control tree corresponding to the text information to be rendered according to the updated data model.

[0177] Optionally, the rendering module is further used to:

[0178] Determine the text paragraphs whose at least part of the content is within the visible area according to the relative position information between the document content of the rich text editor and the visible area, and determine all the text information within the text paragraphs as the text information to be rendered.

[0179] Optionally, the rendering module is further used to:

[0180] Determine at least some text paragraphs whose content is within the visible area or the rendering buffer based on the relative position information between the document content of the rich text editor and the visible area, as well as the configuration information of the rendering buffer, and determine all the text information within the text paragraphs as the text information to be rendered.

[0181] Optionally, the rich text editing device may further include:

[0182] A custom configuration module for:

[0183] In response to a custom request, provide a custom configuration page; according to the custom operations on the custom configuration page, implement custom configuration of at least one of the nodes, container node rendering interfaces, interaction operation types, command information corresponding to interaction operations, rendering controls, and data model standardization logics in the configured rich text editor protocol information.

[0184] The device provided in the embodiments of the present application can be specifically used to execute the solutions provided in any of the above method embodiments, and the specific functions and achievable technical effects are not described in detail here.

[0185] The present application also provides an electronic device, including: a processor, and a memory communicatively connected to the processor, where the memory stores computer-executable instructions. The processor executes the computer-executable instructions stored in the memory to implement the solutions provided in any of the above method embodiments, and the specific functions and achievable technical effects are not described in detail here.

[0186] The embodiments of the present application also provide a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the solutions provided in any of the above method embodiments, and the specific functions and achievable technical effects are not described in detail here.

[0187] The embodiments of the present application also provide a computer program product, which includes: a computer program. The computer program is stored in a readable storage medium. At least one processor of the electronic device can read the computer program from the readable storage medium, and at least one processor executes the computer program to enable the electronic device to execute the solutions provided in any of the above method embodiments, and the specific functions and achievable technical effects are not described in detail here.

[0188] Those skilled in the art will readily think of other implementation schemes of the present application after considering the specification and practicing the invention disclosed herein. The present application is intended to cover any variations, uses, or adaptations of the present application, which follow the general principles of the present application and include the common general knowledge or conventional technical means in the technical field not disclosed in the present application. The specification and embodiments are only regarded as exemplary, and the true scope and spirit of the present application are pointed out by the following claims.

[0189] It should be understood that the present application is not limited to the exact structures described above and shown in the drawings, and various modifications and changes can be made without departing from its scope. The scope of the present application is only limited by the appended claims.< / node>

Claims

1. A rich text editing method, characterized in that, Comprising: A rich text editor framework based on the Slate rich text editor protocol configured on Flutter. In response to starting the rich text editor, a rich text editing area is displayed on the rich text editing page, and a Slate data model of the document content of the rich text editor is created based on the configured Slate rich text editor protocol information; In response to an interaction operation within the rich text editing area, execute the command corresponding to the interaction operation and update the Slate data model; Create a Widget control tree of Flutter according to the updated Slate data model; Create a RenderObject rendering tree according to the Widget control tree; Perform layout and drawing according to the RenderObject rendering tree to update the display effect of the document content of the rich text editor.

2. The method according to claim 1, characterized in that, The step of "In response to an interaction operation within the rich text editing area, execute the command corresponding to the interaction operation and update the Slate data model" includes: In response to an interaction operation within the rich text editing area, call the command corresponding to the interaction operation to generate an atomic operation sequence corresponding to the command, where the atomic operation sequence includes at least one atomic operation arranged in a specific order; According to the atomic operation sequence, execute at least one atomic operation corresponding to the command and update the Slate data model.

3. The method according to claim 2, characterized in that, After the step of "execute at least one atomic operation corresponding to the command and update the Slate data model", it further includes: Perform a normalization process on the updated Slate data model.

4. The method according to claim 1, characterized in that, The step of "create a Widget control tree of Flutter according to the updated Slate data model" includes: Determine the text information to be rendered according to the relative position information between the document content of the rich text editor and the visible area, where the visible area is the rich text editing area, and the text information to be rendered includes at least part of the data in the document content; Create a Widget control tree corresponding to the text information to be rendered according to the updated Slate data model.

5. The method according to claim 4, characterized in that, The step of "determine the text information to be rendered according to the relative position information between the document content of the rich text editor and the visible area" includes: Determine the text paragraphs with at least part of the content within the visible area according to the relative position information between the document content of the rich text editor and the visible area, and determine all the text information within the text paragraphs as the text information to be rendered.

6. The method according to claim 4, characterized in that, The step of "determine the text information to be rendered according to the relative position information between the document content of the rich text editor and the visible area" includes: Determine the text paragraphs with at least part of the content within the visible area or the rendering buffer according to the relative position information between the document content of the rich text editor and the visible area and the configuration information of the rendering buffer, and determine all the text information within the text paragraphs as the text information to be rendered.

7. The method according to any one of claims 1-6, characterized in that, It further includes: Provide a custom configuration page in response to a custom request; Customize at least one of the nodes, container node rendering interfaces, interaction operation types, command information corresponding to interaction operations, rendering controls, and data model standardization logic in the configured Slate rich text editor protocol information according to the custom operations on the customized configuration page.

8. A rich text editing device based on, characterized in that, Including: A startup module, which is used to display a rich text editing area on a rich text editing page in response to starting a rich text editor based on a rich text editor framework configured with the Slate rich text editor protocol, and create a Slate data model of the document content of the rich text editor based on the configured Slate rich text editor protocol information; An interaction processing module, which is used to execute the command corresponding to the interaction operation in response to the interaction operation in the rich text editing area and update the Slate data model; A rendering module, which is used for: Create a Widget control tree of Flutter according to the updated Slate data model; Create a RenderObject rendering tree according to the Widget control tree; Perform layout and drawing according to the RenderObject rendering tree to update the display effect of the document content of the rich text editor.

9. An electronic device, characterized in that, Including: A processor and a memory communicatively connected to the processor; The memory stores computer execution instructions; The processor executes the computer execution instructions stored in the memory to implement the method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, Computer execution instructions are stored in the computer-readable storage medium, and when the computer execution instructions are executed by the processor, they are used to implement the method according to any one of claims 1-7.

Images