CN118153533A - Table data processing method and device - Google Patents

Abstract

The embodiment of the application provides a method and a device for processing table data, wherein the method comprises the following steps: a form edit event is determined in response to a form edit operation in a graphical user interface acting on the first application. And acquiring a data structure corresponding to the first rich text content in the rich text editor, and updating the data structure according to the table editing event. And displaying second rich text content corresponding to the updated data structure in the rich text editor according to the updated data structure, wherein the first rich text content and/or the second rich text content comprise tables. The technical scheme of the application can simply and effectively realize the function of supporting the table editing by the rich text editor so as to promote the comprehensiveness of the function of the rich text editor.

Description

Table data processing method and device

Technical Field

The present application relates to the field of terminal technology, and in particular to a table data processing method and device.

Background Art

With the development of smart terminals, when users record information through software such as memo, in addition to basic text, they also hope to record tables, pictures and other content containing more information. Therefore, they need to use rich text editors to edit rich text content.

A table is a data structure that can organize data in an orderly manner. If the rich text editor can support table processing, the practicality of the rich text editor can be effectively improved. However, current rich text editors are usually developed based on the system's native framework, and it is extremely difficult to implement table functions and corresponding complex interaction logic based on the system's native framework. Therefore, the rich text editors currently developed based on the system's native framework usually do not support table editing functions.

Summary of the invention

The embodiments of the present application provide a table data processing method and device, which are applied in the field of terminal technology.

In a first aspect, an embodiment of the present application provides a table data processing method, which is applied to a first application, wherein the first application includes a rich text editor. The method includes:

In response to a table editing operation performed in the graphical user interface of the first application, determining a table editing event;

Acquire a data structure corresponding to the first rich text content in the rich text editor, and update the data structure according to the table editing event;

According to the updated data structure, displaying second rich text content corresponding to the updated data structure in the rich text editor, wherein the first rich text content and/or the second rich text content includes a table;

The rich text editor is developed based on the web page view.

In this implementation, a rich text editor is developed through a web page view, so that the data structure of the rich text content in the rich text editor can be updated to display the edited rich text content in the rich text editor, wherein the rich text content before editing and/or the rich text content after editing may include tables, and the specific processing of table editing is completed by updating the data structure. Therefore, the rich text editor can simply and effectively support the table editing function to enhance the comprehensiveness of the functions of the rich text editor.

In some implementations, the graphical user interface of the first application includes a table insertion control;

The step of determining a table editing event in response to a table editing operation in a graphical user interface of the first application program comprises:

In response to a click operation on the table insert control, an adjustment control is displayed in the graphical user interface, wherein the adjustment control includes a plurality of pre-selected cells and/or text input boxes;

In response to a selection operation on the plurality of pre-selected cells, or in response to a confirmation operation on input content in the text input box, determining that the table editing event is an insert event, the selection operation and the confirmation operation are used to indicate a table size, and the insert event is used to indicate inserting a table corresponding to the table size in the rich text editor;

The table insert operation is the selection operation or the confirmation operation.

In this implementation, by providing the user with an adjustment control, the user can enter the table size in the adjustment control according to actual needs, and then the rich text editor can insert a table of the user-defined size accordingly to improve the flexibility of table processing.

In some implementations, updating the data structure according to the table editing event includes:

Determine the table size of the table to be inserted according to the insert event;

Generate a table data structure corresponding to the table to be inserted according to the table size, wherein the table data structure includes sub-data corresponding to each of the plurality of cells in the table to be inserted;

The table data structure is added to a target position in the data structure to obtain an updated data structure.

In this implementation, by generating a table data structure for the table to be inserted and adding the table data structure to the target position in the data structure, the inserted table can be updated to the data structure, and then rendered based on the updated data structure, thereby effectively inserting a table in the rich text editor.

In some implementations, the method further includes:

For a table displayed in the rich text editor, in response to a selection operation performed on the table, determining a selected cell corresponding to the selection operation;

Determine the position information of the selected box according to the selected cell corresponding to the selection operation, wherein the position information includes width, height and coordinate position;

The check box is rendered and displayed in the rich text editor according to the position information of the check box.

In this implementation, by displaying a selection box in the rich text editor according to the cell selected by the user, special display of the area selected by the user in the table can be effectively achieved, thereby effectively improving the diversity of table operations in the rich text editor.

In some implementations, a row selection control and a column selection control are displayed in the rich text editor;

The selection operation is a click operation on the row selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected row corresponding to the row selection control; or,

The selection operation is a click operation on the column selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected column corresponding to the column selection control.

In this implementation, by providing a row selection control and a column selection control in the rich text editor, selection of a row or a column can be achieved quickly and effectively.

In some implementations, the selection operation is a drag operation on the table;

The selected cells corresponding to the area selection operation are cells included in the drag range formed by the drag operation.

In this implementation, the cell selected by the user is determined through the dragging operation of the user, so that the cell required by the user in the table can be selected flexibly and effectively.

In some implementations, determining a table editing event in response to a table editing operation in a graphical user interface of the first application includes:

In response to a trigger operation acting on the selected cell, displaying at least one selection control, the selection control comprising at least one of the following: a delete control, a first add control, and a second add control;

In response to a click operation on a target selection control among the at least one selection control, the table editing event is determined to be a modification event.

In this implementation, at least one control is displayed in response to a trigger operation of a user on a selected cell, thereby providing the user with a variety of possible modification operations on the selected cell, thereby increasing the diversity of table interaction methods.

In some implementations, the selected cells are located in the same row in the table, and the first add control is used to indicate adding a row of cells above the row where the selected cells are located, the second add control is used to indicate adding a row of cells below the row where the selected cells are located, and the delete control is used to indicate deleting the cells in the row where the selected cells are located.

In some implementations, if the target selection control is the delete control, the modification event is a delete row event;

The updating of the data structure according to the table editing event comprises:

In the data structure, deleting the sub-data corresponding to each cell in the row where the selected cell is located, to obtain an updated data structure;

If the target selection control is the first add control, the modification event is a first add row event;

The updating of the data structure according to the table editing event comprises:

Adding sub-data corresponding to a row of cells at a first position in the data structure to obtain an updated data structure, wherein the first position is used to make the cells of the added row be located above the cells of the row where the selected cell is located;

If the target selection control is the second adding control, the modification event is a second adding row event;

The updating of the data structure according to the table editing event comprises:

Sub-data corresponding to a row of cells are added at a second position in the data structure to obtain an updated data structure, wherein the second position is used to make the cells of the added row located below the cells of the row where the selected cell is located.

In this implementation, for the three different events of deleting rows, adding rows above, and adding rows below, the corresponding positions in the data structure can be updated accordingly, so that the corresponding event operations can be effectively implemented in the table while ensuring the correctness of the original content in the table.

In some implementations, the selected cells are located in the same column in the table, and the first add control is used to indicate adding a column of cells to the left of the column where the selected cells are located, the second add control is used to indicate adding a column of cells to the right of the column where the selected cells are located, and the delete control is used to indicate deleting the cells in the column where the selected cells are located.

In some implementations, if the target selection control is the delete control, the modification event is a delete column event;

The updating of the data structure according to the table editing event comprises:

In the data structure, deleting the sub-data corresponding to each cell in the column where the selected cell is located, to obtain an updated data structure;

If the target selection control is the first adding control, the modification event is a first adding column event;

The updating of the data structure according to the table editing event comprises:

Adding sub-data corresponding to a column of cells at a third position in the data structure to obtain an updated data structure, wherein the third position is used to make the cells of the added column be located to the left of the cells in the column where the selected cell is located;

If the target selection control is the second adding control, the modification event is a second adding column event;

The updating of the data structure according to the table editing event comprises:

Add sub-data corresponding to a column of cells at a fourth position in the data structure to obtain an updated data structure, wherein the fourth position is used to make the cells of the added column to the right of the cells in the column where the selected cell is located.

In some implementations, the rich text editor includes a table editing plug-in and a data processing unit;

The updating of the data structure according to the table editing event comprises:

Determining, by means of the table editing plug-in, an update instruction corresponding to the table editing event;

The table editing plug-in sends the update instruction to the data processing unit, so that the data processing unit updates the data structure according to the update instruction.

In this implementation, for the three different events of deleting columns, adding columns on the left, and adding columns on the right, the corresponding positions in the data structure can be updated accordingly, so that the corresponding event operations can be effectively implemented in the table while ensuring the correctness of the original content in the table.

In a second aspect, an embodiment of the present application provides a table data processing device. The device includes:

a determination module, configured to determine a table editing event in response to a table editing operation in a graphical user interface of the first application;

An acquisition module, used for acquiring a data structure corresponding to the first rich text content in the rich text editor, and updating the data structure according to the table editing event;

a processing module, configured to display, in the rich text editor, second rich text content corresponding to the updated data structure according to the updated data structure, wherein the first rich text content and/or the second rich text content includes a table;

The rich text editor is developed based on the web page view.

In some implementations, the graphical user interface of the first application includes a table insertion control;

The determination module is specifically used for:

In response to a click operation on the table insert control, an adjustment control is displayed in the graphical user interface, wherein the adjustment control includes a plurality of pre-selected cells and/or text input boxes;

In response to a selection operation on the plurality of pre-selected cells, or in response to a confirmation operation on input content in the text input box, determining that the table editing event is an insert event, the selection operation and the confirmation operation are used to indicate a table size, and the insert event is used to indicate inserting a table corresponding to the table size in the rich text editor;

The table insert operation is the selection operation or the confirmation operation.

In some implementations, the processing module is specifically configured to:

Determine the table size of the table to be inserted according to the insert event;

Generate a table data structure corresponding to the table to be inserted according to the table size, wherein the table data structure includes sub-data corresponding to each of the plurality of cells in the table to be inserted;

The table data structure is added to a target position in the data structure to obtain an updated data structure.

In some implementations, the processing module is further configured to:

For a table displayed in the rich text editor, in response to a selection operation performed on the table, determining a selected cell corresponding to the selection operation;

Determine the position information of the selected box according to the selected cell corresponding to the selection operation, wherein the position information includes width, height and coordinate position;

The check box is rendered and displayed in the rich text editor according to the position information of the check box.

In some implementations, a row selection control and a column selection control are displayed in the rich text editor;

The selection operation is a click operation on the row selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected row corresponding to the row selection control; or,

The selection operation is a click operation on the column selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected column corresponding to the column selection control.

In some implementations, the selection operation is a drag operation on the table;

The selected cells corresponding to the area selection operation are cells included in the drag range formed by the drag operation.

In some implementations, the determining module is specifically configured to:

In response to a trigger operation acting on the selected cell, displaying at least one selection control, the selection control comprising at least one of the following: a delete control, a first add control, and a second add control;

In response to a click operation on a target selection control among the at least one selection control, the table editing event is determined to be a modification event.

In some implementations, the selected cells are located in the same row in the table, and the first add control is used to indicate adding a row of cells above the row where the selected cells are located, the second add control is used to indicate adding a row of cells below the row where the selected cells are located, and the delete control is used to indicate deleting the cells in the row where the selected cells are located.

In some implementations, if the target selection control is the delete control, the modification event is a delete row event;

The processing module is specifically used for:

In the data structure, deleting the sub-data corresponding to each cell in the row where the selected cell is located, to obtain an updated data structure;

If the target selection control is the first add control, the modification event is a first add row event;

The processing module is specifically used for:

Adding sub-data corresponding to a row of cells at a first position in the data structure to obtain an updated data structure, wherein the first position is used to make the cells of the added row be located above the cells of the row where the selected cell is located;

If the target selection control is the second adding control, the modification event is a second adding row event;

The processing module is specifically used for:

Sub-data corresponding to a row of cells are added at a second position in the data structure to obtain an updated data structure, wherein the second position is used to make the cells of the added row located below the cells of the row where the selected cell is located.

In some implementations, the selected cells are located in the same column in the table, and the first add control is used to indicate adding a column of cells to the left of the column where the selected cells are located, the second add control is used to indicate adding a column of cells to the right of the column where the selected cells are located, and the delete control is used to indicate deleting the cells in the column where the selected cells are located.

In some implementations, if the target selection control is the delete control, the modification event is a delete column event;

The processing module is specifically used for:

In the data structure, deleting the sub-data corresponding to each cell in the column where the selected cell is located, to obtain an updated data structure;

If the target selection control is the first adding control, the modification event is a first adding column event;

The processing module is specifically used for:

Adding sub-data corresponding to a column of cells at a third position in the data structure to obtain an updated data structure, wherein the third position is used to make the cells of the added column be located to the left of the cells in the column where the selected cell is located;

If the target selection control is the second adding control, the modification event is a second adding column event;

The processing module is specifically used for:

Add sub-data corresponding to a column of cells at a fourth position in the data structure to obtain an updated data structure, wherein the fourth position is used to make the cells of the added column to the right of the cells in the column where the selected cell is located.

In some implementations, the rich text editor includes a table editing plug-in and a data processing unit;

The processing module is specifically used for:

Determining, by means of the table editing plug-in, an update instruction corresponding to the table editing event;

The table editing plug-in sends the update instruction to the data processing unit, so that the data processing unit updates the data structure according to the update instruction.

In a third aspect, an embodiment of the present application provides a terminal device, which may also be referred to as a terminal, user equipment (UE), mobile station (MS), mobile terminal (MT), etc. The terminal device may be a mobile phone, a smart TV, a wearable device, a tablet computer (Pad), a computer with wireless transceiver function, a virtual reality (VR) terminal device, an augmented reality (AR) terminal device, a wireless terminal in industrial control, a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in smart grid, a wireless terminal in transportation safety, a wireless terminal in smart city, a wireless terminal in smart home, etc.

The terminal device comprises: a processor and a memory; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory, so that the terminal device executes the method of the first aspect.

In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program. When the computer program is executed by a processor, the method of the first aspect is implemented.

In a fifth aspect, an embodiment of the present application provides a computer program product, which includes a computer program. When the computer program is executed, the computer executes the method of the first aspect.

In a sixth aspect, an embodiment of the present application provides a chip, the chip including a processor, the processor being used to call a computer program in a memory to execute the method described in the first aspect.

It should be understood that the second to fifth aspects of the present application correspond to the technical solutions of the first aspect of the present application, and the beneficial effects achieved by each aspect and the corresponding feasible implementation methods are similar and will not be repeated here.

An embodiment of the present application provides a table data processing method and device, the method comprising: responding to a table editing operation in a graphical user interface acting on a first application, determining a table editing event. Obtaining a data structure corresponding to a first rich text content in a rich text editor, and updating the data structure according to a table editing event. According to the updated data structure, displaying a second rich text content corresponding to the updated data structure in the rich text editor, wherein the first rich text content and/or the second rich text content include a table. A rich text editor is developed through a web page view, so that the data structure of the rich text content in the rich text editor can be updated to display the edited rich text content in the rich text editor, wherein the rich text content before editing and/or the rich text content after editing may include a table, and the specific processing of the table editing is completed by updating the data structure, so that the rich text editor can simply and effectively support the table editing function to enhance the comprehensiveness of the functions of the rich text editor.

BRIEF DESCRIPTION OF THE DRAWINGS

FIG1 is a schematic diagram of the architecture of a rich text editor provided in an embodiment of the present application;

FIG2 is a first schematic diagram of an interface of a first application corresponding to a rich text editor provided in an embodiment of the present application;

FIG3 is a second schematic diagram of an interface of a first application corresponding to a rich text editor provided in an embodiment of the present application;

FIG4 is a flow chart of a table data processing method provided in an embodiment of the present application;

FIG5 is a second flowchart of the table data processing method provided in an embodiment of the present application;

FIG6 is a schematic diagram of an implementation of an insert table provided in an embodiment of the present application;

FIG. 7 is a flowchart of a third method for processing table data provided in an embodiment of the present application;

FIG8 is a schematic diagram of a method for determining a selection in a table according to an embodiment of the present application;

FIG9 is a second schematic diagram of an implementation of determining a selection in a table provided in an embodiment of the present application;

FIG10 is a third schematic diagram of an implementation of determining a selection in a table provided in an embodiment of the present application;

FIG11 is a fourth flowchart of the table data processing method provided in an embodiment of the present application;

FIG12 is a schematic diagram of a modification table provided in an embodiment of the present application;

FIG13 is a second schematic diagram of implementing a modification table provided in an embodiment of the present application;

FIG14 is a schematic diagram of the processing process of the table processing method provided in an embodiment of the present application;

FIG15 is a schematic diagram of the structure of a table data processing device provided in an embodiment of the present application;

FIG16 is a schematic diagram of the hardware structure of a terminal device provided in an embodiment of the present application.

DETAILED DESCRIPTION

In order to facilitate the clear description of the technical solutions of the embodiments of the present application, in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or explanations. Any embodiment or design described as "exemplary" or "for example" in the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way.

In the embodiments of the present application, "at least one" refers to one or more, and "more than one" refers to two or more. "And/or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and/or B can represent: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character "/" generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, a-b, a-c, b-c, or a-b-c, where a, b, c can be single or multiple.

It should be noted that the "at..." in the embodiment of the present application can be the instant when a certain situation occurs, or can be a period of time after a certain situation occurs, and the embodiment of the present application does not specifically limit this. In addition, the display interface provided in the embodiment of the present application is only an example, and the display interface can also include more or less content.

In order to better understand the technical solution of the present application, the relevant technologies involved in the present application are further introduced in detail below.

With the development of information technology, smart terminals are playing an increasingly important role in people's lives. When users have to-do items or events that need to be recorded, they tend to record the relevant content in applications such as memos. In addition to simple basic text, the content that users want to record may also include tables, pictures and other information. At this time, applications such as memos are required to have rich text editing functions.

A table is a data structure that can organize data in an orderly manner. If the processing of tables can be supported in a rich text editor, the practicality of the rich text editor can be effectively improved. However, current rich text editors are usually developed based on the system's native framework, and it is extremely difficult to implement table functions and corresponding complex interaction logic based on the system's native framework. Therefore, the current rich text editors developed based on the system's native framework usually do not support table editing functions.

For example, the memo built into the terminal devices of the current Android system lacks table-related operations, because it is very difficult to implement tables and the corresponding complex interaction logic based on the native framework of the Android system. Therefore, many of the system's built-in memos currently lack the function of editing tables, or do not support more complex table editing functions. And it is understandable that the above problems exist not only in the system's built-in memos, nor in the Android system. The lightweight rich text editors in various systems are similar. Due to the limitations of the system's native framework and the complexity of implementing table functions, it is difficult for rich text editors to implement table editing functions, which in turn leads to the lack of comprehensiveness of the rich text editor's functions.

Based on the technical problems in the related technology, the present application proposes the following technical concept: developing a rich text editor based on a web view (webview), wherein the webview technology can modify the display style of the rich text content in the rich text editor by modifying the data structure in the JSON (JavaScript Object Notation, JS object notation) format. Therefore, the rich text editor can simply and effectively support the table editing function, thereby effectively improving the comprehensiveness of the functions of the rich text editor.

Before introducing the table processing method provided by the present application, for example, you can first understand the relevant architecture of the rich text editor in conjunction with Figure 1. Figure 1 is a schematic diagram of the architecture of the rich text editor provided in an embodiment of the present application.

As shown in FIG. 1 , in the technical solution of the present application, a rich text editor product can be developed, and then the rich text editor product can be integrated into different terminal platforms.

In the example of Figure 1, the architecture of the rich text editor is introduced by taking the Android platform and the Windows platform as examples. Referring to Figure 1, it can be determined that the rich text editor in this embodiment can be used as an Android product in the Android platform and a desktop product in the Windows platform at the same time.

In a possible implementation, a rich text editor is usually integrated into an application, thereby providing a rich text editing function for the corresponding application. The following takes the Android-side memo and the PC-side memo as examples for illustration. However, it is understandable that for other applications that need to integrate a rich text editor, the implementation method is similar and will not be repeated here.

The following first describes the memo of the Android side in conjunction with Figure 1, wherein the Android side memo is an application with a rich text editing function. Referring to Figure 1, it can be determined that the Android side memo includes a Native layer and a Webview layer.

The Native layer includes Activity components, View components, Button components, and a user event processing unit. Activity components, View components, and Button components are part of the Android native user interface (UI) framework, which can implement UI rendering. The visual interface that users interact with during the use of the memo is rendered by components in the Native layer. The user event processing unit can monitor events in the UI interface to obtain the user's intention, such as setting bold, italic, or font size for a text part.

Through the JS-Android communication interface, the event processing unit can pass the monitored events to the Webview layer. The Webview layer includes the interface layer and the rich text editor. The Html (Hyper Text Markup Language) layout, CSS (Cascading Style Sheets) style, and JS loading unit in the interface layer are used to render components other than the rich text editor. The JS interface serves as the communication interface between the JS and Android layers. The rich text editor is used to enable users to edit rich text content.

The following is an explanation of the memo on the personal computer (PC) side in conjunction with Figure 1. The PC side memo can run on the Windows platform. As shown in Figure 1, for the PC side memo, the application is built on the web view layer. The web view layer may include a UI rendering unit, a user event processing unit, a command processing unit, and a rich text editor.

The UI rendering unit includes React components, Html layout subunits, and CSS style subunits. Among them, the PC-side memo can be rendered in the UI through the React framework, and the user event processing unit can monitor events at the UI layer and identify user intentions. In the instruction processing unit, the user intention can be further converted into instructions, and the instructions are passed to the rich text editor through a series of instruction subscription, instruction matching, instruction distribution and other operations. The rich text editor implements the editing behavior of the user's intention according to the received instructions.

In the diagram of FIG1 , a rich text editor is deployed in the PC-side memo corresponding to the Windows platform, and a rich text editor is also deployed in the Android-side memo corresponding to the Android platform. In fact, the rich text editors deployed on different platforms are all the rich text editors shown in the middle part of FIG1 . FIG1 is merely an exemplary introduction to the implementation of deploying the rich text editor on the Windows platform and the Android platform. In fact, the rich text editor can be deployed on various possible platforms, and the specific deployment platform can be selected and set according to actual needs.

As can be determined with reference to FIG. 1 , the rich text editor in this embodiment may include five parts, namely: a rendering mechanism, a history record, a plug-in mechanism, a behavior control, and a data structure.

Among them, the rendering mechanism can also be called the first rendering unit, which is used to render and display the content in the rich text editor. The history record can also be called a recording unit, which is used to record the operations in the rich text editor. The plug-in mechanism can also be called a plug-in unit, which includes multiple plug-ins, and each plug-in is used to implement different functions. For example, the table editing operation in this embodiment can be implemented by the table editing plug-in in the plug-in unit. Behavior control can also be called an execution unit, which is used to encapsulate the relevant data parsed by the plug-in mechanism to obtain instructions that can be recognized by the data structure. The data structure can also be called a data processing unit, which is used to change the data structure corresponding to the rich text data in JSON format according to the instructions generated by the behavior control.

Based on the above introduction, the operation interface of the memo on the PC side and the memo on the Android side can be understood by combining Figures 2 and 3. Figure 2 is a schematic diagram of the interface of the first application corresponding to the rich text editor provided in the embodiment of the present application, and Figure 3 is a schematic diagram of the interface of the first application corresponding to the rich text editor provided in the embodiment of the present application.

As shown in Figure 2, the graphical user interface of the memo includes a file list, a note list, and a user event response area. The file list displays the user's file classification, the note list displays the rich text list stored in the folder, and the user event response area displays the editing operations that the user can perform on the rich text content. The graphical user interface of the memo also includes a rich text editor area, in which the user can edit the rich text content.

FIG3 is a schematic diagram of the interface of the memo on the Android side, which is similar to the interface of the memo on the PC side introduced in FIG2 , and will not be described again here.

In combination with Figures 2 and 3, it can be understood that an application program including a rich text editor can be provided in devices of different platforms. Such an application program can provide rich text editing functions based on the rich text editor. The specific application device and specific application platform of the technical solution of the present application can be selected and set according to actual needs, and this embodiment does not impose any restrictions on this.

Based on the above introduction, the specific implementation of the table data processing method provided by the present application is described below in conjunction with Figure 4. Figure 4 is a flow chart of the table data processing method provided by an embodiment of the present application.

As shown in FIG4 , the method includes:

S401: In response to a table editing operation in a graphical user interface of a first application, determine a table editing event.

The method of this embodiment can be applied to a first application, and the first application includes a rich text editor. In the actual implementation process, the first application can be, for example, the memo application introduced above, but is not limited to the memo introduced above, and can be any application that requires a rich text editing function, such as an instant messaging application that supports a rich text editing function, a document application that supports a rich text editing function, etc. This embodiment does not limit the specific implementation of the first application.

Because the first application in this embodiment can support the table editing function, the user can input the table editing operation in the graphical user interface of the first application, where the table editing operation can be, for example, a click operation, a long press operation, a sliding operation, etc. on the table editing control. This embodiment does not limit the specific implementation method of the table editing operation, which depends on how the first application specifically sets the relevant controls of the table editing function.

After the first application monitors the table editing operation input by the user, the table editing event triggered by the table editing operation can be determined in response to the table editing operation. It can be understood that different table editing operations can trigger different table editing events. In a possible implementation, the table editing event can include an insert event for inserting a table, or a modify event for modifying a table, or a delete event for deleting a table.

S402: Acquire a data structure corresponding to the first rich text content in the rich text editor, and update the data structure according to a table editing event.

Based on the above introduction, it can be determined that users can edit rich text content in a rich text editor. In this embodiment, the rich text content in the rich text editor before the table editing operation is performed is referred to as the first rich text content, where the first rich text content may be empty or not empty, which depends on the specific implementation, and this embodiment does not limit this.

In this embodiment, for the first rich text content in the rich text editor, in the process of initializing the rich text editor, for example, a data structure corresponding to the first rich text content has been generated. In one possible implementation, if the first rich text content is empty, the data structure corresponding to the first rich text content is an empty data structure. Alternatively, if the first rich text content is not empty, the data structure can reflect the specific rich text structure and rich text content of the first rich text content. The data structure can be in JSON format, for example.

Then the data structure corresponding to the first rich text content in the first rich text editor can be directly obtained. It can be understood that the above-mentioned table editing operation is used to indicate the triggering of the corresponding table editing event in the first rich text editor, wherein the specific table editing event can indicate the corresponding table editing in the first rich text editor, such as inserting a table, modifying a table, or deleting a table. Then correspondingly, these table editing events will make corresponding modifications to the first rich text content in the rich text editor, and correspondingly, the data structure corresponding to the first rich text content also needs to be updated accordingly. Therefore, in this embodiment, the data structure corresponding to the first rich text content can be updated according to the table editing event.

In one possible implementation, there are certain differences in the corresponding data structure update methods for different table editing events. The specific table editing events and the corresponding data structure update methods can be selected and set according to actual needs, as long as the modified data structure can reflect the changes indicated by the table editing event.

S403: displaying, in a rich text editor, second rich text content corresponding to the updated data structure according to the updated data structure, wherein the first rich text content and/or the second rich text content includes a table;

It is understandable that the specific display style and content of the rich text content displayed in the rich text editor developed based on the web page view are realized by rendering the data structure accordingly. Therefore, in this embodiment, after the data structure is updated, the second rich text content corresponding to the updated data structure can be rendered and displayed in the rich text editor.

Therefore, the updated data structure in this embodiment is obtained by updating the data structure of the first rich text content based on the table update event corresponding to the table editing operation. Therefore, the second rich text content rendered based on the updated data structure is actually the modified rich text content presented after the table editing operation triggers the corresponding table editing event for the first rich text content. Therefore, table operations can be effectively implemented in the rich text editor.

In this embodiment, a table may be included in the first rich text content and/or the second rich text content. In a possible implementation, for example, if there is no table in the first rich text content itself, and the table editing operation is used to trigger the insertion of a table in the rich text editor, then based on the above-described processing procedure, the table is included in the second rich text content.

Or, for example, if there is a table in the first rich text content, and the table editing operation is used to trigger deletion of the table in the first rich text content, then based on the processing procedure described above, the deleted table will not exist in the second rich text content.

Or, for example, if there is a table in the first rich text content, and the table editing operation is used to trigger the modification of the table in the first rich text content, then based on the processing procedure introduced above, the table included in the second rich text content is modified accordingly relative to the table included in the first rich text content.

The table data processing method provided in the embodiment of the present application includes: responding to the table editing operation in the graphical user interface acting on the first application, determining the table editing event. Obtaining the data structure corresponding to the first rich text content in the rich text editor, and updating the data structure according to the table editing event. According to the updated data structure, the second rich text content corresponding to the updated data structure is displayed in the rich text editor, and the first rich text content and/or the second rich text content include a table. The rich text editor is developed through the web page view, so that the data structure of the rich text content in the rich text editor can be updated to display the edited rich text content in the rich text editor, wherein the rich text content before editing and/or the rich text content after editing may include a table, and the specific processing of the table editing is completed by updating the data structure, so that the rich text editor can simply and effectively support the table editing function to enhance the comprehensiveness of the functions of the rich text editor.

Based on the above introduction, it can be understood that there may be a variety of table editing events, and the table editing operations that trigger the table editing events may also have corresponding implementations. The following introduces a variety of different table editing events in conjunction with specific embodiments.

In a possible implementation, the table editing operation may include, for example, an insert event of inserting a table, and the relevant implementation of inserting a table is described below in conjunction with Figures 5 and 6. Figure 5 is a flowchart 2 of the table data processing method provided in an embodiment of the present application, and Figure 6 is a schematic diagram of the implementation of inserting a table provided in an embodiment of the present application.

As shown in FIG5 , the method includes:

S501. In response to a click operation on a table insert control, an adjustment control is displayed in a graphical user interface, where the adjustment control includes a plurality of pre-selected cells and/or text input boxes.

In this embodiment, a table insert control may be included in the graphical user interface of the first application, wherein the table insert control is used to display an adjustment control in response to a user's operation.

For example, it can be understood in conjunction with FIG. 2 . As shown in FIG. 2 , there is a user event response area in the graphical user interface of the first application, and there is a table insertion control 201 shown in FIG. 2 in the user event response area.

Assume that a user clicks on the table insertion control 201 shown in FIG. 2 , and then the first application may display the adjustment control 202 shown in FIG. 2 in the graphical user interface in response to the click operation on the table insertion control 201 .

It can be determined with reference to FIG. 2 that the adjustment control 202 may include a plurality of pre-selection units 203 and a text input box 204 .

In a possible implementation, the adjustment control may include only pre-selected cells, or only text input boxes, or both pre-selected cells and text input boxes, which can be selected and set according to actual needs. In the actual implementation process, the specific display style of the table insertion control, the specific display style of the adjustment control, and the specific content included in the adjustment control can all be selected and set according to actual needs, and this embodiment does not limit this.

S502. In response to a selection operation on a plurality of preselected cells, or in response to a confirmation operation on input content in a text input box, a table editing event is determined to be an insert event. The selection operation and the confirmation operation are used to indicate a table size. The insert event is used to indicate inserting a table corresponding to the table size in a rich text editor.

Among them, the pre-selected cell in the adjustment control is used to receive the user's selection operation, so as to determine the table size to be inserted into the table. And the text input box receives the text content input by the user and determines the table size according to the text content input by the user, that is, the control content included in the adjustment control is used to provide the user with the ability to adjust the table size.

In a possible implementation, the table editing event can be determined as an insert event in response to a selection operation on multiple pre-selected cells, where the selection operation can be used to indicate the table size. For example, if the user selects n rows and m columns of pre-selected cells in the pre-selected cells, the corresponding table size is n rows and m columns. The insert event in this embodiment is used to indicate the insertion of a table corresponding to the table size in the rich text editor.

For this implementation method, for example, it can be understood in conjunction with Figure 2. As shown in Figure 2, assuming that a selection operation is applied to multiple pre-selected cells, 3 rows and 4 columns of pre-selected cells are selected from the multiple pre-selected cells, then it can be determined that the table size is 3 rows and 4 columns, and the corresponding insert event is used to indicate that the size of the table inserted in the rich text editor is 3 rows and 4 columns.

Or in another possible implementation, the table editing event can be determined as an insert event in response to a confirmation operation on the input content in the text input box. The input content in the text input box is used to indicate the table size. For example, if the user enters n-m in the text input box and a confirmation operation is triggered for the input content, the corresponding table size can be determined to be n rows and m columns. And the insert event in this embodiment is used to indicate the insertion of a table corresponding to the table size in the rich text editor.

For this implementation method, for example, it can be understood in conjunction with Figure 2. As shown in Figure 2, assuming that the input content in the text input box is 3-4 (not shown in Figure 2), and referring to Figure 2, it can be determined that there is also a confirmation control 205 in the adjustment control 202. Assuming that the user clicks the confirmation control 205, a confirmation operation can be generated for the input content in the text input box. Then in the example of Figure 2, it can be determined that the table size is 3 rows and 4 columns, and the corresponding insert event is used to indicate that the size of the table inserted in the rich text editor is 3 rows and 4 columns.

Based on the above introduction, the table insert operation in this embodiment is the selection operation or confirmation operation introduced above, or the table insert operation may also include the click operation on the table insert control introduced above.

S503: Obtain a data structure corresponding to the first rich text content in the rich text editor.

The implementation of S503 is similar to the implementation of S402 described above, and will not be described in detail here.

S504: Determine the table size of the table to be inserted according to the insert event.

In this embodiment, assuming that the table editing event corresponding to the table editing operation is determined to be an insert event, wherein the insert event is used to indicate inserting a table corresponding to the table size in the rich text editor, then the table size of the table to be inserted can be determined according to the insert event.

S505 . Generate a table data structure corresponding to the table to be inserted according to the table size. The table data structure includes sub-data corresponding to each of the multiple cells in the table to be inserted.

After determining the table size, in this embodiment, a table data structure corresponding to the table to be inserted can be generated. The table data structure may include sub-data corresponding to multiple cells in the table to be inserted, where the number of cells to be inserted into the table is determined according to the table size. For example, if the table size is n rows and m columns, then the corresponding number of cells to be inserted into the table is n times m, where n and m are both integers greater than or equal to 1.

The table data structure may be in JSON format, for example. In a possible implementation, for example, for the example of the table size of the table to be inserted being 3 rows and 4 columns, the corresponding table data structure is as follows:

Based on the table data structure introduced above, it can be determined that the table data structure includes sub-data corresponding to each cell to be inserted into the table, wherein the sub-data can indicate the position of the cell in the table and can also indicate the specific text content in the cell.

It is also necessary to introduce that in the table data structure introduced above, there is a cursor element before the corresponding sub-data of the cell. This cursor element is the cursor located before the entire table. The corresponding cursor can be displayed before the table according to the user's click operation.

There is also a cursor element after the sub-data corresponding to the cell. This cursor element is the cursor located after the entire table. The corresponding cursor can be displayed after the table according to the user's click operation. For example, in the example of Figure 6, the corresponding cursor is displayed after the entire table.

S506: Add the table data structure to the target position in the data structure to obtain an updated data structure.

After the table data structure is determined, the table data structure may be added to a target location in the data structure corresponding to the first rich text content to obtain an updated data structure.

In a possible implementation, when the first rich text content is empty, the data structure corresponding to the first rich text content is also empty. In this case, the table data structure can be directly determined as the updated data structure.

Alternatively, when the first rich text content is not empty, the user must insert the table at the corresponding position in the first rich text content, for example, between the text and the picture, or after the text, etc. In short, the table is inserted at a certain position in the first rich text content. The target position corresponds to the node position in the data structure corresponding to the insertion position in the first rich text content, which can be selected and set according to actual needs.

After the target position is determined, the table data structure is added to the target position in the data structure to obtain an updated data structure.

S507: Displaying second rich text content corresponding to the updated data structure in a rich text editor according to the updated data structure, wherein the first rich text content and/or the second rich text content includes a table.

The implementation of S507 is similar to the implementation of S403 described above.

Further, based on the above-described example, if the updated data structure includes the table data structure corresponding to the table to be inserted with 3 rows and 4 columns, the second rich text content corresponding to the updated data structure can be displayed in the rich text editor according to the updated data structure. The displayed second rich text content can be understood, for example, in conjunction with FIG6 . As shown in FIG6 , the second rich text content displayed in the rich text editor includes the table with 3 rows and 4 columns shown in FIG6 .

The table data processing method provided by the embodiment of the present application, by responding to the click operation on the table insert control, displays the adjustment control in the graphical user interface, and the adjustment control may include pre-selected cells and/or input text, so that the user can customize the table size required for input. Then, based on the table size input by the user, the corresponding table editing event is determined to be an insert event, wherein the insert event is used to indicate the insertion of a table corresponding to the table size in the rich text editor. Then, according to the insert event, a table data structure corresponding to the table to be inserted can be generated, and the table data structure includes sub-data corresponding to each of the multiple cells in the table to be inserted, wherein the number of cells in the table to be inserted is in accordance with the table size input by the user, and finally, the corresponding rich text content rendering is performed based on the updated data structure, so that the insertion of a table of a user-defined size in the rich text editor can be effectively realized, and the above-mentioned introduction process is to realize the table insertion by updating the data structure accordingly, and then rendering based on the updated data structure, so that the rich text editor can simply and effectively realize the support of the table insertion function.

Based on the above introduction, users can select cells in a table inserted into a rich text editor. The following is an introduction to the implementation method of selecting an area in a table in the table data processing method provided by the present application in combination with Figures 7 to 10. Figure 7 is a flowchart of the table data processing method provided in an embodiment of the present application, Figure 8 is a schematic diagram of the implementation of determining the selection in a table provided in an embodiment of the present application, Figure 9 is a schematic diagram of the implementation of determining the selection in a table provided in an embodiment of the present application, and Figure 10 is a schematic diagram of the implementation of determining the selection in a table provided in an embodiment of the present application.

As shown in FIG. 7 , the method includes:

S701. For a table displayed in a rich text editor, in response to a selection operation on the table, determine a selected cell corresponding to the selection operation.

In this embodiment, the user can perform a selection operation on a table displayed in the rich text editor, wherein the table displayed in the rich text editor may be, for example, a table in the first rich text content, that is, the table itself exists in the rich text editor before the above-mentioned operation of inserting the table is performed. Or it may be a table in the second rich text content, that is, the table inserted in the rich text editor after the above-mentioned operation of inserting the table is performed, that is, no matter when the table is inserted, the selection operation can be performed on the table displayed in the rich text editor.

After receiving the area selection operation input by the user, a selected cell corresponding to the area selection operation may be determined in response to the area selection operation.

In a possible implementation, a row selection control is displayed in the rich text editor; the selection operation is a click operation on the row selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected row corresponding to the row selection control.

For example, it can be understood in conjunction with Figure 8. As shown in Figure 8, a row selection control 801 is displayed in the rich text editor, where the row selection control is used to select a row, and the row selection control can also indicate which row the cell currently operated by the user is located in. For example, if the user performs an editing operation in a cell in the first row, the row selection control 801 is located in the first row as shown in Figure 8.

The selection operation may be, for example, a click operation on a row selection control. In this case, the selected cells corresponding to the selection operation are the multiple cells in the selected row corresponding to the row selection control. For example, in the example of FIG8 , the selected row corresponding to the row selection control is the first row, and the multiple cells in the first row are the selected cells.

In another possible implementation, a column selection control is displayed in the rich text editor; the selection operation is a click operation on the column selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected column corresponding to the column selection control.

For example, it can be understood in conjunction with Figure 9. As shown in Figure 9, a column selection control 901 is displayed in the rich text editor, wherein the column selection control is used to select a column, and the column selection control can also indicate in which column the cell currently operated by the user is located. For example, if the user performs an editing operation in a cell in the first column, the column selection control 901 is located in the first column as shown in Figure 9.

The selection operation may be, for example, a click operation on a column selection control. In this case, the selected cells corresponding to the selection operation are the multiple cells in the selected column corresponding to the column selection control. For example, in the example of FIG. 9 , the selected column corresponding to the column selection control is the first column, and the multiple cells in the first column are the selected cells.

Or in another possible implementation, the selection operation may also be a drag operation on the table, and the selected cells corresponding to the selection operation are the cells included in the drag range formed by the drag operation.

For example, it can be understood in conjunction with Figure 10. As shown in Figure 10, assuming that the operation trajectory of the drag operation performed by the user is as shown by the arrow in Figure 10, then the circumscribed rectangle of the drag trajectory of the drag operation is determined as the drag range formed by the drag operation, that is, the range indicated by 1001 in Figure 10, and then the cells included in the drag range 1001, that is, the four cells of 1 row and 1 column, 1 row and 2 columns, 2 rows and 1 column, and 2 rows and 2 columns, can be determined as selected cells.

S702. Determine the position information of the selection box according to the selected cell corresponding to the selection operation, where the position information includes width, height and coordinate position.

After the selected cell is determined, the position information of the selected box can be determined according to the selected cell, wherein the position information may include the width of the selected box, the height of the selected box, and the coordinate position of the selected box.

Among them, the width and height of the selected box depend on which specific selected cells exist. The position information of the selected box can be, for example, the coordinate information corresponding to the vertex of the upper left corner of the selected box. In a possible implementation, for example, the upper left corner of the table can be used as the coordinate origin, and the direction of the coordinate origin to the right is determined as the positive direction of the x-axis, and the direction of the coordinate origin downward is determined as the positive direction of the y-axis. On this basis, the position of the upper left corner vertex of the selected box can indicate the position of the selected box in the table, so it can be determined as the coordinate position of the selected box.

Alternatively, in the actual implementation process, the specific implementation of the coordinate system corresponding to the table can be adjusted according to actual needs, so the coordinate position of the corresponding selection box can also be selected and set according to actual needs, as long as the coordinate position of the selection box can indicate its position in the coordinate system corresponding to the table.

And in a possible implementation, when creating a table in this embodiment, a check box is mounted for each created table. When no cell is selected, the length, width, horizontal coordinate and vertical coordinate of the check box are all 0, that is, it can be considered to exist in the upper left corner of the table, but has no size. Afterwards, when there is a selected cell, the length, width and coordinate position of the check box can be modified according to the specific position of the selected cell, so that the check box can be displayed at the corresponding position.

S703: Render and display the check box in the rich text editor according to the position information of the check box.

After the position information of the check box is determined, the check box can be rendered and displayed in a preset style at a corresponding position in the table in the rich text editor according to the position information of the check box.

For example, referring to FIG8, FIG9 and FIG10, it can be understood that 802 in FIG8, 902 in FIG9 and 1001 in FIG10 all represent displayed check boxes. In the actual implementation process, the specific display style of the check box can be selected and set according to actual needs, and this embodiment does not impose any special restrictions on this.

The table data processing method provided in the embodiment of the present application can effectively insert a selection in the table and select the corresponding cells by adding a check box to the created table, then determining the selected cell according to the user's selection operation, and determining the position information of the check box based on the selected cell, and then rendering and displaying the check box according to the position information of the check box. The rich text editor in this embodiment can effectively select the cells in the table and indicate the position of the specific selected cell through the check box.

Based on the above introduction, the table editing event in the present application can also be, for example, a modification event for the table. The corresponding implementation of modifying the table in the table data processing method provided in the embodiment of the present application is introduced below in combination with Figures 11 to 13. Figure 11 is a flowchart four of the table data processing method provided in the embodiment of the present application, Figure 12 is a schematic diagram one of the implementation of modifying the table provided in the embodiment of the present application, and Figure 13 is a schematic diagram two of the implementation of modifying the table provided in the embodiment of the present application.

As shown in FIG. 11 , the method includes:

S1101. In response to a trigger operation acting on a selected cell, display at least one selection control, where the selection control includes at least one of the following: a delete control, a first add control, and a second add control.

In this embodiment, when it is necessary to modify the table, for example, it may be necessary to modify the selected cell, then at least one selection control may be displayed in the rich text editor in response to a trigger operation acting on the selected cell.

Among them, the trigger operation can be, for example, a right-click operation of the mouse on the selected cell, or it can also be a long press operation on the cell. The specific implementation method of the trigger operation can be selected and set according to actual needs, as long as the trigger operation can trigger the display of at least one selection control.

And the selection control in this embodiment may include, for example, at least one of the following: a delete control, a first add control, and a second add control.

In one possible implementation, if the selected cells are located in the same row in the table, the first add control is used to indicate adding a row of cells above the row where the selected cells are located, the second add control is used to indicate adding a row of cells below the row where the selected cells are located, and the delete control is used to indicate deleting the cells in the row where the selected cells are located.

For example, it can be understood in conjunction with Figure 12. As shown in Figure 12, the currently selected cells are all cells in the first row. For example, a trigger operation can be performed accordingly for the selected cells to display the three selection controls shown in Figure 12, namely the first add control 1201, the second add control 1202 and the delete control 1203.

The first add control 1201 is used to indicate adding a row of cells above the row where the selected cell is located, that is, adding another row above the first row. The second add control 1202 is used to indicate adding a row of cells below the row where the selected cell is located, that is, adding another row below the first row. The delete control 1203 is used to indicate deleting the cells in the row where the selected cell is located, that is, deleting the first row in the table.

In another possible implementation, if the selected cells are located in the same column in the table, the first add control is used to indicate adding a column of cells to the left of the column where the selected cells are located, the second add control is used to indicate adding a column of cells to the right of the column where the selected cells are located, and the delete control is used to indicate deleting the cells in the column where the selected cells are located.

For example, it can be understood in conjunction with Figure 13. As shown in Figure 13, the currently selected cells are all cells in the first column. For example, a trigger operation can be performed accordingly for the selected cells to display the three selection controls shown in Figure 13, namely the first add control 1301, the second add control 1302 and the delete control 1303.

The first add control 1301 is used to indicate adding a column of cells to the left of the column where the selected cell is located, that is, adding another column to the left of the first column. The second add control 1302 is used to indicate adding a column of cells to the right of the column where the selected cell is located, that is, adding another column to the right of the first column. The delete control 1303 is used to indicate deleting the cells in the column where the selected cell is located, that is, deleting the first column in the table.

S1102: In response to a click operation on a target selection control in at least one selection control, determine that the table editing event is a modification event.

Based on the above introduction, it can be determined that different selection controls are used to trigger different operations. Therefore, in response to a click operation on a target selection control in at least one selection control, the table editing event can be determined as a modification event, wherein different target selection controls have different corresponding modification events.

In a possible implementation, if the selected cells are located in the same row in the table, if the target selection control is a delete control, the modification event is a delete row event, and the delete row event is used to indicate deleting the cells in the row where the selected cells are located; if the target selection control is a first add control, the modification event is a first add row event, and the first add row event is used to indicate adding a row of cells above the row where the selected cells are located; if the target selection control is a second add control, the modification event is a second add row event, and the second add row event is used to indicate adding a row of cells below the row where the selected cells are located.

In another possible implementation, if the selected cells are located in the same column in the table, if the target selection control is a delete control, the modification event is a delete column event, and the delete column event is used to indicate deleting the cells in the column where the selected cells are located; if the target selection control is a first add control, the modification event is a first add column event, and the first add column event is used to indicate adding a column of cells to the left of the column where the selected cells are located; if the target selection control is a second add control, the modification event is a second add column event, and the second add column event is used to indicate adding a column of cells to the right of the column where the selected cells are located.

S1103: Obtain a data structure corresponding to the first rich text content in the rich text editor.

The implementation of S1103 is similar to the implementation of S402 described above, and will not be described in detail here.

S1104: Update the data structure according to the table editing event.

Based on the above introduction, it can be determined that there are multiple possible implementation methods for the table editing event in this embodiment, and the implementation method of updating the data structure corresponding to each implementation method may be different. The implementation of data structure update for multiple different insertion events is explained below.

In a possible implementation, if the modification event is a row deletion event, when updating the data structure, the sub-data corresponding to each cell in the row where the selected cell is located may be deleted in the data structure to obtain an updated data structure. In addition to deleting the corresponding sub-data, the row and column identifiers in the sub-data of the remaining cells may also be adaptively updated.

For example, based on the above-mentioned table size of 3 rows and 4 columns for the inserted table, assuming that the selected cell is a cell in the first row, then in the above-mentioned data structure, the sub-data corresponding to the cells in 1 row and 1 column, the sub-data corresponding to the cells in 1 row and 2 columns, the sub-data corresponding to the cells in 1 row and 3 columns, and the sub-data corresponding to the cells in 1 row and 4 columns can be deleted, and the row and column identifiers of the sub-data of the cells in the remaining two rows can be updated, that is, the original 2nd row becomes the 1st row, and the original 3rd row becomes the 2nd row. The specific updating method can be understood by referring to the above-mentioned data structure, and will not be repeated here.

In another possible implementation, if the modification event is the first row adding event, that is, adding a row of cells above the row where the selected cell is located, then when updating the data structure, the sub-data corresponding to a row of cells may be added at the first position in the data structure to obtain an updated data structure, and the first position is used to make the cells of the added row located above the cells of the row where the selected cell is located. In addition, in addition to adding the corresponding sub-data, the row and column identifiers in the sub-data of each cell may also be adaptively updated.

It is understandable that the data structure includes the sub-data corresponding to each cell in the table. If the sub-data of multiple cells are sorted in the manner of first row and then column as described above, then the first position, for example, may be before the sub-data of the first cell in the row where the selected cell is located. In this case, the sub-data of a continuous row of cells can be directly inserted in the first position. Alternatively, if the sub-data of multiple cells are sorted in the manner of first column and then row, then the first position may be scattered, for example, a position jointly constituted before the sub-data of each cell in the row where the selected cell is located. In this case, the sub-data of each cell in a row of cells needs to be inserted in multiple scattered positions respectively.

For example, based on the table size of the inserted table described above being 3 rows and 4 columns, assuming that the selected cell is a cell in the first row, then in the data structure described above, because the sub-data is sorted in the order of rows first and columns later, the position before the sub-data of the cell in row 1 and column 1 can be determined as the first position, and a row of sub-data of cells can be directly inserted before the first position. The row and column identifiers of the sub-data of the original three rows of cells are updated, that is, the original row 1 becomes the second row, the original row 2 becomes the third row, and the original row 3 becomes the fourth row. For the example described above, the updated data structure can be, for example, changed to:

Comparing the data structures before and after the update described above, it can be determined that the data structure before the update describes a table with 3 rows and 4 columns, and the data structure after the update describes a table with 4 rows and 4 columns. Therefore, it is possible to add a row to the original table to obtain the updated table.

In another possible implementation, if the modification event is a second row adding event, that is, a row of cells is added below the row where the selected cell is located, then when updating the data structure, the sub-data corresponding to a row of cells may be added at the second position in the data structure to obtain an updated data structure, and the second position is used to make the cells of the added row located below the cells of the row where the selected cell is located. In addition, in addition to adding the corresponding sub-data, the row and column identifiers in the sub-data of each cell may also be adaptively updated.

It is understandable that the data structure includes the sub-data corresponding to each cell in the table. If the sub-data of multiple cells are sorted in the manner of first row and then column as described above, then the second position, for example, may be after the sub-data of the last cell in the row where the selected cell is located. In this case, the sub-data of a continuous row of cells can be directly inserted in the second position. Alternatively, if the sub-data of multiple cells are sorted in the manner of first column and then row, then the second position may be scattered, for example, a position jointly formed after the sub-data of each cell in the row where the selected cell is located. In this case, the sub-data of each cell in a row of cells needs to be inserted in the scattered multiple positions respectively.

For example, based on the table size of 3 rows and 4 columns of the inserted table introduced above, assuming that the selected cell is a cell in the first row, then in the data structure introduced above, because the sub-data is sorted in the order of rows first and columns later, the position after the sub-data of the cell of 1 row and 4 columns can be determined as the first position, and a continuous row of sub-data of cells can be directly inserted before the first position. And the row and column identifiers of the sub-data of the original three rows of cells are updated, that is, the first row remains unchanged, the original 2nd row becomes the 3rd row, and the original 3rd row becomes the 4th row. The specific update method can be understood by referring to the data structure introduced above, and will not be repeated here.

In another possible implementation, if the modification event is a column deletion event, when updating the data structure, the sub-data corresponding to each cell in the column where the selected cell is located may be deleted in the data structure to obtain an updated data structure. In addition to deleting the corresponding sub-data, the row and column identifiers in the sub-data of the remaining cells may also be adaptively updated.

For example, based on the above-mentioned table size of 3 rows and 4 columns, assuming that the selected cell is the cell in the first column, then in the above-mentioned data structure, the sub-data corresponding to the cells in 1 row and 1 column, the sub-data corresponding to the cells in 2 rows and 1 column, and the sub-data corresponding to the cells in 3 rows and 1 column can be deleted, and the row and column identifiers of the sub-data of the cells in the remaining three rows can be updated, that is, the original 2nd column becomes the 1st column, the original 3rd column becomes the 2nd column, and the original 4th column becomes the 3rd column. The specific updating method can be understood by referring to the above-mentioned data structure, and will not be repeated here.

In another possible implementation, if the modification event is the first column adding event, that is, adding a column of cells to the left of the row where the selected cell is located, then when updating the data structure, the sub-data corresponding to the column of cells may be added to the third position in the data structure to obtain an updated data structure, and the third position is used to make the cells of the added column to the left of the cells in the column where the selected cell is located. In addition, in addition to adding the corresponding sub-data, the row and column identifiers in the sub-data of each cell may also be adaptively updated.

It is understandable that the data structure includes the sub-data corresponding to each cell in the table. If the sub-data of multiple cells are sorted in the manner of first row and then column as described above, then the third position can be scattered, for example, the position jointly constituted before the sub-data of each cell in the column where the selected cell is located. In this case, it is necessary to insert the sub-data of each cell in a column of cells in the scattered multiple positions. Alternatively, if the sub-data of multiple cells are sorted in the manner of first column and then row, then the third position can be the position before the sub-data of the first cell in the column where the selected cell is located. In this case, the sub-data of a continuous column of cells can be directly inserted in the third position.

For example, based on the table size of the inserted table described above being 3 rows and 4 columns, assuming that the selected cell is a cell in the first column, then in the data structure described above, because the sub-data is sorted in the order of rows first and columns later, the position before the sub-data of the cell in 1 row and 1 column, the position before the sub-data of the cell in 2 rows and 1 column, and the position before the sub-data of the cell in 3 rows and 1 column can be determined as the third position, and the sub-data of multiple cells in one column can be inserted separately before the three scattered third positions. And the row and column identifiers of the sub-data of the cells in the original four columns are updated, that is, the original 1st column becomes the 2nd column, the original 2nd column becomes the 3rd column, the original 3rd column becomes the 4th column, and the original 4th column becomes the 5th column. The specific update method can be understood by referring to the data structure described above, and will not be repeated here.

In another possible implementation, if the modification event is a second column adding event, that is, a column of cells is added to the right of the row where the selected cell is located, then when updating the data structure, the sub-data corresponding to the column of cells may be added to the fourth position in the data structure to obtain an updated data structure, and the fourth position is used to make the cells of the added column to the right of the cells in the column where the selected cell is located. In addition, in addition to adding the corresponding sub-data, the row and column identifiers in the sub-data of each cell may also be adaptively updated.

It is understandable that the data structure includes the sub-data corresponding to each cell in the table. If the sub-data of multiple cells are sorted in the manner of first row and then column as described above, then the fourth position can be scattered, for example, the position jointly constituted after the sub-data of each cell in the column where the selected cell is located. In this case, it is necessary to insert the sub-data of each cell in a column of cells in the scattered multiple positions. Alternatively, if the sub-data of multiple cells are sorted in the manner of first column and then row, then the fourth position can be the position after the sub-data of the last cell in the column where the selected cell is located. In this case, the sub-data of a continuous column of cells can be directly inserted in the fourth position.

For example, based on the table size of the inserted table described above being 3 rows and 4 columns, assuming that the selected cell is a cell in the first column, then in the data structure described above, because the sub-data is sorted in the order of rows first and columns later, the position after the sub-data of the cell in 1 row and 1 column, the position after the sub-data of the cell in 2 rows and 1 column, and the position after the sub-data of the cell in 3 rows and 1 column can be determined as the fourth position, and the sub-data of multiple cells in one column can be inserted separately before the three scattered fourth positions. And the row and column identifiers of the sub-data of the cells in the original four columns are updated, that is, the original first column remains unchanged, the original second column becomes the third column, the original third column becomes the fourth column, and the original fourth column becomes the fifth column. The specific update method can be understood by referring to the data structure described above, and will not be repeated here.

It should be noted that, however, the reason why the above-mentioned method should be used when adding rows and columns is because the text content in the sub-data of the newly added rows or columns is usually empty, but the text content in the cells of the original table may not be empty. Therefore, in order to ensure the correct display of the text content in the table, cells need to be added at the corresponding positions in the data structure to ensure that the effect of adding rows or columns can be effectively displayed based on the updated data structure, while ensuring that the display of the text content in the original table is correct.

S1105 . Displaying second rich text content corresponding to the updated data structure in a rich text editor according to the updated data structure, wherein the first rich text content and/or the second rich text content includes a table.

Among them, the implementation method of S1105 is similar to the implementation method of S403 introduced above. By rendering and displaying the second rich text content based on the updated data structure, it can be ensured that the table in the second rich text content is updated as triggered by the user relative to the table in the first rich text content.

The table data processing method provided by the embodiment of the present application provides at least one selection control for the user in the graphical user interface in response to the user's trigger operation on the selected cell, wherein the selection control can support the user to delete rows and columns or add rows and columns, and whether the specific selection control is for the operation of rows or columns depends on the specific implementation of the selected cell. Therefore, different selection controls can be provided to the user according to the user's actual cell selection situation, so that the user can perform corresponding table modification operations according to the actual situation. And for various events such as deleting rows, deleting columns, adding rows, and adding columns, cells can be added or deleted at the corresponding position in the data structure according to the actual event situation and the composition of the actual data structure, so that the table rendering based on the updated data structure can be effectively guaranteed, and the table update required by the user can be effectively displayed, while ensuring that the content in the original table is displayed correctly. At the same time, the table update introduced above is based on the update and rendering of the data structure, so the rich text editor can simply and effectively realize the support of the table modification function.

Therefore, the following describes the role played by each unit in the rich text editor architecture during the table data processing process in the first application program in conjunction with Figure 14. Figure 14 is a schematic diagram of the processing process of the table processing method provided in an embodiment of the present application.

As shown in FIG14 , the first application may include a database and a rich text editor, and the rich text editor may include a data processing unit, a recording unit, a plug-in unit, a rendering unit, and an event monitoring unit.

The process includes:

1. The data processing unit receives an insert event of a table triggered by a first application program, and initializes a table data structure of the insert table according to the insert event.

Among them, the table data structure of the inserted table is initialized, that is, according to the implementation method introduced in the above embodiment, the table data structure of the table to be inserted is generated, and the table data structure is added to the target position in the data structure of the first rich text content to obtain an updated data structure. The specific implementation method can refer to the introduction of the above embodiment and will not be repeated here.

2. The data processing unit sends event information to the recording unit.

For example, in the current situation, the data processing unit may send event information corresponding to the insertion event to the recording unit, wherein the event information may include, for example, the inserted content, the inserted position, and the like.

3. The recording unit records the history of the insertion table according to the event information.

In a possible implementation, in order to facilitate the backtracking of operations, the rich text editor in this embodiment further includes a recording unit. After receiving the event information, the recording unit can store the history record of inserting the table in a first stack, wherein the first stack is used to store information corresponding to the completed operation.

Among them, the first stack can be understood as an undo stack. When the user needs to undo an operation, the record information can be obtained from the top of the first stack, and the update operation corresponding to the record information in the data structure corresponding to the rich text content can be undoed according to the record information to realize the undo of the corresponding instruction.

And the record unit may also include a second stack, for example. When the rich text editor receives an undo instruction, the record information at the top of the first stack can be obtained through the plug-in unit; the plug-in unit undoes the update operation corresponding to the record information at the top of the stack in the data structure corresponding to the rich text content; renders and displays the rich text content according to the data structure after the update operation is undone; the record information at the top of the stack is stored in the second stack, and the second stack is used to store the indication information corresponding to the undone operation.

4. The recording unit notifies the rendering unit that the operation recording is completed.

5. The rendering unit renders and displays the table style of the inserted table according to the updated data structure.

6. The rendering unit notifies the event listening unit that rendering is complete.

7. The event monitoring unit adds an event monitoring for the inserted table.

The monitored events may include the various types of modification events introduced above. For example, the corresponding events may be determined by monitoring the user's operations. The specific implementation method may refer to the introduction of the above embodiment and will not be repeated here.

Based on the above introduction, it can be determined that for the insert event, because the user triggered it in the corresponding control area of the first application, the insert event is monitored by the first application. The modification event is triggered in the table area of the rich text editor, so the modification event can be monitored by the rich text editor. When there are multiple tables in the rich text editor, each table corresponds to the current set of processing logic, that is, the rich text editor can monitor events for each table separately to determine which table the user is making corresponding modifications to.

8. The event monitoring unit sends the monitored events to the plug-in unit.

9. The plug-in cell determines the update instructions based on the events it monitors.

In a possible implementation, for example, a table editing plug-in may exist in the plug-in unit, in which different processing logics exist for different events. For example, the table editing plug-in may determine the update instruction corresponding to the monitored event based on the monitored event, and the update instruction may indicate the corresponding logical processing for the currently monitored event, that is, according to the processing logic corresponding to the monitored event, the corresponding data structure is updated.

And in a possible implementation method, when the plug-in unit determines the update instruction, for example, the plug-in unit determines the processing logic corresponding to the event, and then sends the information related to the processing logic to the execution unit introduced above, and the execution unit encapsulates the relevant information to obtain the update instruction, wherein the specific generation method of the update instruction can be selected and set according to actual needs, and this embodiment does not limit this.

10. The plug-in unit sends an update instruction to the data processing unit.

11. The data processing unit updates the data structure according to the update instruction.

The update instruction may indicate a specific update method of the data structure, wherein different events correspond to different processing methods for updating the data structure. The specific implementation of the data structure may refer to the introduction of the above embodiment and will not be repeated here.

12. The data processing unit sends event information to the recording unit.

For example, in the current situation, the data processing unit may send event information corresponding to the modification event to the recording unit, wherein the event information may include, for example, the modified content, the modified location, and the like.

13. The recording unit records the history of the insertion table according to the event information.

In a possible implementation, after receiving the event information, the recording unit may store the history record of modifying the table in a first stack, where the first stack is used to store information corresponding to the completed operation.

14. The recording unit notifies the rendering unit that the operation recording is completed.

15. The rendering unit renders and displays the table style of the inserted table according to the updated data structure.

16. The rendering unit saves the updated data structure in the database to implement storage of the modified rich text content in the rich text editor.

Based on the introduction of the current embodiment, it can be determined that based on the framework of the rich text editor in this embodiment, the corresponding processing operations of the table can be implemented simply and effectively by updating the data structure to expand the functions of the rich text editor.

Based on the above introduction, the rich text editor provided in the embodiment of the present application and the plug-in unit therein can be further introduced below.

The rich text editor includes a plug-in unit, the plug-in unit may include a table editing plug-in, and the plug-in unit may further include plug-ins with other functions.

That is to say, in the plug-in unit in this embodiment, different plug-ins can be set for different functions, so that the corresponding functions can be implemented through multiple plug-ins respectively, which can ensure that the processing between each function is independent of each other. When it is necessary to update and iterate certain functions, it can be achieved by processing the corresponding plug-in, thereby effectively improving the flexibility of adjusting and controlling the rich text editor.

In a possible implementation, for each sub-data in the data structure, there is a corresponding type parameter, then based on the type parameter in the sub-data, it is possible to quickly and effectively determine which component to use for corresponding processing.

Based on the above introduction, it can also be determined that the rich text editor includes a rendering unit, wherein the rendering unit can define rendering logic through, for example, a React component, for example, a data structure can be compiled to generate an HTML fragment and display it in the rich text editor.

After the event listening unit listens to the event triggered by the user operation, the plug-in unit can determine the corresponding processing logic and trigger the data processing unit to update the corresponding data structure. After the data structure is updated, the rendering unit can be further triggered to re-render. The data can be decoupled from the rendering in JSON format, so that it can be used across projects and architectures to ensure better versatility of the rich text editor.

In an optional implementation, the rich text editor may also undergo an initialization process before receiving a user operation. The initialization process of the rich text editor is described below.

When the first application is started, the second rendering unit can render the graphical user interface of the first application. Taking the memo as an example, for example, the file list, note list and user event response area in the graphical user interface of the memo described above can be rendered. Among them, the file list displays the user's file classification, the note list displays the rich text list stored in the folder, and the user event response area displays the editing operations that the user can perform on the rich text content.

After the first application is started, the data model for the rich text content displayed in the rich text editor needs to be initialized.

In a possible implementation, a list of multiple rich text contents is included on the graphical user interface of the first application. For example, a user can choose to open a certain rich text content in the list, and then the rich text content selected by the user to open needs to be displayed in the rich text editor. Therefore, the current initialization instruction can be to instruct to process the rich text content selected by the user to open to determine its corresponding data model, that is, what content is displayed in the rich text editor corresponds to the initialization of the data model of the displayed content. The data model in this embodiment can be understood as the rich text data in the JSON format introduced above.

And the rendering unit in the rich text editor initializes the data model of the rich text content in the rich text editor according to the initialization instruction.

In this embodiment, the initialization instruction is used to instruct the rich text editor to generate a data model of the rich text content displayed in the rich text editor. Therefore, after receiving the initialization instruction, the rich text editor can generate a data model of the rich text content corresponding to the above display operation.

The UI rendering layer of the first application sends a startup instruction to the instruction processing unit of the first application, where the startup instruction is used to instruct the instruction processing unit to start.

When the memo is started, the UI rendering layer may instruct the instruction processing unit to also start. In a possible implementation, the UI rendering layer may, for example, send a corresponding start instruction to the instruction processing unit, thereby starting the instruction processing unit.

After the instruction processing unit is started, it can register the functional instructions supported by the first application, such as bold instructions, italic instructions, table insert instructions, table modification instructions, etc. The instructions that the instruction unit needs to register may depend on the instructions specifically supported by the first application. This embodiment does not limit the specific implementation of the registration instructions.

After completing the initialization process described above, the rich text editor in this embodiment can perform corresponding table editing according to the user's operation, so as to effectively expand the function of the rich text editor.

FIG15 is a schematic diagram of the structure of a table data processing device provided in an embodiment of the present application. As shown in FIG15 , the device 150 includes: a determination module 1501 , an acquisition module 1502 , and a processing module 1503 .

A determination module 1501, configured to determine a table editing event in response to a table editing operation in a graphical user interface of a first application;

An acquisition module 1502 is used to acquire a data structure corresponding to the first rich text content in the rich text editor, and update the data structure according to the table editing event;

The processing module 1503 is configured to display, in the rich text editor, second rich text content corresponding to the updated data structure according to the updated data structure, wherein the first rich text content and/or the second rich text content includes a table;

The rich text editor is developed based on the web page view.

In some implementations, the graphical user interface of the first application includes a table insertion control;

The determining module 1501 is specifically used for:

In response to a click operation on the table insert control, an adjustment control is displayed in the graphical user interface, wherein the adjustment control includes a plurality of pre-selected cells and/or text input boxes;

In response to a selection operation on the plurality of pre-selected cells, or in response to a confirmation operation on input content in the text input box, determining that the table editing event is an insert event, the selection operation and the confirmation operation are used to indicate a table size, and the insert event is used to indicate inserting a table corresponding to the table size in the rich text editor;

The table insert operation is the selection operation or the confirmation operation.

In some implementations, the processing module 1503 is specifically configured to:

Determine the table size of the table to be inserted according to the insert event;

Generate a table data structure corresponding to the table to be inserted according to the table size, wherein the table data structure includes sub-data corresponding to each of the plurality of cells in the table to be inserted;

The table data structure is added to a target position in the data structure to obtain an updated data structure.

In some implementations, the processing module 1503 is further configured to:

For a table displayed in the rich text editor, in response to a selection operation performed on the table, determining a selected cell corresponding to the selection operation;

Determine the position information of the selected box according to the selected cell corresponding to the selection operation, wherein the position information includes width, height and coordinate position;

The check box is rendered and displayed in the rich text editor according to the position information of the check box.

In some implementations, a row selection control and a column selection control are displayed in the rich text editor;

The selection operation is a click operation on the row selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected row corresponding to the row selection control; or,

The selection operation is a click operation on the column selection control, and the selected cells corresponding to the selection operation are multiple cells in the selected column corresponding to the column selection control.

In some implementations, the selection operation is a drag operation on the table;

The selected cells corresponding to the area selection operation are cells included in the drag range formed by the drag operation.

In some implementations, the determining module 1501 is specifically configured to:

In response to a trigger operation acting on the selected cell, displaying at least one selection control, the selection control comprising at least one of the following: a delete control, a first add control, and a second add control;

In response to a click operation on a target selection control among the at least one selection control, the table editing event is determined to be a modification event.

In some implementations, the selected cells are located in the same row in the table, and the first add control is used to indicate adding a row of cells above the row where the selected cells are located, the second add control is used to indicate adding a row of cells below the row where the selected cells are located, and the delete control is used to indicate deleting the cells in the row where the selected cells are located.

In some implementations, if the target selection control is the delete control, the modification event is a delete row event;

The processing module 1503 is specifically used for:

In the data structure, deleting the sub-data corresponding to each cell in the row where the selected cell is located, to obtain an updated data structure;

If the target selection control is the first add control, the modification event is a first add row event;

The processing module 1503 is specifically used for:

Adding sub-data corresponding to a row of cells at a first position in the data structure to obtain an updated data structure, wherein the first position is used to make the cells of the added row be located above the cells of the row where the selected cell is located;

If the target selection control is the second adding control, the modification event is a second adding row event;

The processing module 1503 is specifically used for:

Sub-data corresponding to a row of cells are added at a second position in the data structure to obtain an updated data structure, wherein the second position is used to make the cells of the added row located below the cells of the row where the selected cell is located.

In some implementations, the selected cells are located in the same column in the table, and the first add control is used to indicate adding a column of cells to the left of the column where the selected cells are located, the second add control is used to indicate adding a column of cells to the right of the column where the selected cells are located, and the delete control is used to indicate deleting the cells in the column where the selected cells are located.

In some implementations, if the target selection control is the delete control, the modification event is a delete column event;

The processing module 1503 is specifically used for:

In the data structure, deleting the sub-data corresponding to each cell in the column where the selected cell is located, to obtain an updated data structure;

If the target selection control is the first adding control, the modification event is a first adding column event;

The processing module 1503 is specifically used for:

Adding sub-data corresponding to a column of cells at a third position in the data structure to obtain an updated data structure, wherein the third position is used to make the cells of the added column be located to the left of the cells in the column where the selected cell is located;

If the target selection control is the second adding control, the modification event is a second adding column event;

The processing module 1503 is specifically used for:

Add sub-data corresponding to a column of cells at a fourth position in the data structure to obtain an updated data structure, wherein the fourth position is used to make the cells of the added column to the right of the cells in the column where the selected cell is located.

In some implementations, the rich text editor includes a table editing plug-in and a data processing unit;

The processing module 1503 is specifically used for:

Determining, by means of the table editing plug-in, an update instruction corresponding to the table editing event;

The table editing plug-in sends the update instruction to the data processing unit, so that the data processing unit updates the data structure according to the update instruction.

The device provided in this embodiment can be used to execute the technical solution of the above method embodiment. Its implementation principle and technical effect are similar, and this embodiment will not be repeated here.

The table processing method provided in the embodiment of the present application can be applied to electronic devices with communication functions. The electronic devices include terminal devices, and the specific device form of the terminal devices can refer to the above related descriptions, which will not be repeated here.

An embodiment of the present application provides a terminal device, which can be understood by referring to Figure 16. Figure 16 is a schematic diagram of the hardware structure of the terminal device provided by the embodiment of the present application.

As shown in FIG. 16 , the terminal device 160 includes: a processor 1601 and a memory 1602 ; the memory 1602 stores computer-executable instructions; the processor 1601 executes the computer-executable instructions stored in the memory 1602 , so that the terminal device 160 executes the above method.

When the memory 1602 is independently provided, the terminal device further includes a bus 1203 for connecting the memory 1202 and the processor 1601 .

The embodiment of the present application provides a chip. The chip includes a processor, and the processor is used to call a computer program in a memory to execute the technical solution in the above embodiment. Its implementation principle and technical effect are similar to those of the above related embodiments, and will not be repeated here.

The embodiments of the present application also provide a computer-readable storage medium. The computer-readable storage medium stores a computer program. The above method is implemented when the computer program is executed by the processor. The method described in the above embodiment can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. If implemented in software, the function can be stored as one or more instructions or codes on a computer-readable medium or transmitted on a computer-readable medium. Computer-readable media can include computer storage media and communication media, and can also include any medium that can transfer a computer program from one place to another. The storage medium can be any target medium that can be accessed by a computer.

In one possible implementation, a computer-readable medium may include RAM, ROM, compact disc read-only memory (CD-ROM) or other optical disk storage, disk storage or other magnetic storage devices, or any other medium that is intended to carry or store the required program code in the form of instructions or data structures and can be accessed by a computer. Moreover, any connection is appropriately referred to as a computer-readable medium. For example, if a coaxial cable, fiber optic cable, twisted pair, digital subscriber line (DSL) or wireless technology (such as infrared, radio and microwave) is used to transmit software from a website, server or other remote source, the coaxial cable, fiber optic cable, twisted pair, DSL or wireless technology such as infrared, radio and microwave are included in the definition of medium. Disks and optical disks as used herein include optical disks, laser disks, optical disks, digital versatile disks (DVD), floppy disks and Blu-ray disks, where disks usually reproduce data magnetically, while optical disks reproduce data optically using lasers. Combinations of the above should also be included in the scope of computer-readable media.

An embodiment of the present application provides a computer program product, which includes a computer program. When the computer program is executed, the computer executes the above method.

The present application embodiment is described with reference to the flowchart and/or block diagram of the method, device (system) and computer program product according to the present application embodiment. It should be understood that each process and/or box in the flowchart and/or block diagram and the combination of the process and/or box in the flowchart and/or block diagram can be realized by computer program instructions. These computer program instructions can be provided to the processing unit of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable device to produce a machine, so that the instructions executed by the processing unit of the computer or other programmable data processing device produce a device for realizing the function specified in one process or multiple processes in the flowchart and/or one box or multiple boxes in the block diagram.

The above specific implementation methods further illustrate the purpose, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above are only specific implementation methods of the present invention and are not used to limit the protection scope of the present invention. Any modifications, equivalent substitutions, improvements, etc. made on the basis of the technical solutions of the present invention should be included in the protection scope of the present invention.

Claims (16)

1. A method of table data processing, for application to a first application, the first application including a rich text editor therein, the method comprising:

Determining a form editing event in response to a form editing operation in a graphical user interface acting on the first application program;

Acquiring a data structure corresponding to first rich text content in the rich text editor, and updating the data structure according to the table editing event;

Displaying second rich text content corresponding to the updated data structure in the rich text editor according to the updated data structure, wherein the first rich text content and/or the second rich text content comprise tables;

The rich text editor is developed based on a web page view.

2. The method of claim 1, wherein the first application includes a form insertion control in a graphical user interface;

The determining a form edit event in response to a form edit operation in a graphical user interface acting on the first application program comprises:

responsive to a click operation on the form insertion control, displaying an adjustment control in the graphical user interface, the adjustment control including a plurality of pre-selected cells and/or text input boxes therein;

Determining the form editing event as an insertion event in response to a selection operation acting on the plurality of preselected cells or in response to a confirmation operation for input content in the text input box, the selection operation and the confirmation operation being used for indicating a form size, the insertion event being used for indicating insertion of a form corresponding to the form size in the rich text editor;

Wherein the table insertion operation is the selection operation or the confirmation operation.

3. The method of claim 2, wherein the updating the data structure according to the form edit event comprises:

determining the form size of a form to be inserted according to the insertion event;

generating a table data structure corresponding to the table to be inserted according to the table size, wherein the table data structure comprises sub data corresponding to each of a plurality of cells in the table to be inserted;

And adding the table data structure to a target position in the data structure to obtain an updated data structure.

4. A method according to any one of claims 1-3, wherein the method further comprises:

Responding to a selection operation acting on a table displayed in the rich text editor, and determining a selected cell corresponding to the selection operation;

determining position information of a selected frame according to the selected cell corresponding to the selected region operation, wherein the position information comprises width, height and coordinate positions;

And rendering and displaying the selected frame in the rich text editor according to the position information of the selected frame.

5. The method of claim 4, wherein a row selection control and a column selection control are displayed in the rich text editor;

the selecting operation is clicking operation aiming at the row selection control, and the selected cells corresponding to the selecting operation are a plurality of cells in the selected row corresponding to the row selection control; or alternatively

And the selection operation is a clicking operation aiming at the column selection control, and the selected cells corresponding to the selection operation are a plurality of cells in the selected column corresponding to the column selection control.

6. The method of claim 4, wherein the selection operation is a drag operation on the form;

And the selected cells corresponding to the region selection operation are cells included in a drag range formed by the drag operation.

7. The method of any of claims 4-6, wherein determining a form edit event in response to a form edit operation in a graphical user interface acting on the first application program comprises:

in response to a triggering operation acting on the selected cell, displaying at least one selection control, the selection control comprising at least one of: deleting a control, a first adding control and a second adding control;

and determining that the table editing event is a modification event in response to a clicking operation on a target selection control in the at least one selection control.

8. The method of claim 7, wherein the selected cells are in the same row in the table, the first add control is for indicating that a row of cells is added above the row of selected cells, the second add control is for indicating that a row of cells is added below the row of selected cells, and the delete control is for indicating that the row of selected cells is deleted.

9. The method of claim 8, wherein if the target selection control is the delete control, the modification event is a delete line event;

the updating the data structure according to the table editing event comprises:

deleting sub-data corresponding to each cell of the row of the selected cell in the data structure to obtain an updated data structure;

if the target selection control is the first adding control, the modification event is a first adding line event;

the updating the data structure according to the table editing event comprises:

adding sub-data corresponding to a row of cells in the data structure to obtain an updated data structure, wherein the first position is used for enabling the cells of the added row to be located above the cells of the selected cell row;

If the target selection control is the second adding control, the modification event is a second adding line event;

the updating the data structure according to the table editing event comprises:

And adding sub-data corresponding to a row of cells at a second position in the data structure to obtain an updated data structure, wherein the second position is used for enabling the cells of the added row to be positioned below the cells of the selected cell row.

10. The method of claim 7, wherein the selected cells are in the same column in the table, the first adding control is configured to instruct adding a column of cells to a left side of the column in which the selected cells are located, the second adding control is configured to instruct adding a column of cells to a right side of the column in which the selected cells are located, and the delete control is configured to instruct deleting the cells in the column in which the selected cells are located.

11. The method of claim 10, wherein if the target selection control is the delete control, the modification event is a delete column event;

the updating the data structure according to the table editing event comprises:

deleting sub-data corresponding to each cell of the column of the selected cell in the data structure to obtain an updated data structure;

If the target selection control is the first adding control, the modification event is a first adding column event;

the updating the data structure according to the table editing event comprises:

Adding sub-data corresponding to a column of cells in a third position in the data structure to obtain an updated data structure, wherein the third position is used for enabling the cells added with the column to be positioned at the left side of the cells in the column where the selected cells are positioned;

if the target selection control is the second adding control, the modification event is a second adding column event;

the updating the data structure according to the table editing event comprises:

and adding sub-data corresponding to a column of cells in a fourth position in the data structure to obtain an updated data structure, wherein the fourth position is used for enabling the cell added with the column to be positioned on the right side of the cell in the column where the selected cell is positioned.

12. The method of any one of claims 1-11, wherein the rich text editor includes a form editing plug-in and a data processing unit therein;

the updating the data structure according to the table editing event comprises:

Determining an update instruction corresponding to the table editing event through the table editing plug-in;

the table editing plug-in sends the updating instruction to the data processing unit so that the data processing unit updates the data structure according to the updating instruction.

13. A tabular data processing apparatus, said apparatus comprising:

a determining module for determining a form editing event in response to a form editing operation in a graphical user interface acting on the first application;

The acquisition module is used for acquiring a data structure corresponding to the first rich text content in the rich text editor and updating the data structure according to the table editing event;

The processing module is used for displaying second rich text content corresponding to the updated data structure in the rich text editor according to the updated data structure, wherein the first rich text content and/or the second rich text content comprise tables;

The rich text editor is developed based on a web page view.

14. A terminal device, comprising: a processor and a memory;

The memory stores computer-executable instructions;

The processor executing computer-executable instructions stored in the memory to cause the terminal device to perform the method of any one of claims 1-12.

15. A computer readable storage medium storing a computer program, which when executed by a processor performs the method according to any one of claims 1-12.

16. A computer program product comprising a computer program which, when run, causes a computer to perform the method of any of claims 1-12.