CN117115307A - Flutter-based rich text editing method, device, equipment and medium - Google Patents
Flutter-based rich text editing method, device, equipment and medium Download PDFInfo
- Publication number
- CN117115307A CN117115307A CN202311133169.XA CN202311133169A CN117115307A CN 117115307 A CN117115307 A CN 117115307A CN 202311133169 A CN202311133169 A CN 202311133169A CN 117115307 A CN117115307 A CN 117115307A
- Authority
- CN
- China
- Prior art keywords
- rich text
- content
- text editor
- rendering
- tree
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000009877 rendering Methods 0.000 claims abstract description 84
- 238000004458 analytical method Methods 0.000 claims abstract description 31
- 238000012544 monitoring process Methods 0.000 claims abstract description 28
- 238000013499 data model Methods 0.000 claims description 23
- 238000012986 modification Methods 0.000 claims description 20
- 230000004048 modification Effects 0.000 claims description 20
- 238000006243 chemical reaction Methods 0.000 claims description 9
- 230000007246 mechanism Effects 0.000 claims description 7
- 230000000694 effects Effects 0.000 claims description 6
- 230000005540 biological transmission Effects 0.000 claims description 4
- 238000000605 extraction Methods 0.000 claims description 3
- 238000001514 detection method Methods 0.000 abstract description 6
- 230000006870 function Effects 0.000 description 8
- 230000008859 change Effects 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 4
- 238000010276 construction Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 238000004364 calculation method Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000005096 rolling process Methods 0.000 description 2
- 238000007792 addition Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/203—Drawing of straight lines or curves
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- General Engineering & Computer Science (AREA)
- Document Processing Apparatus (AREA)
Abstract
The application belongs to the technical field of computers, and relates to a rich text editing method based on F & ltl & gt, which comprises the steps of monitoring a rich text editor in real time and judging whether the content in the rich text editor changes according to monitored content; when the content in the rich text editor changes, acquiring the content in the rich text editor as target content; analyzing the target content, and constructing an element tree based on the analysis result; determining layout information of the rich text editor based on the distribution of each element in the element tree; and finally, rendering by adopting the layout information to obtain a rendering result. The application also provides a rich text editing device, computer equipment and a storage medium based on the Flutter. The application realizes the rapid judgment of whether to generate new elements by the increment detection mode, and further adopts the element tree mode to update the layout, thereby improving the compatibility and editing efficiency of various rich texts.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a medium for editing rich text based on Flutter.
Background
Currently, existing Flutter rich text editor libraries typically only provide basic text style setting functions, such as font style, font size, color, etc. There are limitations in the advanced functions of inserting pictures, creating hyperlinks, etc., which need to be implemented by external plug-ins, which make them inefficient and at the same time less stable.
Disclosure of Invention
The embodiment of the application aims to provide a rich text editing method, a rich text editing device, computer equipment and a storage medium based on a Flutter, so as to solve the problems of low efficiency, low stability, and the like of the conventional Flutter rich text editor, such as picture insertion, hyperlink creation, and the like.
In order to solve the above technical problems, the embodiment of the present application provides a rich text editing method based on Flutter, which adopts the following technical scheme:
monitoring the rich text editor in real time, and judging whether the content in the rich text editor changes according to the monitored content;
if the content in the rich text editor changes, acquiring the content in the rich text editor as target content;
analyzing the target content to obtain each element contained in the target content, and constructing an element tree based on an analysis result;
Determining layout information of the rich text editor based on the distribution of each element in the element tree;
and rendering by adopting the layout information to obtain a rendering result.
Further, the step of monitoring the rich text editor in real time and judging whether the content in the rich text editor changes according to the monitored content includes:
establishing a data monitoring mechanism;
monitoring the content in the rich text editor in real time to obtain monitored content;
and performing increment comparison on the monitored content and the monitored content stored last time, if a new increment is generated, determining that the content in the rich text editor is changed in transmission, otherwise, determining that the content in the rich text editor is unchanged.
Further, the step of parsing the target content to obtain each element contained in the target content and constructing an element tree based on the parsing result includes:
creating a tree data model, wherein the tree data model is used for storing the content of the rich text editor, and the content of the editor is at least one of text, style, picture and link;
performing data type analysis on the content of the rich text editor to obtain an analysis result;
And combining each element in the analysis result by adopting the tree data model to form an element tree data structure, wherein the element tree data result is used for inquiring and editing the content of the rich text editor.
Further, the step of creating the tree data model includes:
creating a Node class of Node type for representing the nodes in the tree, wherein the Node class contains the attribute of the storage element information;
and adding other attributes for the node class, wherein the other attributes are used for representing the relation among the nodes, and forming the tree data model.
Further, the step of determining layout information of the rich text editor based on the distribution of each element in the element tree includes:
traversing the element tree from the root node, and calculating the position and the size of each node;
determining the position information of each node in the layout according to the width, the height, the row spacing and the text alignment mode of each element;
and for each node with child nodes, recursively calling a layout algorithm to update the position and the size of the child nodes, and obtaining the layout information of the rich text editor.
Further, the step of rendering by using the layout information to obtain a rendering result includes:
Traversing element trees from root nodes according to the layout information, and converting elements of each node into corresponding router widgets, wherein the router widgets are basic building blocks in a router frame;
converting the flutter Widget into a flutter Widget tree for describing the overall layout and appearance of the content to be rendered;
converting the flutter Widget tree into an Element tree, compiling the Element tree, calling a rendering class render object to inform a rendering engine to draw and layout elements, and generating a rendering result.
Further, after the step of rendering by using the layout information to obtain a rendering result, the method further includes:
performing real-time preview on the rendering result by adopting HTML Conversion API so as to determine whether modification is needed according to the effect of the real-time preview;
and when receiving the modification instruction, updating the layout information based on the modification instruction, and rendering again based on the updated layout information.
In order to solve the above technical problems, the embodiment of the present application further provides a rich text editing apparatus based on Flutter, which adopts the following technical scheme:
the monitoring module is used for monitoring the rich text editor in real time and judging whether the content in the rich text editor changes according to the monitored content;
The extraction module is used for acquiring the content in the rich text editor as target content if the content in the rich text editor changes;
the analysis module is used for analyzing the target content to obtain each element contained in the target content and constructing an element tree based on analysis results;
the layout module is used for determining layout information of the rich text editor based on the distribution of each element in the element tree;
and the rendering module is used for rendering by adopting the layout information to obtain a rendering result.
Further, the monitoring module includes:
the mechanism construction unit is used for establishing a data monitoring mechanism;
the real-time monitoring unit is used for monitoring the content in the rich text editor in real time to obtain monitored content;
and the increment comparison unit is used for performing increment comparison on the monitored content and the monitored content stored last time, if a new increment is generated, determining that the content in the rich text editor is changed in transmission, otherwise, determining that the content in the rich text editor is not changed.
Further, the parsing module includes:
the model creation unit is used for creating a tree data model which is used for storing the content of the rich text editor, wherein the content of the editor is at least one of text, style, picture and link;
The content analysis unit is used for carrying out data type analysis on the content of the rich text editor to obtain an analysis result;
and the structure construction unit is used for combining each element in the analysis result by adopting the tree data model to form an element tree data structure, and the element tree data result is used for inquiring and editing the content of the rich text editor.
Further, the model creation unit includes:
a Node class generating subunit, configured to create a Node class of a Node type, where the Node class is used to represent nodes in the tree, and the Node class includes an attribute of storage element information;
and the attribute adding subunit is used for adding other attributes for the node class, wherein the other attributes are used for representing the relation among the nodes to form the tree data model.
Further, the layout module includes:
a node information calculation unit for traversing the element tree from the root node, and calculating the position and size of each node;
a position information determining unit, configured to determine position information of each node in the layout according to the width, the height, the line spacing, and the text alignment manner of each element;
and the recursion iteration unit is used for recursively calling a layout algorithm for each node with the child nodes to update the position and the size of the child nodes so as to obtain the layout information of the rich text editor.
Further, the rendering module includes:
the traversing unit is used for traversing the element tree from the root node according to the layout information and converting the elements of each node into corresponding router widgets, wherein the router widgets are basic building blocks in a router frame;
the conversion unit is used for converting the router Widget into a router Widget tree and describing the overall layout and appearance of the content to be rendered;
and the rendering unit is used for converting the router Widget tree into an Element tree, compiling the Element tree, calling the render object to inform the rendering engine to draw and layout the elements, and generating a rendering result.
Further, the rich text editing apparatus based on Flutter further includes:
the real-time preview module is used for previewing the rendering result in real time by adopting HTML Conversion API so as to determine whether modification is needed according to the effect of the real-time preview;
and the immediate revising module is used for updating the layout information based on the modification instruction when receiving the modification instruction and re-rendering based on the updated layout information.
In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical schemes:
Monitoring the rich text editor in real time, and judging whether the content in the rich text editor changes according to the monitored content;
if the content in the rich text editor changes, acquiring the content in the rich text editor as target content;
analyzing the target content to obtain each element contained in the target content, and constructing an element tree based on an analysis result;
determining layout information of the rich text editor based on the distribution of each element in the element tree;
and rendering by adopting the layout information to obtain a rendering result.
In order to solve the above technical problems, an embodiment of the present application further provides a computer readable storage medium, which adopts the following technical schemes:
monitoring the rich text editor in real time, and judging whether the content in the rich text editor changes according to the monitored content;
if the content in the rich text editor changes, acquiring the content in the rich text editor as target content;
analyzing the target content to obtain each element contained in the target content, and constructing an element tree based on an analysis result;
Determining layout information of the rich text editor based on the distribution of each element in the element tree;
and rendering by adopting the layout information to obtain a rendering result.
To solve the above technical problem, an embodiment of the present application further provides a computer device, where the computer device includes a memory and a processor, where the memory stores computer readable instructions, and the processor implements the steps of the Flutter-based rich text editing method as described above when executing the computer readable instructions.
To solve the above technical problem, embodiments of the present application further provide a computer readable storage medium, where computer readable instructions are stored on the computer readable storage medium, where the computer readable instructions implement the steps of the Flutter-based rich text editing method as described above when executed by a processor.
Compared with the prior art, the embodiment of the application has the following main beneficial effects: whether new elements are generated or not is rapidly judged in an increment detection mode, and then layout updating is carried out in an element tree mode, so that compatibility and editing efficiency of various types of rich texts are improved.
Drawings
In order to more clearly illustrate the solution of the present application, a brief description will be given below of the drawings required for the description of the embodiments of the present application, it being apparent that the drawings in the following description are some embodiments of the present application, and that other drawings may be obtained from these drawings without the exercise of inventive effort for a person of ordinary skill in the art.
FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;
FIG. 2 is a flow chart of one embodiment of a Flutter-based rich text editing method in accordance with the present application;
FIG. 3 is a schematic diagram of an embodiment of a Flutter-based rich text editing apparatus according to the present application;
FIG. 4 is a schematic structural diagram of one embodiment of a computer device in accordance with the present application.
Detailed Description
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the applications herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having" and any variations thereof in the description of the application and the claims and the description of the drawings above are intended to cover a non-exclusive inclusion. The terms first, second and the like in the description and in the claims or in the above-described figures, are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.
In order to make the person skilled in the art better understand the solution of the present application, the technical solution of the embodiment of the present application will be clearly and completely described below with reference to the accompanying drawings.
As shown in fig. 1, a system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications, such as a web browser application, a shopping class application, a search class application, an instant messaging tool, a mailbox client, social platform software, etc., may be installed on the terminal devices 101, 102, 103.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablet computers, electronic book readers, MP3 players (Moving Picture Experts Group Audio Layer III, dynamic video expert compression standard audio plane 3), MP4 (Moving Picture Experts Group Audio Layer IV, dynamic video expert compression standard audio plane 4) players, laptop and desktop computers, and the like.
The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the terminal devices 101, 102, 103.
It should be noted that, the rich text editing method based on the Flutter provided by the embodiment of the present application is generally executed by a server/terminal device, and accordingly, the rich text editing device based on the Flutter is generally set in the server/terminal device.
It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
With continued reference to FIG. 2, a flowchart of one embodiment of a Flutter-based rich text editing method in accordance with the present application is shown. The rich text editing method based on the Flutter comprises the following steps:
step S201, monitoring the rich text editor in real time, and judging whether the content in the rich text editor changes according to the monitored content.
In this embodiment, the electronic device (for example, the terminal device shown in fig. 1) on which the rich text editing method based on Flutter operates may be connected by a wired connection manner or a wireless connection manner. It should be noted that the wireless connection may include, but is not limited to, 3G/4G/5G connection, wiFi connection, bluetooth connection, wiMAX connection, zigbee connection, UWB (ultra wideband) connection, and other now known or later developed wireless connection.
Specifically, the present embodiment adopts textmodifying controller class using Flutter to manage text content entered by the user. The user of the terminal device selects a font style, font size and color through the toolbar and applies it to the selected text. Text style settings, such as bold, italics, underline, etc., are implemented using the rich text editor component of Flutter. The user of the terminal device may also insert pictures and adjust their position and size. The create hyperlink function will allow the user to enter a link address and translate the selected text into a clickable hyperlink.
Furthermore, in the embodiment, text content input by a user is managed by using textmodifying controller, so that direct visual display of the input content is realized, and subsequent adjustment and modification are facilitated. The RichText API is adopted to realize the text style setting function, including the selection and application of font style, font size and color, so that the adjustment of the text style is convenient and rapid in real time. Text style settings, such as bold, italics, underline, etc., are implemented with the rich text editor component. The imagePicker API is adopted to realize the function of inserting pictures, and support the adjustment of the position and the size. Creating a hyperlink function using the URL host API allows the user to enter a link address and translate the selected text into clickable hyperlinks.
In step S202, if the content in the rich text editor changes, the content in the rich text editor is obtained as the target content.
Specifically, when the content in the rich text editor is monitored to change, the content in the rich text editor is considered to be updated, and at this time, the content in the rich text editor is acquired as target content.
It should be noted that the content changes include, but are not limited to: new additions, modifications, deletions, and flags, etc.
And step S203, analyzing the target content to obtain each element contained in the target content, and constructing an element tree based on the analysis result.
Specifically, after the target content is obtained, the target content is analyzed, each element contained in the target content is extracted, and then the element tree is constructed.
Step S204, determining layout information of the rich text editor based on the distribution of each element in the element tree.
Specifically, the tree structure in the Element tree is used for realizing the automatic layout and typesetting functions of rich text, the nodes of the tree represent text fragments or other elements, the hierarchical structure of the tree reflects the nesting relation among the elements, and the data nodes in the memory are directly converted into Element elements required by a rendering engine to be directly rendered and laid out, so that the automatic layout and typesetting with high performance, flexibility and customization is realized. In this embodiment, the layout information of the rich text editor is intelligently determined through the element tree, which is beneficial to improving the speed and accuracy of the layout.
Step S205, rendering is carried out by adopting the layout information, and a rendering result is obtained.
The method monitors the rich text editor in real time and judges whether the content in the rich text editor changes according to the monitored content; when the content in the rich text editor changes, acquiring the content in the rich text editor as target content; analyzing the target content, and constructing an element tree based on the analysis result; determining layout information of the rich text editor based on the distribution of each element in the element tree; and finally, rendering by adopting the layout information to obtain a rendering result. The method and the device realize quick judgment of whether new elements are generated or not in an increment detection mode, and further adopt an element tree mode to update the layout, so that compatibility and editing efficiency of various types of rich texts are improved.
In some optional implementations of this embodiment, in step 201, the rich text editor is monitored in real time, and whether the content in the rich text editor changes is determined according to the monitored content, where the electronic device may further perform the following steps:
establishing a data monitoring mechanism;
monitoring the content in the rich text editor in real time to obtain monitored content;
And performing increment comparison on the monitored content and the monitored content stored last time, if a new increment is generated, determining that the content in the rich text editor is changed in transmission, otherwise, determining that the content in the rich text editor is unchanged.
In this embodiment, the content change judgment is performed quickly by incremental comparison, so that the speed of content change judgment is improved, which is beneficial to improving the monitoring efficiency and ensuring timeliness.
In some optional implementations, the step of parsing the target content to obtain each element included in the target content, and constructing the element tree based on the parsing result includes:
creating a tree data model, wherein the tree data model is used for storing the content of a rich text editor, and the content of the editor is at least one of text, style, picture and link;
carrying out data type analysis on the content of the rich text editor to obtain an analysis result;
and forming an element tree data structure by adopting a tree data model and combining all elements in the analysis result, wherein the element tree data result is used for inquiring and editing the content of the rich text editor.
In the present embodiment of the present invention,
in some alternative implementations, the step of creating the tree data model includes:
Creating a Node class of Node type for representing the nodes in the tree, wherein the Node class contains the attribute of the storage element information;
and adding other attributes for the node class, wherein the other attributes are used for representing the relation among the nodes to form a tree data model.
In the embodiment, the tree model is created, so that the content in the rich text editor is quickly formatted and stored, and the efficiency of subsequent layout is improved.
In some alternative implementations, the step of determining layout information for the rich text editor based on the distribution of the individual elements in the element tree includes:
traversing the element tree from the root node, and calculating the position and the size of each node;
determining the position information of each node in the layout according to the width, the height, the row spacing and the text alignment mode of each element;
and for each node with the child nodes, recursively calling a layout algorithm to update the position and the size of the child nodes to obtain the layout information of the rich text editor.
Specifically, the layout information includes, but is not limited to, parameters such as text size, line number, line height, and baseline position of each type element, style setting considering font size, line spacing, text alignment, and the like, position relevance of elements such as pictures, links, and the like. And judging whether to need to be displayed in a rolling way according to the content length of the editor and the size of the visible area, determining the content range displayed in the visible area, including text, pictures, links and other elements, dynamically updating the content display in the visible area according to the rolling position and the like.
In some alternative implementations, the step of rendering using the layout information to obtain a rendering result includes:
traversing the element tree from the root node according to the layout information, and converting the elements of each node into corresponding router widgets, wherein the router widgets are basic building blocks in a router frame;
converting the flutter Widget into a flutter Widget tree for describing the overall layout and appearance of the content to be rendered;
converting the flutter Widget tree into an Element tree, compiling the Element tree, calling a rendering class render object to inform a rendering engine to draw and layout elements, and generating a rendering result.
Specifically, according to the calculated layout information, traversing Element Tree from a root node, converting elements of each node into corresponding Flutter widgets, wherein the Flutter widgets are basic building blocks in a Flutter frame, converting the Flutter widgets into Flutter widgets to describe the overall layout and appearance of the content to be rendered, further converting the Flutter widgets into Element trees, wherein the elements are actual rendering objects of the Flutter widgets, directly interact with an underlying rendering engine and are responsible for managing rendering and layout, compiling the Element trees and calling a rendering class render object to inform the rendering engine of drawing and layout of the elements, and accordingly rendering the latest rich text content on a screen. Therefore, quick layout and rendering are realized, and rendering efficiency is improved.
In the embodiment, the rendering efficiency is improved through rapid conversion and rendering of the layout.
In some optional implementations, after the step of rendering with the layout information to obtain a rendering result, the method further includes:
performing real-time preview on the rendering result by adopting HTML Conversion API so as to determine whether modification is needed according to the effect of the real-time preview;
when the modification instruction is received, the layout information is updated based on the modification instruction, and rendering is performed again based on the updated layout information.
Specifically, the embodiment adopts a real-time preview function, that is, in the editing process, the user can view the edited text effect at any time. The rich text editor will support exporting the edited text content as HTML or other common rich text formats so that the user can conveniently use the edited text in other applications.
In this embodiment, by performing preview display, quick modification rendering is realized.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by computer readable instructions stored in a computer readable storage medium that, when executed, may comprise the steps of the embodiments of the methods described above. The storage medium may be a nonvolatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a random access Memory (Random Access Memory, RAM).
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the flowcharts of the figures may include a plurality of sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily being sequential, but may be performed in turn or alternately with other steps or at least a portion of the other steps or stages.
With further reference to fig. 3, as an implementation of the method shown in fig. 2, the present application provides an embodiment of a rich text editing apparatus based on Flutter, where the embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus may be specifically applied to various electronic devices.
As shown in fig. 3, the rich text editing apparatus 300 based on Flutter according to the present embodiment includes: a listening module 301, an extraction module 302, a parsing module 303, a layout module 304, and a rendering module 305, wherein:
The monitoring module 301 is configured to monitor the rich text editor in real time, and determine whether the content in the rich text editor changes according to the monitored content;
the extracting module 302 is configured to obtain the content in the rich text editor as the target content if the content in the rich text editor changes;
the parsing module 303 is configured to parse the target content to obtain each element included in the target content, and construct an element tree based on the parsing result;
a layout module 304, configured to determine layout information of the rich text editor based on a distribution of each element in the element tree;
and the rendering module 305 is configured to render with the layout information to obtain a rendering result.
In some optional implementations of this embodiment, the listening module 301 includes:
the mechanism construction unit is used for establishing a data monitoring mechanism;
the real-time monitoring unit is used for monitoring the content in the rich text editor in real time to obtain monitored content;
and the increment comparison unit is used for performing increment comparison on the monitored content and the monitored content stored last time, determining that the content in the rich text editor is changed when a new increment is generated, and determining that the content in the rich text editor is unchanged when the new increment is not generated.
In this embodiment, the content change judgment is performed quickly by incremental comparison, so that the speed of content change judgment is improved, which is beneficial to improving the monitoring efficiency and ensuring timeliness.
In some alternative implementations of the present embodiment, the parsing module 303 includes:
the system comprises a model creation unit, a tree data model and a storage unit, wherein the model creation unit is used for creating a tree data model, and the tree data model is used for storing the content of a rich text editor, wherein the content of the editor is at least one of text, style, picture and link;
the content analysis unit is used for carrying out data type analysis on the content of the rich text editor to obtain an analysis result;
the structure construction unit is used for combining each element in the analysis result by adopting the tree data model to form an element tree data structure, and the element tree data result is used for inquiring and editing the content of the rich text editor.
The method monitors the rich text editor in real time and judges whether the content in the rich text editor changes according to the monitored content; when the content in the rich text editor changes, acquiring the content in the rich text editor as target content; analyzing the target content, and constructing an element tree based on the analysis result; determining layout information of the rich text editor based on the distribution of each element in the element tree; and finally, rendering by adopting the layout information to obtain a rendering result. The method and the device realize quick judgment of whether new elements are generated or not in an increment detection mode, and further adopt an element tree mode to update the layout, so that compatibility and editing efficiency of various types of rich texts are improved.
In some optional implementations of the present embodiment, the model creation unit includes:
a Node class generating subunit, configured to create a Node class of a Node type, where the Node class is used to represent nodes in the tree, and the Node class includes an attribute of storage element information;
and the attribute adding subunit is used for adding other attributes for the node class, wherein the other attributes are used for representing the relation among the nodes to form a tree data model.
In the embodiment, the tree model is created, so that the content in the rich text editor is quickly formatted and stored, and the efficiency of subsequent layout is improved.
In some alternative implementations of the present embodiment, the layout module 304 includes:
a node information calculation unit for traversing the element tree from the root node, and calculating the position and size of each node;
a position information determining unit, configured to determine position information of each node in the layout according to the width, the height, the line spacing, and the text alignment manner of each element;
and the recursion iteration unit is used for recursively calling a layout algorithm for each node with the child nodes to update the positions and the sizes of the child nodes so as to obtain the layout information of the rich text editor.
In some alternative implementations of the present embodiment, the rendering module 305 includes:
the traversing unit is used for traversing the element tree from the root node according to the layout information and converting the elements of each node into corresponding router widgets, wherein the router widgets are basic building blocks in a router frame;
the conversion unit is used for converting the router Widget into a router Widget tree and describing the overall layout and appearance of the content to be rendered;
and the rendering unit is used for converting the router Widget tree into an Element tree, compiling the Element tree, calling a rendering class render object to inform a rendering engine to draw and layout the elements, and generating a rendering result.
In the embodiment, the rendering efficiency is improved through rapid conversion and rendering of the layout.
In some optional implementations of the present embodiments, the Flutter-based rich text editing apparatus further includes:
the real-time preview module is used for previewing the rendering result in real time by adopting HTML Conversion API so as to determine whether modification is needed according to the effect of the real-time preview;
and the immediate revising module is used for updating the layout information based on the modification instruction when receiving the modification instruction and rendering again based on the updated layout information.
In this embodiment, by performing preview display, quick modification rendering is realized.
In order to solve the technical problems, the embodiment of the application also provides computer equipment. Referring specifically to fig. 4, fig. 4 is a basic structural block diagram of a computer device according to the present embodiment.
The computer device 4 comprises a memory 41, a processor 42, a network interface 43 communicatively connected to each other via a system bus. It should be noted that only computer device 4 having components 41-43 is shown in the figures, but it should be understood that not all of the illustrated components are required to be implemented and that more or fewer components may be implemented instead. It will be appreciated by those skilled in the art that the computer device herein is a device capable of automatically performing numerical calculations and/or information processing in accordance with predetermined or stored instructions, the hardware of which includes, but is not limited to, microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASICs), programmable gate arrays (fields-Programmable Gate Array, FPGAs), digital processors (Digital Signal Processor, DSPs), embedded devices, etc.
The computer equipment can be a desktop computer, a notebook computer, a palm computer, a cloud server and other computing equipment. The computer equipment can perform man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch pad or voice control equipment and the like.
The memory 41 includes at least one type of readable storage medium including flash memory, hard disk, multimedia card, card memory (e.g., SD or DX memory, etc.), random Access Memory (RAM), static Random Access Memory (SRAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), programmable Read Only Memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the storage 41 may be an internal storage unit of the computer device 4, such as a hard disk or a memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 4. Of course, the memory 41 may also comprise both an internal memory unit of the computer device 4 and an external memory device. In this embodiment, the memory 41 is generally used to store an operating system and various application software installed on the computer device 4, such as computer readable instructions of the Flutter-based rich text editing method. Further, the memory 41 may be used to temporarily store various types of data that have been output or are to be output.
The processor 42 may be a central processing unit (Central Processing Unit, CPU), controller, microcontroller, microprocessor, or other data processing chip in some embodiments. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is configured to execute computer readable instructions stored in the memory 41 or process data, for example, execute computer readable instructions of the Flutter-based rich text editing method.
The network interface 43 may comprise a wireless network interface or a wired network interface, which network interface 43 is typically used for establishing a communication connection between the computer device 4 and other electronic devices.
The computer device provided in this embodiment may execute the above-described rich text editing method based on Flutter. The rich text editing method based on the Flutter here may be the rich text editing method based on the Flutter of each of the above embodiments.
In the embodiment, the rich text editor is monitored in real time, and whether the content in the rich text editor changes or not is judged according to the monitored content; when the content in the rich text editor changes, acquiring the content in the rich text editor as target content; analyzing the target content, and constructing an element tree based on the analysis result; determining layout information of the rich text editor based on the distribution of each element in the element tree; and finally, rendering by adopting the layout information to obtain a rendering result. The method and the device realize quick judgment of whether new elements are generated or not in an increment detection mode, and further adopt an element tree mode to update the layout, so that compatibility and editing efficiency of various types of rich texts are improved.
The present application also provides another embodiment, namely, a computer-readable storage medium storing computer-readable instructions executable by at least one processor to cause the at least one processor to perform the steps of the Flutter-based rich text editing method as described above.
In the embodiment, the rich text editor is monitored in real time, and whether the content in the rich text editor changes or not is judged according to the monitored content; when the content in the rich text editor changes, acquiring the content in the rich text editor as target content; analyzing the target content, and constructing an element tree based on the analysis result; determining layout information of the rich text editor based on the distribution of each element in the element tree; and finally, rendering by adopting the layout information to obtain a rendering result. The method and the device realize quick judgment of whether new elements are generated or not in an increment detection mode, and further adopt an element tree mode to update the layout, so that compatibility and editing efficiency of various types of rich texts are improved.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method according to the embodiments of the present application.
It is apparent that the above-described embodiments are only some embodiments of the present application, but not all embodiments, and the preferred embodiments of the present application are shown in the drawings, which do not limit the scope of the patent claims. This application may be embodied in many different forms, but rather, embodiments are provided in order to provide a thorough and complete understanding of the present disclosure. Although the application has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that modifications may be made to the embodiments described in the foregoing description, or equivalents may be substituted for elements thereof. All equivalent structures made by the content of the specification and the drawings of the application are directly or indirectly applied to other related technical fields, and are also within the scope of the application.
Claims (10)
1. The rich text editing method based on Flute r is applied to a rich text editor and is characterized by comprising the following steps of:
monitoring the rich text editor in real time, and judging whether the content in the rich text editor changes according to the monitored content;
if the content in the rich text editor changes, acquiring the content in the rich text editor as target content;
Analyzing the target content to obtain each element contained in the target content, and constructing an element tree based on an analysis result;
determining layout information of the rich text editor based on the distribution of each element in the element tree;
and rendering by adopting the layout information to obtain a rendering result.
2. The Flutter-based rich text editing method according to claim 1, wherein said step of monitoring said rich text editor in real time and judging whether the content in said rich text editor has changed according to the monitored content comprises:
establishing a data monitoring mechanism;
monitoring the content in the rich text editor in real time to obtain monitored content;
and performing increment comparison on the monitored content and the monitored content stored last time, if a new increment is generated, determining that the content in the rich text editor is changed in transmission, otherwise, determining that the content in the rich text editor is unchanged.
3. The method for rich text editing based on flutter according to claim 1, wherein the steps of parsing the target content to obtain each element contained in the target content, and constructing an element tree based on the parsing result comprise:
Creating a tree data model, wherein the tree data model is used for storing the content of the rich text editor, and the content of the editor is at least one of text, style, picture and link;
performing data type analysis on the content of the rich text editor to obtain an analysis result;
and combining each element in the analysis result by adopting the tree data model to form an element tree data structure, wherein the element tree data result is used for inquiring and editing the content of the rich text editor.
4. The Flutter-based rich text editing method of claim 3, wherein said creating a tree data model step comprises:
creating a Node class of Node type for representing the nodes in the tree, wherein the Node class contains the attribute of the storage element information;
and adding other attributes for the node class, wherein the other attributes are used for representing the relation among the nodes, and forming the tree data model.
5. The Flutter-based rich text editing method according to any one of claims 1 to 4, wherein said step of determining layout information of said rich text editor based on a distribution of individual elements in said element tree comprises:
Traversing the element tree from the root node, and calculating the position and the size of each node;
determining the position information of each node in the layout according to the width, the height, the row spacing and the text alignment mode of each element;
and for each node with child nodes, recursively calling a layout algorithm to update the position and the size of the child nodes, and obtaining the layout information of the rich text editor.
6. The Flutter-based rich text editing method of claim 1, wherein the step of rendering using the layout information to obtain a rendering result comprises:
traversing element trees from root nodes according to the layout information, and converting elements of each node into corresponding router widgets, wherein the router widgets are basic building blocks in a router frame;
converting the flutter Widget into a flutter Widget tree for describing the overall layout and appearance of the content to be rendered;
converting the flutter Widget tree into an Element tree, compiling the Element tree, calling a rendering class render object to inform a rendering engine to draw and layout elements, and generating a rendering result.
7. The Flutter-based rich text editing method according to claim 1, further comprising, after the step of rendering using the layout information to obtain a rendering result:
Performing real-time preview on the rendering result by adopting HTML Conversion API so as to determine whether modification is needed according to the effect of the real-time preview;
and when receiving the modification instruction, updating the layout information based on the modification instruction, and rendering again based on the updated layout information.
8. A Flutter-based rich text editing apparatus, comprising:
the monitoring module is used for monitoring the rich text editor in real time and judging whether the content in the rich text editor changes according to the monitored content;
the extraction module is used for acquiring the content in the rich text editor as target content if the content in the rich text editor changes;
the analysis module is used for analyzing the target content to obtain each element contained in the target content and constructing an element tree based on analysis results;
the layout module is used for determining layout information of the rich text editor based on the distribution of each element in the element tree;
and the rendering module is used for rendering by adopting the layout information to obtain a rendering result.
9. A computer device comprising a memory having stored therein computer readable instructions which when executed by the processor implement the steps of the Flutter-based rich text editing method of any of claims 1 to 7.
10. A computer readable storage medium having stored thereon computer readable instructions which when executed by a processor implement the steps of the Flutter-based rich text editing method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311133169.XA CN117115307A (en) | 2023-08-31 | 2023-08-31 | Flutter-based rich text editing method, device, equipment and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311133169.XA CN117115307A (en) | 2023-08-31 | 2023-08-31 | Flutter-based rich text editing method, device, equipment and medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117115307A true CN117115307A (en) | 2023-11-24 |
Family
ID=88801932
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311133169.XA Pending CN117115307A (en) | 2023-08-31 | 2023-08-31 | Flutter-based rich text editing method, device, equipment and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117115307A (en) |
-
2023
- 2023-08-31 CN CN202311133169.XA patent/CN117115307A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110717120B (en) | Webpage list display method and device | |
| CN112711418B (en) | Front-end interface layout method and device for multiple components, electronic equipment and storage medium | |
| CN113377373A (en) | Page loading method and device based on analysis engine, computer equipment and medium | |
| US11314757B2 (en) | Search results modulator | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| CN113032708A (en) | Code-free Web development system | |
| CN113283216A (en) | Webpage content display method, device, equipment and storage medium | |
| JP7309811B2 (en) | Data annotation method, apparatus, electronics and storage medium | |
| CN107451163B (en) | Animation display method and device | |
| CN113779235A (en) | Word document outline recognition processing method and device | |
| CN108664511B (en) | Method and device for acquiring webpage information | |
| CN115758018A (en) | Grid-based page layout method and device, computer equipment and storage medium | |
| CN117115307A (en) | Flutter-based rich text editing method, device, equipment and medium | |
| CN115587075A (en) | Layout file processing method and device, terminal equipment and storage medium | |
| CN115756692A (en) | Method for automatically combining and displaying pages based on style attributes and related equipment thereof | |
| CN115170700A (en) | Method for realizing CSS animation based on Flutter framework, computer equipment and storage medium | |
| CN114510908A (en) | Data export method and device, computer equipment and storage medium | |
| CN112988255B (en) | Data processing method, device and computer readable storage medium | |
| CN113849164A (en) | Data processing method and device, electronic equipment and memory | |
| CN113760281A (en) | Transition animation realization method and device, terminal equipment and storage medium | |
| CN112613287A (en) | Data list display method, device, equipment and storage medium | |
| CN113934959A (en) | Program preview method and device, computer equipment and storage medium | |
| CN116108814B (en) | Gantt chart processing method and device, computer equipment and storage medium | |
| CN114579031B (en) | Response method and device for sliding operation, server and storage medium | |
| US20220207092A1 (en) | Computer service for indexing threaded comments with pagination support |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |