Table data processing method and device

Abstract

The embodiment of the present application provides a table data processing method and device, the method comprises the following steps: in response to a table editing operation in a graphical user interface of a first application program, a table editing event is determined. A data structure corresponding to first rich text content in a rich text editor is obtained, and the data structure is updated 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 includes a table. The technical solution of the present application can simply and effectively realize that the rich text editor supports the table editing function, so as to improve the comprehensiveness of the function of the rich text editor.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a method and apparatus for processing tabular data. Background Technology

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

[0003] Tables are a data structure that allows for the orderly organization of data. Supporting table processing in rich text editors can significantly enhance their usability. However, current rich text editors are typically developed based on the system's native framework, and implementing table functionality and related complex interactive logic within a native framework is extremely difficult. Therefore, rich text editors currently developed based on native frameworks generally do not support table editing. Summary of the Invention

[0004] This application provides a method and apparatus for processing tabular data, which is applied in the field of terminal technology.

[0005] In a first aspect, embodiments of this application propose a method for processing tabular data, applied to a first application, the first application including a rich text editor. The method includes:

[0006] In response to a table editing operation performed on the graphical user interface of the first application, determine the table editing event;

[0007] Obtain the 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;

[0008] Based on the updated data structure, the second rich text content corresponding to the updated data structure is displayed in the rich text editor, wherein the first rich text content and / or the second rich text content includes a table;

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

[0010] In this implementation, a rich text editor is developed using a web page view. By updating the data structure of the rich text content in the rich text editor, the edited rich text content can be displayed in the rich text editor. The rich text content before and / or after editing may include tables, and the specific processing of table editing is completed through updating the data structure. Therefore, it is possible to simply and effectively implement table editing functionality in the rich text editor, thereby improving the comprehensiveness of the rich text editor's functions.

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

[0012] The response acts on a table editing operation in the graphical user interface of the first application, determining the table editing event, including:

[0013] In response to a click operation applied to the table insertion control, an adjustment control is displayed in the graphical user interface, the adjustment control including multiple pre-selected cells and / or text input boxes;

[0014] In response to a selection operation applied to the plurality of pre-selected cells, or in response to a confirmation operation for input content in the text input box, the table editing event is determined to be an insertion event. The selection operation and the confirmation operation are used to indicate the table size, and the insertion event is used to indicate the insertion of a table corresponding to the table size in the rich text editor.

[0015] The table insertion operation is either the selection operation or the confirmation operation.

[0016] In this implementation, by providing users with adjustment controls, users can input the table size according to their actual needs. Then, the rich text editor can insert a table of the user-defined size accordingly, thereby improving the flexibility of table processing.

[0017] In some implementations, updating the data structure based on the table edit event includes:

[0018] Based on the insertion event, determine the table size of the table to be inserted;

[0019] Based on the table size, a table data structure corresponding to the table to be inserted is generated, and the table data structure includes sub-data corresponding to each of the multiple cells in the table to be inserted.

[0020] The tabular data structure is added to the target position in the data structure to obtain the updated data structure.

[0021] 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 in the data structure. Then, based on the updated data structure, rendering can be performed, which can effectively achieve the insertion of a table in a rich text editor.

[0022] In some implementations, the method further includes:

[0023] For the table displayed in the rich text editor, in response to the selection operation applied to the table, determine the selected cell corresponding to the selection operation;

[0024] Based on the selected cell corresponding to the selection operation, determine the position information of the selection box, which includes the width, height, and coordinate position;

[0025] The selected box is rendered and displayed in the rich text editor based on its position information.

[0026] In this implementation, by displaying a selection box in the rich text editor based on the cell selected by the user, the selected area in the table can be specially displayed, thereby effectively improving the diversity of table operations in the rich text editor.

[0027] In some implementations, the rich text editor displays row selection controls and column selection controls;

[0028] 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,

[0029] 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.

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

[0031] In some implementations, the selection operation is a drag operation performed on the table;

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

[0033] In this implementation, the user selects the cell by dragging and dropping, thus enabling flexible and effective selection of the cells the user needs in the table.

[0034] In some implementations, the response acts on a table editing operation in the graphical user interface of the first application, and determining the table editing event includes:

[0035] In response to a triggering operation applied to the selected cell, at least one selection control is displayed, the selection control including at least one of the following: a delete control, a first add control, and a second add control;

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

[0037] In this implementation, at least one control is displayed in response to a user's trigger action on the selected cell, thereby providing the user with a variety of possible modification options for the selected cell and enhancing the diversity of table interaction methods.

[0038] In some implementations, the selected cells are located in the same row in the table. In this case, the first add control is used to indicate that a row of cells is added above the row of the selected cells, the second add control is used to indicate that a row of cells is added below the row of the selected cells, and the delete control is used to indicate that the cells in the row of the selected cells are deleted.

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

[0040] The step of updating the data structure based on the table edit event includes:

[0041] In the data structure, delete the sub-data corresponding to each cell in the row where the selected cell is located to obtain the updated data structure;

[0042] If the target selection control is the first added control, then the modification event is the first added row event;

[0043] The step of updating the data structure based on the table edit event includes:

[0044] Add sub-data corresponding to a row of cells at a first position in the data structure to obtain the updated data structure. The first position is used to make the cell of the added row above the cell of the row where the selected cell is located.

[0045] If the target selection control is the second added control, then the modification event is the second added row event;

[0046] The step of updating the data structure based on the table edit event includes:

[0047] Add sub-data corresponding to a row of cells at the second position in the data structure to obtain the updated data structure. The second position is used to make the cell of the added row below the cell of the row where the selected cell is located.

[0048] In this implementation, for the three different events of deleting a row, adding a row above, and adding a row below, the corresponding positions in the data structure can be updated accordingly. This allows for effective implementation of the corresponding event operations in the table while ensuring the correctness of the original content in the table.

[0049] In some implementations, the selected cells are located in the same column in the table. In this case, the first add control is used to indicate that a column of cells is added to the left of the column where the selected cell is located, the second add control is used to indicate that a column of cells is added to the right of the column where the selected cell is located, and the delete control is used to indicate that the cells in the column where the selected cell is located are deleted.

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

[0051] The step of updating the data structure based on the table edit event includes:

[0052] In the data structure, delete the sub-data corresponding to each cell in the column where the selected cell is located to obtain the updated data structure;

[0053] If the target selection control is the first added control, then the modification event is the first added column event;

[0054] The step of updating the data structure based on the table edit event includes:

[0055] Add sub-data corresponding to a column of cells at the third position in the data structure to obtain the updated data structure. The third position is used to make the cell to which the added column is located to the left of the cell in the column where the selected cell is located.

[0056] If the target selection control is the second added control, then the modification event is the second added column event;

[0057] The step of updating the data structure based on the table edit event includes:

[0058] Add sub-data corresponding to a column of cells at the fourth position in the data structure to obtain the updated data structure. The fourth position is used to make the cell to which the added column is located to the right of the cell in the column where the selected cell is located.

[0059] In some implementations, the rich text editor includes a table editing plugin and a data processing unit;

[0060] The step of updating the data structure based on the table edit event includes:

[0061] The update instruction corresponding to the table editing event is determined through the table editing plugin;

[0062] The table editing plugin sends the update instruction to the data processing unit, so that the data processing unit updates the data structure according to the update instruction.

[0063] In this implementation, for the three different events of deleting a column, adding a column to the left, and adding a column to the right, the corresponding positions in the data structure can be updated accordingly. This allows for effective implementation of the corresponding event operations in the table while ensuring the correctness of the original content in the table.

[0064] Secondly, embodiments of this application provide a tabular data processing apparatus. The apparatus includes:

[0065] The determination module is used to respond to table editing operations performed in the graphical user interface of the first application and to determine table editing events;

[0066] The acquisition module is used to acquire the 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;

[0067] The processing module is configured to display, in the rich text editor, the second rich text content corresponding to the updated data structure, wherein the first rich text content and / or the second rich text content includes a table.

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

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

[0070] The determining module is specifically used for:

[0071] In response to a click operation applied to the table insertion control, an adjustment control is displayed in the graphical user interface, the adjustment control including multiple pre-selected cells and / or text input boxes;

[0072] In response to a selection operation applied to the plurality of pre-selected cells, or in response to a confirmation operation for input content in the text input box, the table editing event is determined to be an insertion event. The selection operation and the confirmation operation are used to indicate the table size, and the insertion event is used to indicate the insertion of a table corresponding to the table size in the rich text editor.

[0073] The table insertion operation is either the selection operation or the confirmation operation.

[0074] In some implementations, the processing module is specifically used for:

[0075] Based on the insertion event, determine the table size of the table to be inserted;

[0076] Based on the table size, a table data structure corresponding to the table to be inserted is generated, and the table data structure includes sub-data corresponding to each of the multiple cells in the table to be inserted.

[0077] The tabular data structure is added to the target position in the data structure to obtain the updated data structure.

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

[0079] For the table displayed in the rich text editor, in response to the selection operation applied to the table, determine the selected cell corresponding to the selection operation;

[0080] Based on the selected cell corresponding to the selection operation, determine the position information of the selection box, which includes the width, height, and coordinate position;

[0081] The selected box is rendered and displayed in the rich text editor based on its position information.

[0082] In some implementations, the rich text editor displays row selection controls and column selection controls;

[0083] 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,

[0084] 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.

[0085] In some implementations, the selection operation is a drag operation performed on the table;

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

[0087] In some implementations, the determining module is specifically used for:

[0088] In response to a triggering operation applied to the selected cell, at least one selection control is displayed, the selection control including at least one of the following: a delete control, a first add control, and a second add control;

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

[0090] In some implementations, the selected cells are located in the same row in the table. In this case, the first add control is used to indicate that a row of cells is added above the row of the selected cells, the second add control is used to indicate that a row of cells is added below the row of the selected cells, and the delete control is used to indicate that the cells in the row of the selected cells are deleted.

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

[0092] The processing module is specifically used for:

[0093] In the data structure, delete the sub-data corresponding to each cell in the row where the selected cell is located to obtain the updated data structure;

[0094] If the target selection control is the first added control, then the modification event is the first added row event;

[0095] The processing module is specifically used for:

[0096] Add sub-data corresponding to a row of cells at a first position in the data structure to obtain the updated data structure. The first position is used to make the cell of the added row above the cell of the row where the selected cell is located.

[0097] If the target selection control is the second added control, then the modification event is the second added row event;

[0098] The processing module is specifically used for:

[0099] Add sub-data corresponding to a row of cells at the second position in the data structure to obtain the updated data structure. The second position is used to make the cell of the added row below the cell of the row where the selected cell is located.

[0100] In some implementations, the selected cells are located in the same column in the table. In this case, the first add control is used to indicate that a column of cells is added to the left of the column where the selected cell is located, the second add control is used to indicate that a column of cells is added to the right of the column where the selected cell is located, and the delete control is used to indicate that the cells in the column where the selected cell is located are deleted.

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

[0102] The processing module is specifically used for:

[0103] In the data structure, delete the sub-data corresponding to each cell in the column where the selected cell is located to obtain the updated data structure;

[0104] If the target selection control is the first added control, then the modification event is the first added column event;

[0105] The processing module is specifically used for:

[0106] Add sub-data corresponding to a column of cells at the third position in the data structure to obtain the updated data structure. The third position is used to make the cell to which the added column is located to the left of the cell in the column where the selected cell is located.

[0107] If the target selection control is the second added control, then the modification event is the second added column event;

[0108] The processing module is specifically used for:

[0109] Add sub-data corresponding to a column of cells at the fourth position in the data structure to obtain the updated data structure. The fourth position is used to make the cell to which the added column is located to the right of the cell in the column where the selected cell is located.

[0110] In some implementations, the rich text editor includes a table editing plugin and a data processing unit;

[0111] The processing module is specifically used for:

[0112] The update instruction corresponding to the table editing event is determined through the table editing plugin;

[0113] The table editing plugin sends the update instruction to the data processing unit, so that the data processing unit updates the data structure according to the update instruction.

[0114] Thirdly, embodiments of this application provide a terminal device, which can also be referred to as a terminal, user equipment (UE), mobile station (MS), mobile terminal (MT), etc. The terminal device can be a mobile phone, smart TV, wearable device, tablet computer, computer with wireless transceiver function, virtual reality (VR) terminal device, augmented reality (AR) terminal device, wireless terminal in industrial control, wireless terminal in self-driving, wireless terminal in remote medical surgery, wireless terminal in smart grid, wireless terminal in transportation safety, wireless terminal in smart city, wireless terminal in smart home, etc.

[0115] The terminal device includes: a processor and a memory; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory, causing the terminal device to perform the method as described in the first aspect.

[0116] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program. When executed by a processor, the computer program implements the method as described in the first aspect.

[0117] Fifthly, embodiments of this application provide a computer program product, which includes a computer program that, when run, causes a computer to perform the method as described in the first aspect.

[0118] In a sixth aspect, embodiments of this application provide a chip, the chip including a processor, the processor being configured to invoke a computer program in memory to perform the method described in the first aspect.

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

[0120] This application provides a method and apparatus for processing tabular data. The method includes: responding to a table editing operation in a graphical user interface of a first application, determining a table editing event; obtaining a data structure corresponding to first rich text content in a 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, wherein the first rich text content and / or the second rich text content includes a table. By developing a rich text editor through a web view, the edited rich text content can be displayed in the rich text editor by updating the data structure of the rich text content. The rich text content before and / or after editing may include tables, and the specific processing of table editing is completed through updating the data structure. Therefore, it is possible to simply and effectively implement table editing functionality in a rich text editor, thereby improving the comprehensiveness of the rich text editor's functions. Attached Figure Description

[0121] Figure 1 A schematic diagram of the architecture of the rich text editor provided in the embodiments of this application;

[0122] Figure 2 A schematic diagram of the interface of the first application corresponding to the rich text editor provided in this application embodiment. Figure 1 ;

[0123] Figure 3 A schematic diagram of the interface of the first application corresponding to the rich text editor provided in this application embodiment. Figure 2 ;

[0124] Figure 4 A flowchart of a tabular data processing method provided in an embodiment of this application;

[0125] Figure 5 The flowchart of the tabular data processing method provided in the embodiments of this application Figure 2 ;

[0126] Figure 6 A schematic diagram illustrating the implementation of the table insertion method provided in this application embodiment;

[0127] Figure 7 The flowchart of the tabular data processing method provided in the embodiments of this application Figure 3 ;

[0128] Figure 8 The implementation illustration provided in the table for the embodiments of this application is determined. Figure 1 ;

[0129] Figure 9 The implementation illustration provided in the table for the embodiments of this application is determined. Figure 2;

[0130] Figure 10 The implementation illustration provided in the table for the embodiments of this application is determined. Figure 3 ;

[0131] Figure 11 The flowchart of the tabular data processing method provided in the embodiments of this application Figure 4 ;

[0132] Figure 12 Implementation illustration of the modified table provided in the embodiments of this application Figure 1 ;

[0133] Figure 13 Implementation illustration of the modified table provided in the embodiments of this application Figure 2 ;

[0134] Figure 14 A schematic diagram illustrating the processing procedure of the table processing method provided in this application embodiment;

[0135] Figure 15 This is a schematic diagram of the structure of the tabular data processing device provided in the embodiments of this application;

[0136] Figure 16 This is a schematic diagram of the hardware structure of the terminal device provided in the embodiments of this application. Detailed Implementation

[0137] To facilitate a clear description of the technical solutions in the embodiments of this application, the terms "exemplary" or "for example" are used in the embodiments of this application to indicate that they are examples, illustrations, or descriptions. Any embodiment or design scheme described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or design schemes. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0138] In this application embodiment, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one of the following" or similar expressions refer 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, ab, ac, bc, or abc, where a, b, and c can be single or multiple.

[0139] It should be noted that the phrase "at...time" in the embodiments of this application can refer to the instant at which a certain situation occurs, or to a period of time after the occurrence of a certain situation; the embodiments of this application do not specifically limit this. Furthermore, the display interface provided in the embodiments of this application is merely an example, and the display interface may include more or less content.

[0140] To better understand the technical solution of this application, the relevant technologies involved in this application will be further described in detail below.

[0141] With the development of information technology, smart terminals are playing an increasingly important role in people's lives. When users have tasks to complete or events to record, they tend to jot them down in apps like memos. The content users record may include not only simple text but also tables, images, and other information, requiring memo apps to have rich text editing capabilities.

[0142] Tables are a data structure that allows for the orderly organization of data. Supporting table processing in rich text editors can significantly enhance their usability. However, current rich text editors are typically developed based on the system's native framework, and implementing table functionality and related complex interactive logic within a native framework is extremely difficult. Therefore, rich text editors currently developed based on native frameworks generally do not support table editing.

[0143] For example, the built-in Notes app on Android devices currently lacks table-related operations. This is because implementing tables and their complex interactive logic within Android's native framework is extremely difficult. Therefore, many system-provided Notes apps either lack table editing functionality or do not support complex table editing features. It's understandable that this problem isn't limited to system-provided Notes apps or Android systems; lightweight rich text editors across various systems face similar issues. Due to the limitations of the system's native framework and the complexity of implementing table functionality, rich text editors struggle to implement table editing features, resulting in a lack of comprehensive functionality.

[0144] Based on the technical problems in related technologies, this application proposes the following technical concept: developing a rich text editor based on a webview, where the webview technology can modify the display style of rich text content in the rich text editor by modifying the data structure of JSON (JavaScript Object Notation) format. Therefore, the rich text editor can easily and effectively support table editing functions, thereby effectively improving the functionality of the rich text editor.

[0145] Before introducing the form processing method provided in this application, for example, we can first combine it with Figure 1 To understand the architecture of rich text editors, Figure 1 This is a schematic diagram of the architecture of the rich text editor provided in the embodiments of this application.

[0146] like Figure 1 As shown, the technical solution of this application can develop a rich text editor product, and then integrate this rich text editor product into different terminal platforms.

[0147] exist Figure 1 The examples use Android and Windows platforms to illustrate the architecture of a rich text editor. (Refer to...) Figure 1 It can be determined that the rich text editor in this embodiment can be used as both an Android product on the Android platform and a desktop product on the Windows platform.

[0148] In one possible implementation, rich text editors are typically integrated into applications, providing rich text editing functionality to the corresponding applications. The following examples use the Android Notes app and the PC Notes app as illustrations. However, it's understandable that the implementation for other applications that need to integrate rich text editors is similar, and will not be elaborated upon here.

[0149] The following is combined with Figure 1 First, let's explain the Notes app on Android. The Android Notes app is an application with rich text editing capabilities. (Refer to...) Figure 1 It is certain that the Android version of the memo includes both a Native layer and a Webview layer.

[0150] The Native layer contains Activity components, View components, Button components, and a user event handling unit. The Activity, View, and Button components are part of the Android native User Interface (UI) framework, enabling UI rendering. The visual interface that the user interacts with while using the memo is rendered by these Native layer components. The user event handling unit can listen for events in the UI to obtain the user's intent, such as setting text to bold, italic, or font size.

[0151] Through the JS-Android communication interface, the event handling unit can pass listened-to events to the WebView layer. The WebView layer includes an interface layer and a rich text editor. The interface layer contains HTML (Hypertext Markup Language) layout, CSS (Cascading Style Sheets) styles, and a JS loading unit for rendering 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 allows users to edit rich text content.

[0152] Next, let's combine... Figure 1 This section describes the Notes app on a personal computer (PC). The PC-based Notes app can run on the Windows platform, such as... Figure 1 As shown, for PC-based memos, the application is built on a web page view layer. This web page view layer can include UI rendering units, user event handling units, command handling units, and a rich text editor.

[0153] The UI rendering unit includes React components, HTML layout sub-units, and CSS style sub-units. The PC-side memo uses the React framework for UI rendering, and the user event handling unit listens for UI layer events and identifies user intent. The instruction processing unit further transforms user intent into instructions. Through a series of operations such as instruction subscription, instruction matching, and instruction dispatch, the instructions are passed to the rich text editor, which then executes the editing actions based on the received instructions.

[0154] exist Figure 1 The illustration shows a rich text editor deployed in the PC version of Notes on the Windows platform, and also in the Android version of Notes on the Android platform. The editor deployed on different platforms is actually the same as the one used on the PC version. Figure 1 The middle section shows a rich text editor. And... Figure 1 This is merely an example of deploying a rich text editor on Windows and Android platforms. In reality, rich text editors can be deployed on a variety of possible platforms, and the specific deployment platform can be selected and configured according to actual needs.

[0155] and reference Figure 1 It can be determined that the rich text editor in this embodiment may include five parts: rendering mechanism, history, plugin mechanism, behavior control, and data structure.

[0156] The rendering mechanism, also known as the first rendering unit, is used to render and display the content in the rich text editor. The history record, also known as the recording unit, is used to record operations within the rich text editor. The plug-in mechanism, also known as the plugin unit, includes multiple plugins, each implementing a different function; for example, the table editing operation in this embodiment could be implemented by the table editing plugin within the plugin unit. The behavior control, also known as the execution unit, is used to encapsulate the relevant data parsed by the plugin mechanism to obtain instructions that the data structure can recognize. The data structure, also known as the data processing unit, is used to modify the data structure corresponding to the JSON-formatted rich text data according to the instructions generated by the behavior control.

[0157] Based on the above introduction, the following example can be combined with... Figure 2 and Figure 3 Understand the user interface of the Notes app on both PC and Android. Figure 2 A schematic diagram of the interface of the first application corresponding to the rich text editor provided in this application embodiment. Figure 1 , Figure 3 A schematic diagram of the interface of the first application corresponding to the rich text editor provided in this application embodiment. Figure 2 .

[0158] like Figure 2 As shown, the Memos graphical user interface includes a file list, a note list, and a user event response area. The file list displays the user's file categories, the note list displays a list of rich text files stored in folders, and the user event response area displays the editing operations that the user can perform on the rich text content. The Memos graphical user interface also includes a rich text editor area where the user can edit the rich text content.

[0159] as well as Figure 3 This diagram illustrates the interface of the Notes app on Android, and its similarity to... Figure 2 The interface of the PC version of the memo app is similar, so it will not be described in detail here.

[0160] Combination Figure 2 and Figure 3 It is understood that applications containing rich text editors can be installed on devices on different platforms. These applications can provide rich text editing functions based on rich text editors. The specific application devices and platforms of the technical solution of this application can be selected and set according to actual needs, and this embodiment does not limit them.

[0161] Based on the above introduction, the following will combine... Figure 4 The specific implementation of the tabular data processing method provided in this application is explained. Figure 4 A flowchart of a tabular data processing method provided in an embodiment of this application.

[0162] like Figure 4 As shown, the method includes:

[0163] S401, In response to a table editing operation performed on the graphical user interface of the first application, determine the table editing event.

[0164] The method of this embodiment can be applied to a first application, which includes a rich text editor. In actual implementation, the first application may be, for example, the memo application described above, but is not limited to the memo application described above. It may be any application that requires rich text editing functions, such as an instant messaging application that supports rich text editing functions, a document application that supports rich text editing functions, etc. This embodiment does not limit the specific implementation of the first application.

[0165] Because the first application in this embodiment can support table editing, users can input table editing operations in the graphical user interface of the first application. These table editing operations can be, for example, click operations, long press operations, swipe operations, etc., on the table editing controls. This embodiment does not limit the specific implementation of the table editing operations, but depends on how the first application sets up the relevant controls for the table editing function.

[0166] After the first application detects a user's input for table editing, it can respond to that operation by determining the table editing event triggered by the operation. Understandably, different table editing operations can trigger different table editing events. In one possible implementation, the table editing event could include, for example, an insert event for inserting a table, a modify event for modifying a table, or a delete event for deleting a table.

[0167] S402. Obtain the 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.

[0168] Based on the above introduction, it can be determined that users can edit rich text content in the rich text editor. In this embodiment, the rich text content in the rich text editor before the table editing operation is referred to as the first rich text content. The first rich text content may be empty or not, depending on the specific implementation. This embodiment does not impose any restrictions on this.

[0169] In this embodiment, for the first rich text content in the rich text editor, during the initialization of the rich text editor, for example, a data structure corresponding to the first rich text content has already been generated. In one possible implementation, if the first rich text content is empty, then 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, then the data structure can reflect the specific rich text structure and rich text content of the first rich text content. The data structure can, for example, be in JSON format.

[0170] 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 aforementioned table editing operation is used to instruct the triggering of corresponding table editing events in the first rich text editor. Specific table editing events can instruct the corresponding table editing to be performed in the first rich text editor, such as inserting, modifying, or deleting a table. Correspondingly, these table editing events will modify the first rich text content in the rich text editor, and the corresponding data structure of 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 events.

[0171] In one possible implementation, the corresponding data structure update method varies for different table editing events. The specific table editing event and the corresponding data structure update method 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.

[0172] S403. Based on the updated data structure, display the 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.

[0173] It is understandable that the display style and content of rich text content in a rich text editor developed based on a webpage view are implemented by rendering the rich text content according to the data structure. Therefore, in this embodiment, after updating the data structure, the second rich text content corresponding to the updated data structure can be rendered and displayed in the rich text editor.

[0174] 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. Thus, 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.

[0175] In this embodiment, tables may be included in the first rich text content and / or the second rich text content. In one possible implementation, for example, if the first rich text content does not contain a table, and a table editing operation is used to trigger the insertion of a table in the rich text editor, then after the processing described above, the second rich text content will include a table.

[0176] Alternatively, for example, if a table exists in the first rich text content, and the table editing operation is used to trigger the deletion of the table in the first rich text content, then after the processing described above, the deleted table will not exist in the second rich text content.

[0177] Alternatively, for example, if a table exists within the first rich text content, and a table editing operation is used to trigger modification of the table within the first rich text content, then based on the processing described above, the table included in the second rich text content will be modified accordingly compared to the table included in the first rich text content.

[0178] The table data processing method provided in this application includes: responding to a table editing operation in the graphical user interface of a first application and determining a table editing event; obtaining the data structure corresponding to a first rich text content in a rich text editor and updating the data structure according to the table editing event; and 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 includes a table. By developing a rich text editor through a web view, the edited rich text content can be displayed in the rich text editor by updating the data structure of the rich text content. The rich text content before and / or after editing may include tables, and the specific processing of table editing is completed through updating the data structure. Therefore, it is possible to simply and effectively implement table editing functionality in the rich text editor, thereby improving the comprehensiveness of the rich text editor's functions.

[0179] Based on the above introduction, it can be understood that there can be multiple table editing events, and the table editing operations that trigger these events can also be implemented accordingly. The following will introduce various different table editing events with specific examples.

[0180] In one possible implementation, table editing operations may include, for example, an insert event for inserting a table, as described below. Figures 5 to 6 The implementation details for inserting tables are explained. Figure 5 The flowchart of the tabular data processing method provided in the embodiments of this application Figure 2 , Figure 6 This is a schematic diagram illustrating the implementation of inserting a table according to an embodiment of this application.

[0181] like Figure 5 As shown, the method includes:

[0182] S501. In response to a click operation applied to the table insert control, display an adjustment control in the graphical user interface, the adjustment control including multiple pre-selected cells and / or text input boxes.

[0183] In this embodiment, the graphical user interface of the first application may include a table insertion control, wherein the table insertion control is used to display adjustment controls in response to user operations.

[0184] For example, it can be combined Figure 2 To understand, such as Figure 2 As shown, a user event response area exists in the graphical user interface of the first application, and within the user event response area, there is... Figure 2 The table insertion control 201 is shown.

[0185] Assuming the user has Figure 2 The table insertion control 201 shown was clicked, and the first application can then respond to the click on the table insertion control 201 by displaying a graphical user interface. Figure 2 The adjustment control 202 is shown.

[0186] Reference Figure 2 It can be determined that the adjustment control 202 may include multiple preselection units 203 and a text input box 204.

[0187] In one possible implementation, the adjustment control may include only pre-selected cells, only text input boxes, or both pre-selected cells and text input boxes, which can be selected and set according to actual needs. Furthermore, in the actual implementation, 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; this embodiment does not impose any restrictions on this.

[0188] S502, responding to a selection operation applied to multiple pre-selected cells, or responding to a confirmation operation for input content in a text input box, determining the table editing event as an insert event, the selection operation and the confirmation operation are used to indicate the table size, and the insert event is used to indicate that a table corresponding to the table size is inserted in the rich text editor.

[0189] The adjustment control includes pre-selected cells that receive user selections to determine the size of the table to be inserted. The text input box receives user-entered text and determines the table size based on that text. In other words, all controls within the adjustment control are designed to allow users to adjust the table size.

[0190] In one possible implementation, the table editing event can be determined as an insert event in response to a selection operation applied to multiple pre-selected cells. The selection operation can be used to indicate the table size; for example, if a user selects n rows and m columns of pre-selected cells, the corresponding table size is n rows and m columns. In this embodiment, the insert event is used to indicate the table size corresponding to the inserted table in the rich text editor.

[0191] For this implementation method, for example, it can be combined with Figure 2 To understand, such as Figure 2 As shown, assuming a selection operation is applied to multiple preselected cells, and 3 rows and 4 columns of preselected cells are selected, then the table size can be determined to be 3 rows and 4 columns, and the corresponding insert event is used to indicate that a table with a size of 3 rows and 4 columns is inserted in the rich text editor.

[0192] Alternatively, in another possible implementation, the table editing event can be determined as an insert event in response to a confirmation action on the input content in the text input box. The input content in the text input box indicates the table size; for example, if the user enters "nm" in the text input box and a confirmation action is triggered on this input, the corresponding table size can be determined to be n rows and m columns. The insert event in this embodiment is used to indicate the insertion of a table corresponding to the specified size in the rich text editor.

[0193] For this implementation method, for example, it can be combined with Figure 2 To understand, such as Figure 2 As shown, assume the input content in the text input box is 3-4 ( Figure 2 (not shown), and refer to Figure 2 It is certain that a confirmation control 205 also exists within the adjustment control 202. Assuming the user clicks the confirmation control 205, a confirmation action will be generated for the input content in the text input box. Figure 2 In the example, we can determine that the table size is 3 rows and 4 columns, and the corresponding insert event is used to indicate that a table with a size of 3 rows and 4 columns is inserted in the rich text editor.

[0194] Based on the above description, the table insertion operation in this embodiment is the selection operation or confirmation operation described above, or the table insertion operation may also include the click operation on the table insertion control described above.

[0195] S503. Obtain the data structure corresponding to the first rich text content in the rich text editor.

[0196] The implementation of S503 is similar to that of S402 described above, and will not be repeated here.

[0197] S504. Determine the table size of the table to be inserted based on the insertion event.

[0198] In this embodiment, it is assumed that the table editing event corresponding to the table editing operation is an insert event, where the insert event is used to indicate the insertion of a table of the specified size in the rich text editor. Therefore, the table size of the table to be inserted can be determined based on the insert event.

[0199] S505. Based on the table size, generate the table data structure corresponding to the table to be inserted. The table data structure includes the sub-data corresponding to each of the multiple cells in the table to be inserted.

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

[0201] The table data structure can be in JSON format, for example. In one possible implementation, for the example of a table with 3 rows and 4 columns described above, the corresponding table data structure would be as follows:

[0202]

[0203]

[0204]

[0205]

[0206] Based on the table data structure described above, it can be determined that the table data structure includes sub-data corresponding to each cell in the table to be inserted. The sub-data can indicate the position of the cell in the table, and can also indicate the specific text content in the cell.

[0207] It should also be noted that in the table data structure described above, there is a cursor element before the corresponding sub-data in the cell. This cursor element is the cursor located before the entire table and can be displayed before the table based on the user's click operation.

[0208] In addition, there is a cursor element after the corresponding sub-data in the cell. This cursor element is the cursor after the entire table, and it can be displayed after the table based on the user's click operation. For example, in... Figure 6 In the example, the corresponding cursor appears after the entire table.

[0209] S506. Add the tabular data structure to the target position in the data structure to obtain the updated data structure.

[0210] After determining the table data structure, the table data structure can be added to the target position in the data structure corresponding to the first rich text content to obtain the updated data structure.

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

[0212] Alternatively, when the first rich text content is not empty, the user inserting a table must be done at a corresponding position within the first rich text content. For example, a table could be inserted between text and an image, or after the text, etc. In short, the table is inserted at a certain position within 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.

[0213] After determining the target location, add the tabular data structure to the target location in the data structure to obtain the updated data structure.

[0214] S507. Based on the updated data structure, display the 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.

[0215] The implementation of S507 is similar to that of S403 described above.

[0216] Furthermore, based on the example described above, if the updated data structure includes the 3-row, 4-column table data structure to be inserted, then the updated data structure can be used to display the second rich text content corresponding to the updated data structure in the rich text editor. The displayed second rich text content can, for example, combine... Figure 6 To understand, such as Figure 6 As shown, the second rich text content displayed in the rich text editor includes... Figure 6 The table shown is a 3-row, 4-column table.

[0217] The table data processing method provided in this application displays an adjustment control in a graphical user interface in response to a click operation on the table insertion control. The adjustment control can include pre-selected cells and / or input text, allowing the user to customize the required table size. Then, based on the user-inputted table size, a corresponding table editing event is determined as an insertion event, indicating the insertion of a table corresponding to the specified size into a rich text editor. Following this insertion event, a table data structure corresponding to the table to be inserted is generated. This data structure includes sub-data corresponding to each cell in the table to be inserted, where the number of cells matches the user-inputted table size. Finally, rich text content is rendered based on the updated data structure. This effectively enables the insertion of user-defined tables into a rich text editor. Furthermore, the process described above achieves table insertion simply by updating the data structure and then rendering it, thus providing a simple and effective way for a rich text editor to support table insertion.

[0218] Building upon the above description, users can select cells within a table inserted into the rich text editor. The following section will further elaborate on this. Figures 7 to 10 This application describes the implementation method of selecting areas in a table in the table data processing method provided. Figure 7 The flowchart of the tabular data processing method provided in the embodiments of this application Figure 3 , Figure 8 The implementation diagram provided in the table for the embodiments of this application is a sample of the selected implementation. Figure 1 , Figure 9 The implementation diagram provided in the table for the embodiments of this application is a sample of the selected implementation. Figure 2 , Figure 10 The implementation diagram provided in the table for the embodiments of this application is a sample of the selected implementation. Figure 3 .

[0219] like Figure 7 As shown, the method includes:

[0220] S701. For a table displayed in a rich text editor, respond to the selection operation applied to the table and determine the selected cell corresponding to the selection operation.

[0221] In this embodiment, the user can perform selection operations on the table displayed in the rich text editor. The table displayed in the rich text editor can be, for example, a table within the first rich text content—meaning the table already exists in the rich text editor before the table insertion operation described above is performed. Alternatively, it can be a table within the second rich text content—meaning a table inserted into the rich text editor after the table insertion operation described above is performed. In other words, regardless of when the table is inserted, selection operations can be performed on the table displayed in the rich text editor.

[0222] After receiving a selection operation from the user, the system can respond to the selection operation and determine the selected cell.

[0223] In one possible implementation, a row selection control is displayed in the rich text editor; then 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.

[0224] For example, it can be combined Figure 8 To understand, such as Figure 8 As shown, a row selection control 801 is displayed in the rich text editor. This control is used to select a specific row and can also indicate which row the currently active cell is located in. For example, if the user is editing a cell in the first row, the row selection control 801 will... Figure 8 As shown, it is located in the first row.

[0225] The selection operation, for example, could be a click operation on a row selection control. In this case, the selected cells correspond to the selected rows, which are multiple cells within the selected row as defined by the row selection control. For example, in... Figure 8 In the example, the row selection control corresponds to the first row, so multiple cells in the first row are the selected cells.

[0226] In another possible implementation, the rich text editor displays a column selection control; then 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.

[0227] For example, it can be combined Figure 9 To understand, such as Figure 9 As shown, a column selection control 901 is displayed in the rich text editor. This control is used to select a specific column and can also indicate which column the currently active cell is located in. For example, if the user is editing a cell in the first column, the column selection control 901 will... Figure 9 As shown, it is located in the first column.

[0228] In this context, a selection operation could be a click operation on a column selection control. In this case, the selected cells correspond to multiple cells in the selected column of the column selection control. For example, in... Figure 9 In the example, the selected column corresponding to the column selection control is the first column, so multiple cells in the first column are the selected cells.

[0229] Alternatively, in another possible implementation, the selection operation can also be a drag operation on the table. In this case, the selected cell is the cell included in the drag range formed by the drag operation.

[0230] For example, it can be combined Figure 10 To understand, such as Figure 10 As shown, assume the user's drag-and-drop operation trajectory is as follows: Figure 10 As shown by the arrow in the image, for example, the bounding rectangle of the drag path is defined as the drag range formed by the drag operation, which is... Figure 10 The range indicated by 1001 can then be dragged to select the cells within the range 1001, namely the four cells in row 1, column 1, row 1, column 2, row 2, column 1, and row 2.

[0231] S702. Based on the selected cells corresponding to the selection operation, determine the position information of the selection box, including its width, height, and coordinate position.

[0232] After selecting a cell, the position information of the selection box can be determined based on the selected cell. The position information can include the width, height, and coordinates of the selection box.

[0233] The width and height of the selection box depend on which cells are selected. The position information of the selection box could be, for example, the coordinates of its top-left corner. One possible implementation is to use the top-left corner of the table as the origin, define the positive x-axis as the direction to the right of the origin, and the positive y-axis as the direction downwards from the origin. Based on this, the position of the top-left corner of the selection box indicates its position within the table, and therefore can be defined as its coordinates.

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

[0235] In one possible implementation, this embodiment attaches a checkbox to each table created during table creation. When no cell is selected, the checkbox's length, width, x-coordinate, and y-coordinate are all 0, meaning it can be considered to exist at the top left corner of the table but has no size. Later, when a cell is selected, the checkbox's length, width, and coordinates can be modified based on the selected cell's location to ensure the checkbox is displayed in the appropriate position.

[0236] S703. Render and display the selected box in the rich text editor based on the position information of the selected box.

[0237] After determining the position information of the selection box, the selection box can be rendered and displayed in the corresponding position in the table of the rich text editor with a preset style, based on the position information of the selection box.

[0238] For example, refer to Figure 8 , Figure 9 and Figure 10 All of this is understandable. Figure 8 802 in Figure 9 902 and Figure 10 In the text, 1001 represents the displayed checkbox. In actual implementation, the specific display style of the checkbox can be selected and set according to actual needs, and this embodiment does not impose any special restrictions on this.

[0239] The table data processing method provided in this application embodiment can effectively insert a selection area into the table and select the corresponding cell by adding a selection box to the created table, determining the selected cell based on the user's selection operation, determining the position information of the selection box based on the selected cell, and then rendering and displaying the selection box according to the position information of the selection box. Among these methods, selecting a cell is the basis of many table operations. The rich text editor in this embodiment can effectively select cells in the table and indicate the position of the selected cell through the selection box.

[0240] Based on the above description, the table editing event in this application can also be a modification event for the table. The following section will discuss this further. Figures 11 to 13 The implementation of modifying tables in the tabular data processing method provided in the embodiments of this application will be described. Figure 11The flowchart of the tabular data processing method provided in the embodiments of this application Figure 4 , Figure 12 Implementation illustration of the modified table provided in the embodiments of this application Figure 1 , Figure 13 Implementation illustration of the modified table provided in the embodiments of this application Figure 2 .

[0241] like Figure 11 As shown, the method includes:

[0242] S1101. In response to a triggering operation applied to the selected cell, display at least one selection control, which includes at least one of the following: a delete control, a first add control, and a second add control.

[0243] In this embodiment, when modifications are needed to the table, such as modifications to a selected cell, at least one selection control can be displayed in the rich text editor in response to a triggering operation applied to the selected cell.

[0244] The triggering operation can be, for example, a right-click operation on the selected cell, or a long-press operation on the cell. The specific implementation of the triggering operation can be selected and set according to actual needs, as long as the triggering operation can trigger the display of at least one selection control.

[0245] The selection control in this embodiment may include at least one of the following: a delete control, a first add control, and a second add control.

[0246] In one possible implementation, if the selected cell is in the same row as the selected cell in the table, a first add control is used to indicate adding a row of cells above the row containing the selected cell, a second add control is used to indicate adding a row of cells below the row containing the selected cell, and a delete control is used to indicate deleting the cell in the row containing the selected cell.

[0247] For example, it can be combined Figure 12 To understand, such as Figure 12 As shown, the currently selected cells are all cells in the first row. For example, you can respond to the selected cells with corresponding actions and display... Figure 12 The three selection controls shown are the first add control 1201, the second add control 1202, and the delete control 1203.

[0248] The first add control 1201 indicates that a row of cells should be added above the selected cell's row, that is, a row should be added above the first row. The second add control 1202 indicates that a row of cells should be added below the selected cell's row, that is, a row should be added below the first row. The delete control 1203 indicates that the cells in the selected cell's row should be deleted, that is, the first row should be deleted from the table.

[0249] In another possible implementation, if the selected cell is in the same column in the table, the first add control is used to indicate that a column of cells is added to the left of the column containing the selected cell, the second add control is used to indicate that a column of cells is added to the right of the column containing the selected cell, and the delete control is used to indicate that the cells in the column containing the selected cell are deleted.

[0250] For example, it can be combined Figure 13 To understand, such as Figure 13 As shown, the currently selected cells are all cells in the first column. For example, you can trigger actions based on the selected cells to display... Figure 13 The three selection controls shown are the first add control 1301, the second add control 1302, and the delete control 1303.

[0251] The first add control 1301 indicates that a column of cells should be added to the left of the column containing the selected cell, that is, adding another column to the left of the first column. The second add control 1302 indicates that a column of cells should be added to the right of the column containing the selected cell, that is, adding another column to the right of the first column. The delete control 1303 indicates that the cells in the column containing the selected cell should be deleted, that is, deleting the first column in the table.

[0252] S1102. In response to a click operation on a target selection control in at least one selection control, determine the table editing event as a modification event.

[0253] Based on the above introduction, it can be determined that different selection controls are used to trigger different operations. Therefore, the table editing event can be determined as a modification event when the target selection control is clicked, and the modification event is different for different target selection controls.

[0254] In one possible implementation, if the selected cell is in the same row as the cell in the table, and if the target selection control is a delete control, the event is modified to a delete row event, which indicates that the cells in the row containing the selected cell are deleted; if the target selection control is a first add control, the event is modified to a first add row event, which indicates that a row of cells is added above the row containing the selected cell; if the target selection control is a second add control, the event is modified to a second add row event, which indicates that a row of cells is added below the row containing the selected cell.

[0255] In another possible implementation, if the selected cell is in the same column in the table, and if the target selection control is a delete control, the modification event is changed to a delete column event, which indicates that the cells in the column containing the selected cell are deleted; if the target selection control is a first add control, the modification event is changed to a first add column event, which indicates that a column of cells is added to the left of the column containing the selected cell; if the target selection control is a second add control, the modification event is changed to a second add column event, which indicates that a column of cells is added to the right of the column containing the selected cell.

[0256] S1103. Obtain the data structure corresponding to the first rich text content in the rich text editor.

[0257] The implementation of S1103 is similar to that of S402 described above, and will not be repeated here.

[0258] S1104. Update the data structure based on the table edit event.

[0259] Based on the above introduction, it can be determined that there are multiple possible implementations of the table editing event in this embodiment. The implementation of updating the data structure for each implementation may differ to some extent. The implementation of updating the data structure for various different insertion events will be described below.

[0260] In one possible implementation, if the modification event is a row deletion event, then when updating the data structure, the sub-data corresponding to each cell in the row containing the selected cell can be deleted to obtain the updated data structure. Furthermore, in addition to deleting the corresponding sub-data, the row and column identifiers in the sub-data of the remaining cells can also be updated adaptively.

[0261] For example, assuming the table size is 3 rows and 4 columns as described above, and the selected cell is the cell in the first row, then in the data structure described above, we can delete the sub-data corresponding to the cell in row 1 and column 1, the cell in row 1 and column 2, the cell in row 1 and column 3, and the cell in row 1 and column 4. Furthermore, we can update the row and column labels of the sub-data in the remaining two rows. That is, the original second row becomes the first row, and the original third row becomes the second row. The specific update method can be understood by referring to the data structure described above, and will not be repeated here.

[0262] In another possible implementation, if the modification event is set to the first "Add Row" event (meaning adding a row of cells above the selected cell's row), then when updating the data structure, the sub-data corresponding to that row of cells can be added at the first position in the data structure to obtain the updated data structure. The first position ensures that the cells of the added row are located above the cells of the selected cell's row. Furthermore, in addition to adding the corresponding sub-data, the row and column identifiers within each cell's individual sub-data can also be updated adaptively.

[0263] Understandably, in a data structure including the sub-data of each cell in a table, if the sub-data of multiple cells is sorted in the row-first-column order as described above, then the first position could be before the sub-data of the first cell in the selected cell's row. In this case, you can simply insert the sub-data of a consecutive row of cells at the first position. Alternatively, if the sub-data of multiple cells is sorted in the column-first-row order, then the first position could be scattered, for example, the position formed by the sub-data of each cell in the selected cell's row. In this case, you need to insert the sub-data of each cell in a separate row at multiple scattered positions.

[0264] For example, assuming the table size is 3 rows and 4 columns as described above, and the selected cell is the first row, then in the data structure described above, because it sorts sub-data by row first and then column, the position before the sub-data in the 1-row, 1-column cell can be determined as the first position, and a consecutive row of sub-data cells can be inserted directly before the first position. Furthermore, the row and column labels of the original three rows of sub-data cells are updated; that is, the original row 1 becomes row 2, the original row 2 becomes row 3, and the original row 3 becomes row 4. Based on the example described above, the updated data structure could, for example, become:

[0265]

[0266]

[0267]

[0268]

[0269] 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, while 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.

[0270] In another possible implementation, if the modification event is set to the second "Add Row" event (meaning adding a row of cells below the selected cell's row), then when updating the data structure, the sub-data corresponding to that row of cells can be added at the second position in the data structure to obtain the updated data structure. The second position ensures that the cells of the added row are located below the cells of the selected cell's row. Furthermore, in addition to adding the corresponding sub-data, the row and column identifiers within each cell's individual sub-data can also be updated adaptively.

[0271] Understandably, in a data structure, each cell in a table contains its own sub-data. If the sub-data of multiple cells is sorted in a row-first, then column-second manner as described above, then the second position could be, for example, after selecting the sub-data of the last cell in the row containing the selected cell. In this case, you can simply insert the sub-data of a consecutive row of cells in the second position. Alternatively, if the sub-data of multiple cells is sorted in a column-first, then row-second manner, then the second position could be scattered, for example, the position formed by selecting the sub-data of each cell in the row containing the selected cell. In this case, you need to insert the sub-data of each cell in a separate row in multiple scattered positions.

[0272] For example, assuming the table size described above is 3 rows and 4 columns, and the selected cell is the first row, then in the data structure described above, because it sorts sub-data by row first and then column, the position after the sub-data in the 1 row and 4 columns cell can be determined as the first position. A consecutive row of sub-data cells can then be inserted directly before this first position. Furthermore, the row and column labels of the original three rows of sub-data cells are updated; that is, the first row remains unchanged, the original second row becomes the third row, and the original third row becomes the fourth row. The specific update method can be understood by referring to the data structure described above, and will not be repeated here.

[0273] In another possible implementation, if the modification event is a column deletion event, then when updating the data structure, the sub-data corresponding to each cell in the column containing the selected cell can be deleted to obtain the updated data structure. Furthermore, in addition to deleting the corresponding sub-data, the row and column identifiers in the sub-data of the remaining cells can also be updated adaptively.

[0274] For example, assuming the table size is 3 rows and 4 columns as described above, and the selected cell is the first column, then in the data structure described above, we can delete the sub-data corresponding to the cell in row 1, column 1, the cell in row 2, column 1, and the cell in row 3, column 1. Furthermore, we can update the row and column labels of the sub-data in the remaining three rows. That is, the original second column becomes the first column, the original third column becomes the second column, and the original fourth column becomes the third column. The specific update method can be understood by referring to the data structure described above, and will not be elaborated further here.

[0275] In another possible implementation, if the modification event is the first "Add Column" event (meaning adding a column of cells to the left of the selected cell's row), then when updating the data structure, the sub-data corresponding to that column of cells can be added at the third position in the data structure to obtain the updated data structure. The third position is used to ensure that the cell with the added column is to the left of the cell in the selected cell's column. Furthermore, in addition to adding the corresponding sub-data, the row and column identifiers in each cell's individual sub-data can also be updated adaptively.

[0276] It's understandable that in a data structure, each cell in a table contains its own sub-data. If the sub-data of multiple cells is sorted in a row-first, then column-second manner as described above, then the third position can be scattered, for example, the position formed by the sub-data of each cell in the column containing the selected cell. In this case, the sub-data of each cell in a column needs to be inserted in multiple scattered positions. Alternatively, if the sub-data of multiple cells is sorted in a column-first, then row-second manner, then the third position can be the position before the sub-data of the first cell in the column containing the selected cell. In this case, the sub-data of a consecutive column of cells can be directly inserted in the third position.

[0277] For example, assuming the table size is 3 rows and 4 columns as described above, and the selected cell is the first column, then in the data structure described above, because it sorts sub-data by row first and then column, we can determine the positions before the sub-data in the 1x1 cell, the 2x1 cell, and the 3x1 cell as the third positions. Then, we can insert multiple sub-data cells from a single column before each of these three dispersed third positions. Furthermore, the row and column labels of the original four columns of sub-data 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.

[0278] In another possible implementation, if the modification event is the second "Add Column" event—that is, adding a column of cells to the right of the row containing the selected cell—then when updating the data structure, the sub-data corresponding to that column of cells can be added at the fourth position in the data structure to obtain the updated data structure. The fourth position is used to ensure that the cell with the added column is located to the right of the cell in the column containing the selected cell. Furthermore, in addition to adding the corresponding sub-data, the row and column identifiers in the sub-data of each cell can also be updated adaptively.

[0279] Understandably, in a data structure, each cell in a table contains its own sub-data. If the sub-data of multiple cells is sorted in a row-first, then column-second manner as described above, then the fourth position could be scattered, for example, the position formed by the sub-data of each cell in the selected column. In this case, the sub-data of each cell in a column needs to be inserted in multiple scattered positions. Alternatively, if the sub-data of multiple cells is sorted in a column-first, then row-second manner, then the fourth position could be the position after the sub-data of the last cell in the selected column. In this case, a continuous column of sub-data can be directly inserted in the fourth position.

[0280] For example, assuming the table size is 3 rows and 4 columns as described above, and the selected cell is the first column, then in the data structure described above, because it sorts sub-data by row first and then column, we can determine the fourth position as the position after the sub-data in the cell with row 1 and column 1, the position after the sub-data in the cell with row 2 and column 1, and the position after the sub-data in the cell with row 3 and column 1. Then, before these three dispersed fourth positions, we can insert multiple sub-data cells in a single column. Furthermore, the row and column labels of the original four columns of sub-data 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.

[0281] It should also be noted that the reason for handling the addition of rows and columns in the manner described above is that the text content in the sub-data of the newly added rows or columns is usually empty, but the text content in the original table cells 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 also ensuring that the display of the original table text content is correct.

[0282] S1105. Based on the updated data structure, display the 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.

[0283] The implementation of S1105 is similar to that of S403 described 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 has undergone the update operation triggered by the user, relative to the table in the first rich text content.

[0284] The table data processing method provided in this application provides at least one selection control in a graphical user interface in response to a user's selected cell. This selection control allows the user to delete or add rows and columns. Whether the selection control operates on rows or columns depends on the specific implementation of the selected cell. Therefore, different selection controls can be provided to the user based on their actual cell selection, allowing the user to perform corresponding table modifications. Furthermore, for various events such as deleting rows, deleting columns, adding rows, and adding columns, cells can be added or deleted at appropriate positions in the data structure based on the actual event and the composition of the data structure. This effectively ensures that table rendering is based on the updated data structure, effectively displaying the table updates required by the user while ensuring the correct display of the original table content. Moreover, since the table update described above is based on updating and rendering the data structure, it can simply and effectively implement table modification functionality in a rich text editor.

[0285] Therefore, let's combine the following... Figure 14 This paper introduces the role of each unit in the rich text editor's architecture during the tabular data processing in the first application. Figure 14 This is a schematic diagram illustrating the processing procedure of the table processing method provided in the embodiments of this application.

[0286] like Figure 14 As shown, the first application may include a database and a rich text editor. The rich text editor may include data processing units, recording units, plugin units, rendering units, and event listening units.

[0287] The process includes:

[0288] 1. The data processing unit receives the table insertion event triggered by the first application and initializes the table data structure of the inserted table according to the insertion event.

[0289] The initialization of the table data structure for inserting the table involves generating the table data structure for the table to be inserted, as described in the above embodiments, and adding the table data structure to the target position in the data structure of the first rich text content to obtain the updated data structure. The specific implementation method can be referred to the description in the above embodiments, and will not be repeated here.

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

[0291] For example, in the current situation, the data processing unit can send the event information corresponding to the insertion event to the recording unit. The event information may include, for example, the content to be inserted, the position to be inserted, etc.

[0292] 3. The recording unit records the history of inserted tables based on event information.

[0293] In one possible implementation, to facilitate operation backtracking, the rich text editor in this embodiment also includes a recording unit. After receiving event information, the recording unit can store the history of table insertions in a first stack, where the first stack is used to store information corresponding to completed operations.

[0294] The first stack can be understood as the undos stack. When the user needs to undo an operation, the user can retrieve the record information from the top of the first stack and undo the update operation corresponding to the record information in the data structure corresponding to the rich text content, so as to realize the undoing of the corresponding instruction.

[0295] The recording unit may also include a second stack. When the rich text editor receives an undo command, it can obtain the recording information at the top of the first stack through the plugin unit. The plugin unit undoes the update operation corresponding to the recording information at the top of the stack in the data structure corresponding to the rich text content. Based on the data structure after the undo update operation, the rich text content is rendered and displayed. The recording information at the top of the stack is stored in the second stack, which is used to store the indication information corresponding to the undoed operation.

[0296] 4. The recording unit notifies the rendering unit that the operation recording is complete.

[0297] 5. The rendering unit renders and displays the table style of the inserted table based on the updated data structure.

[0298] 6. The rendering unit notifies the event listener that the rendering is complete.

[0299] 7. The event listener unit adds an event listener for the inserted table.

[0300] The events being monitored can include the various types of modification events described above. For example, the corresponding events can be determined by monitoring user operations. The specific implementation method can be referred to the above embodiments, and will not be repeated here.

[0301] Based on the above, it can be determined that for the insert event, since the user triggers it in the corresponding control area of ​​the first application, the first application is responsible for listening to the insert event. The edit event, on the other hand, is triggered in the table area of ​​the rich text editor, so the rich text editor can be responsible for listening to the edit event. When there are multiple tables in the rich text editor, each table corresponds to a set of processing logic. This means the rich text editor can listen for events separately for each table to determine which table the user is modifying.

[0302] 8. The event listening unit sends the listened-to events to the plugin unit.

[0303] 9. The plugin cell determines the update instruction based on the events it listens for.

[0304] In one possible implementation, the plugin unit could include, for example, a table editing plugin, which has different processing logic for different events. For instance, the table editing plugin could determine the update instruction corresponding to the monitored event, and this update instruction could then instruct the corresponding logical processing for the currently monitored event, that is, to update the data structure according to the processing logic corresponding to the monitored event.

[0305] In one possible implementation, 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 described above. The execution unit encapsulates the relevant information to obtain the update instruction. The specific method of generating the update instruction can be selected and set according to actual needs, and this embodiment does not limit it.

[0306] 10. The plug-in unit sends an update command to the data processing unit.

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

[0308] The update instruction can specify the specific update method for the data structure. Different events correspond to different data structure update processing methods. The specific implementation of the data structure can be referred to the above embodiment, and will not be repeated here.

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

[0310] For example, in the current situation, the data processing unit can send the event information corresponding to the modification event to the recording unit. The event information may include, for example, the content of the modification, the location of the modification, etc.

[0311] 13. The recording unit records the history of inserted tables based on event information.

[0312] In one possible implementation, after receiving event information, the recording unit can store the history of table modifications in a first stack, where the first stack is used to store information corresponding to completed operations.

[0313] 14. The recording unit notifies the rendering unit that the operation recording is complete.

[0314] 15. The rendering unit renders and displays the table style of the inserted table based on the updated data structure.

[0315] 16. The rendering unit saves the updated data structure in the database to store the modified rich text content in the rich text editor.

[0316] Based on the current embodiment, it can be determined that, based on the framework of the rich text editor in this embodiment, the corresponding table processing operations can be realized simply and effectively through the update of the data structure, thereby expanding the functionality of the rich text editor.

[0317] Based on the above introduction, the rich text editor and its plugin units provided in the embodiments of this application will be further described below.

[0318] The rich text editor includes plugin units, which can include table editing plugins, as well as plugins with other functionalities.

[0319] In other words, in the plugin unit of this embodiment, different plugins can be set for different functions, so that the corresponding functions can be implemented through multiple plugins. This ensures that the processing of each function is independent of each other. When it is necessary to update or iterate on certain functions, only the corresponding plugins need to be processed, thereby effectively improving the flexibility of adjusting and controlling the rich text editor.

[0320] In one possible implementation, each sub-data element in the data structure has a corresponding type parameter. Based on the type parameter in the sub-data element, it is possible to quickly and effectively determine which component to use for the corresponding processing.

[0321] Based on the above introduction, it can also be confirmed that the rich text editor includes a rendering unit, in which rendering logic can be defined through React components, such as compiling data structures to generate HTML fragments and display them in the rich text editor.

[0322] After the event listening unit detects an event triggered by a user operation, the plugin 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 using JSON format, thereby enabling cross-project and cross-architecture use to ensure better versatility of the rich text editor.

[0323] In optional implementations, the rich text editor may have an initialization process before receiving user input. The initialization process of the rich text editor is explained below.

[0324] When the first application starts, the second rendering unit can render the graphical user interface of the first application. Taking a memo app as an example, it can render the file list, note list, and user event response area in the memo app's graphical user interface as described above. The file list displays the user's file categories, the note list displays a list of rich text files stored in folders, and the user event response area displays the editing operations that the user can perform on the rich text content.

[0325] After the first application starts, the data model for the rich text content displayed in the rich text editor needs to be initialized.

[0326] In one possible implementation, the graphical user interface of the first application includes a list of multiple rich text content items. For example, the user can select to open a specific rich text content item from the list, and the selected rich text content needs to be displayed in the rich text editor. Therefore, the current initialization instruction can be to instruct the processing of the rich text content selected by the user to determine its corresponding data model. In other words, the data model for the displayed content is initialized based on the content displayed in the rich text editor. In this embodiment, the data model can be understood as the JSON-formatted rich text data described above.

[0327] 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 instructions.

[0328] 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-mentioned display operation.

[0329] The UI rendering layer of the first application sends a start command to the instruction processing unit of the first application. The start command is used to instruct the instruction processing unit to start.

[0330] At the same time the memo is started, the UI rendering layer can instruct the instruction processing unit to start as well. In one possible implementation, the UI rendering layer can, for example, send a corresponding start instruction to the instruction processing unit to start the instruction processing unit.

[0331] After the instruction processing unit is started, it can register the function instructions supported by the first application, such as bold instruction, italic instruction, table insertion instruction, table modification instruction, etc. The instructions that the instruction unit needs to register may depend on the specific instructions supported by the first application. This embodiment does not limit the specific implementation of the registered instructions.

[0332] After completing the initialization process described above, the rich text editor in this embodiment can perform corresponding table editing based on the user's operations, thereby effectively expanding the functionality of the rich text editor.

[0333] Figure 15 This is a schematic diagram of the structure of the tabular data processing apparatus provided in an embodiment of this application. Figure 15 As shown, the device 150 includes: a determining module 1501, an acquiring module 1502, and a processing module 1503.

[0334] The determination module 1501 is used to determine table editing events in response to table editing operations performed in the graphical user interface of the first application.

[0335] The acquisition module 1502 is used to acquire the 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;

[0336] Processing module 1503 is used to display 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 includes a table;

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

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

[0339] The determining module 1501 is specifically used for:

[0340] In response to a click operation applied to the table insertion control, an adjustment control is displayed in the graphical user interface, the adjustment control including multiple pre-selected cells and / or text input boxes;

[0341] In response to a selection operation applied to the plurality of pre-selected cells, or in response to a confirmation operation for input content in the text input box, the table editing event is determined to be an insertion event. The selection operation and the confirmation operation are used to indicate the table size, and the insertion event is used to indicate the insertion of a table corresponding to the table size in the rich text editor.

[0342] The table insertion operation is either the selection operation or the confirmation operation.

[0343] In some implementations, the processing module 1503 is specifically used for:

[0344] Based on the insertion event, determine the table size of the table to be inserted;

[0345] Based on the table size, a table data structure corresponding to the table to be inserted is generated, and the table data structure includes sub-data corresponding to each of the multiple cells in the table to be inserted.

[0346] The tabular data structure is added to the target position in the data structure to obtain the updated data structure.

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

[0348] For the table displayed in the rich text editor, in response to the selection operation applied to the table, determine the selected cell corresponding to the selection operation;

[0349] Based on the selected cell corresponding to the selection operation, determine the position information of the selection box, which includes the width, height, and coordinate position;

[0350] The selected box is rendered and displayed in the rich text editor based on its position information.

[0351] In some implementations, the rich text editor displays row selection controls and column selection controls;

[0352] 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,

[0353] 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.

[0354] In some implementations, the selection operation is a drag operation performed on the table;

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

[0356] In some implementations, the determining module 1501 is specifically used for:

[0357] In response to a triggering operation applied to the selected cell, at least one selection control is displayed, the selection control including at least one of the following: a delete control, a first add control, and a second add control;

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

[0359] In some implementations, the selected cells are located in the same row in the table. In this case, the first add control is used to indicate that a row of cells is added above the row of the selected cells, the second add control is used to indicate that a row of cells is added below the row of the selected cells, and the delete control is used to indicate that the cells in the row of the selected cells are deleted.

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

[0361] The processing module 1503 is specifically used for:

[0362] In the data structure, delete the sub-data corresponding to each cell in the row where the selected cell is located to obtain the updated data structure;

[0363] If the target selection control is the first added control, then the modification event is the first added row event;

[0364] The processing module 1503 is specifically used for:

[0365] Add sub-data corresponding to a row of cells at a first position in the data structure to obtain the updated data structure. The first position is used to make the cell of the added row above the cell of the row where the selected cell is located.

[0366] If the target selection control is the second added control, then the modification event is the second added row event;

[0367] The processing module 1503 is specifically used for:

[0368] Add sub-data corresponding to a row of cells at the second position in the data structure to obtain the updated data structure. The second position is used to make the cell of the added row below the cell of the row where the selected cell is located.

[0369] In some implementations, the selected cells are located in the same column in the table. In this case, the first add control is used to indicate that a column of cells is added to the left of the column where the selected cell is located, the second add control is used to indicate that a column of cells is added to the right of the column where the selected cell is located, and the delete control is used to indicate that the cells in the column where the selected cell is located are deleted.

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

[0371] The processing module 1503 is specifically used for:

[0372] In the data structure, delete the sub-data corresponding to each cell in the column where the selected cell is located to obtain the updated data structure;

[0373] If the target selection control is the first added control, then the modification event is the first added column event;

[0374] The processing module 1503 is specifically used for:

[0375] Add sub-data corresponding to a column of cells at the third position in the data structure to obtain the updated data structure. The third position is used to make the cell to which the added column is located to the left of the cell in the column where the selected cell is located.

[0376] If the target selection control is the second added control, then the modification event is the second added column event;

[0377] The processing module 1503 is specifically used for:

[0378] Add sub-data corresponding to a column of cells at the fourth position in the data structure to obtain the updated data structure. The fourth position is used to make the cell to which the added column is located to the right of the cell in the column where the selected cell is located.

[0379] In some implementations, the rich text editor includes a table editing plugin and a data processing unit;

[0380] The processing module 1503 is specifically used for:

[0381] The update instruction corresponding to the table editing event is determined through the table editing plugin;

[0382] The table editing plugin sends the update instruction to the data processing unit, so that the data processing unit updates the data structure according to the update instruction.

[0383] The apparatus provided in this embodiment can be used to execute the technical solutions of the above method embodiments. Its implementation principle and technical effects are similar, and will not be described again here.

[0384] The table processing method provided in this application can be applied to electronic devices with communication functions. Electronic devices include terminal devices, and the specific device form of the terminal device can be referred to the above-mentioned descriptions, which will not be repeated here.

[0385] This application provides a terminal device, which can be referred to as [example device]. Figure 16 To understand, Figure 16 This is a schematic diagram of the hardware structure of the terminal device provided in the embodiments of this application.

[0386] like Figure 16 As shown, the terminal device 160 includes: a processor 1601 and a memory 1602; the memory 1602 stores computer execution instructions; the processor 1601 executes the computer execution instructions stored in the memory 1602, causing the terminal device 160 to perform the above-described method.

[0387] When the memory 1602 is set up independently, the terminal device also includes a bus 1203 for connecting the memory 1202 and the processor 1601.

[0388] This application provides a chip. The chip includes a processor, which is used to call a computer program in memory to execute the technical solutions in the above embodiments. Its implementation principle and technical effects are similar to those in the related embodiments described above, and will not be repeated here.

[0389] This application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program. When the computer program is executed by a processor, it implements the methods described above. The methods described in the above embodiments can be implemented wholly or partially by software, hardware, firmware, or any combination thereof. If implemented in software, the functionality can be stored as one or more instructions or code on or transmitted over the computer-readable medium. The computer-readable medium 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 accessible by a computer.

[0390] In one possible implementation, a computer-readable medium may include RAM, ROM, compact disc read-only memory (CD-ROM) or other optical disc storage, disk storage or other magnetic storage devices, or any other medium targeted to carry or to store the required program code in the form of instructions or data structures, and accessible by a computer. Furthermore, any connection is appropriately referred to as a computer-readable medium. For example, if software is transmitted from a website, server, or other remote source using coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave, then coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of medium. As used herein, disks and optical discs include optical discs, laser discs, optical discs, Digital Versatile Discs (DVDs), floppy disks, and Blu-ray discs, where disks typically reproduce data magnetically, while optical discs optically reproduce data using lasers. Combinations of the above should also be included within the scope of computer-readable media.

[0391] This application provides a computer program product, which includes a computer program that, when run, causes a computer to perform the above-described method.

[0392] This application describes embodiments of methods, apparatus (systems), and computer program products according to embodiments of this application with reference to flowchart illustrations and / or block diagrams. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processing unit of a general-purpose computer, special-purpose computer, embedded processor, or other programmable device to produce a machine, such that the instructions, which execute via the processing unit of the computer or other programmable data processing device, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0393] The above specific embodiments further illustrate the purpose, technical solution, and beneficial effects of the present invention. It should be understood that the above are merely specific embodiments of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made on the basis of the technical solution of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for processing tabular data, characterized in that, The method is applied to a first application, which includes a rich text editor, the rich text editor comprising a data processing unit, a recording unit, a plugin unit, a rendering unit, and an event listening unit; the method includes: when a table insertion operation in the graphical user interface of the first application is detected by the first application: In response to the table insertion operation, determine the table insertion event; Obtain the first data structure corresponding to the first rich text content in the rich text editor, and determine the first update instruction corresponding to the table insertion event through the plugin unit; the first rich text content is the rich text content in the rich text editor before receiving the table insertion operation; The first update instruction is sent to the data processing unit through the plug-in unit; The data processing unit determines the table size of the table to be inserted based on the first update instruction; The data processing unit generates a table data structure corresponding to the table to be inserted based on the table size. The table data structure includes sub-data corresponding to each of the multiple cells in the table to be inserted. When the first rich text content is empty, the table data structure is determined as the updated data structure; when the first rich text content is not empty, the table data structure is added to the target position in the first data structure by the data processing unit to obtain the updated data structure, wherein the target position is the node position in the first data structure corresponding to the insertion position in the first rich text content. If a table modification operation in the graphical user interface of the first application is detected by the event listening unit: For the table displayed in the rich text editor, in response to the selection operation applied to the table, determine the selected cell corresponding to the selection operation; Based on the selected cell corresponding to the selection operation, determine the position information of the selection box, which includes the width, height, and coordinate position; Based on the position information of the selected box, the selected box is rendered and displayed in the rich text editor; In response to a trigger operation applied to the selected cell, at least one selection control is displayed; the selection control includes at least one of the following: a delete control, a first add control, and a second add control; when the selection operation is a click operation on a row selection control in the rich text editor, the selected cell corresponding to the selection operation is multiple cells in the same row in the table corresponding to the row selection control, then the first add control is used to indicate adding a row of cells above the row where the selected cell is located, the second add control is used to indicate adding a row of cells below the row where the selected cell is located, and the delete control is used to indicate deleting the cells in the row where the selected cell is located; In response to a click operation performed on the target selection control in the at least one selection control, a table modification event is determined; Obtain the second data structure corresponding to the second rich text content in the rich text editor, and determine the second update instruction corresponding to the table modification event through the plugin unit; the second rich text content is the rich text content in the rich text editor before receiving the table modification operation; The second update instruction is sent to the data processing unit through the plug-in unit; When the target selection control is the delete control, the data processing unit deletes the sub-data corresponding to each cell in the row containing the selected cell in the second data structure according to the second update instruction, to obtain an updated data structure; when the target selection control is the first add control, the data processing unit adds the sub-data corresponding to a row of cells in the second data structure at a first position according to the second update instruction, to obtain an updated data structure, wherein the first position is used to place the cell of the added row above the cell in the row containing the selected cell; when the target selection control is the second add control, the data processing unit adds the sub-data corresponding to a row of cells in the second data structure at a second position according to the second update instruction, to obtain an updated data structure, wherein the second position is used to place the cell of the added row below the cell in the row containing the selected cell; the data processing unit sends the event information corresponding to the table insertion event or the event information corresponding to the table modification event to the recording unit; The recording unit generates a historical record based on the event information and notifies the rendering unit that the recording operation is complete. The rendering unit renders and displays the third rich text content corresponding to the updated data structure in the rich text editor based on the updated data structure. The rich text editor is developed based on a web page view.

2. The method according to claim 1, characterized in that, The graphical user interface of the first application includes a table insertion control; The process of determining the table insertion event in response to the table insertion operation includes: In response to a click operation applied to the table insertion control, an adjustment control is displayed in the graphical user interface, the adjustment control including multiple pre-selected cells and / or text input boxes; In response to a selection operation applied to the plurality of pre-selected cells, or in response to a confirmation operation for input content in the text input box, the table editing event is determined to be an insertion event, wherein the selection operation and the confirmation operation are used to indicate the table size, and the insertion event is used to indicate the insertion of a table corresponding to the table size in the rich text editor; The table insertion operation is either the selection operation or the confirmation operation.

3. The method according to claim 1, characterized in that, The selection operation is a drag-and-drop operation performed on the table; The selected cells corresponding to the selection operation are the cells included in the drag range formed by the drag operation.

4. The method according to claim 1, characterized in that, When the selection operation is a click operation on the column selection control in the rich text editor, the selected cells corresponding to the selection operation are multiple cells in the same column of the table corresponding to the column selection control. Then, the first add control is used to indicate adding a column of cells to the left of the column where the selected cell is located, the second add control is used to indicate adding a column of cells to the right of the column where the selected cell is located, and the delete control is used to indicate deleting the cells in the column where the selected cell is located.

5. The method according to claim 4, characterized in that, The method further includes: When the target selection control is the delete control, the data processing unit deletes the sub-data corresponding to each cell in the column where the selected cell is located in the second data structure to obtain the updated data structure. When the target selection control is the first added control. The data processing unit adds sub-data corresponding to a column of cells in the third position of the second data structure to obtain an updated data structure. The third position is used to make the cell to which the added column is located to the left of the cell in the column where the selected cell is located. When the target selection control is the second added control. The data processing unit adds sub-data corresponding to a column of cells at the fourth position in the second data structure to obtain an updated data structure. The fourth position is used to make the cell to which the added column is located to the right of the cell in the column where the selected cell is located.

6. The method according to any one of claims 1-4, characterized in that, The event information corresponding to the table insertion event includes: the content to be inserted and the position of the insertion.

7. The method according to any one of claims 1-4, characterized in that, The method further includes: The historical records are stored in a first stack by the recording unit. The first stack is used to store information corresponding to completed operations.

8. The method according to claim 7, characterized in that, The method further includes: When a cancellation operation is received, the plugin unit retrieves the record information from the top of the first stack and cancels the operation corresponding to the record information in the data structure corresponding to the rich text content.

9. The method according to claim 8, characterized in that, The method further includes: The recorded information is stored in a second stack, which is used to store information corresponding to undone operations.

10. A tabular data processing apparatus, applied to a first application, the first application including a rich text editor, the rich text editor including a data processing unit, a recording unit, a plugin unit, a rendering unit, and an event listening unit; characterized in that, The device includes: A determination module is configured to: determine a table insertion event in response to a table insertion operation detected by the first application's graphical user interface; The acquisition module is used to acquire the first data structure corresponding to the first rich text content in the rich text editor, and to determine the first update instruction corresponding to the table insertion event through the plug-in unit; the first rich text content is the rich text content in the rich text editor before the table insertion operation is received; The first update instruction is sent to the data processing unit through the plug-in unit; The processing module is used to determine the table size of the table to be inserted according to the first update instruction through the data processing unit; The data processing unit generates a table data structure corresponding to the table to be inserted based on the table size. The table data structure includes sub-data corresponding to each of the multiple cells in the table to be inserted. When the first rich text content is empty, the table data structure is determined as the updated data structure; when the first rich text content is not empty, the table data structure is added to the target position in the first data structure by the data processing unit to obtain the updated data structure, wherein the target position is the node position in the first data structure corresponding to the insertion position in the first rich text content. The processing module is further configured to, when the event listening unit detects a table modification operation in the graphical user interface of the first application: For the table displayed in the rich text editor, in response to the selection operation applied to the table, determine the selected cell corresponding to the selection operation; Based on the selected cell corresponding to the selection operation, determine the position information of the selection box, which includes the width, height, and coordinate position; Based on the position information of the selected box, the selected box is rendered and displayed in the rich text editor; In response to a trigger operation applied to the selected cell, at least one selection control is displayed; the selection control includes at least one of the following: a delete control, a first add control, and a second add control; when the selection operation is a click operation on a row selection control in the rich text editor, the selected cell corresponding to the selection operation is multiple cells in the same row in the table corresponding to the row selection control, then the first add control is used to indicate adding a row of cells above the row where the selected cell is located, the second add control is used to indicate adding a row of cells below the row where the selected cell is located, and the delete control is used to indicate deleting the cells in the row where the selected cell is located; The determining module is also used to respond to a click operation on the target selection control in the at least one selection control to determine a table modification event; The acquisition module is further configured to acquire the second data structure corresponding to the second rich text content in the rich text editor, and determine the second update instruction corresponding to the table modification event through the plug-in unit; the second rich text content is the rich text content in the rich text editor before receiving the table modification operation; The second update instruction is sent to the data processing unit through the plug-in unit; The processing module is further configured to, when the target selection control is the delete control, delete the sub-data corresponding to each cell in the row containing the selected cell in the second data structure according to the second update instruction via the data processing unit, to obtain an updated data structure; when the target selection control is the first add control, add the sub-data corresponding to a row of cells in the second data structure at a first position according to the second update instruction via the data processing unit, to obtain an updated data structure, wherein the first position is used to make the cell of the added row above the cell in the row containing the selected cell; when the target selection control is the second add control, add the sub-data corresponding to a row of cells in the second data structure at a second position according to the second update instruction via the data processing unit, to obtain an updated data structure, wherein the second position is used to make the cell of the added row below the cell in the row containing the selected cell; The processing module is used to send event information corresponding to the table insertion event or the table modification event to the recording unit through the data processing unit; The recording unit generates a historical record based on the event information and notifies the rendering unit that the recording operation is complete. The rendering unit renders and displays the third rich text content corresponding to the updated data structure in the rich text editor based on the updated data structure. The rich text editor is developed based on a web page view.

11. A terminal device, characterized in that, include: Processor and memory; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory, causing the terminal device to perform the method as described in any one of claims 1-9.

12. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1-9.

13. A computer program product, characterized in that, Includes a computer program that, when run, causes a computer to perform the method as described in any one of claims 1-9.

Images