Table processing method and related apparatus

Abstract

The table processing method and the related device provided by the embodiments of the present application relate to the technical field of terminals. The method comprises the following steps: a more rich-text editor can be developed based on a webview function, for example, the functions of increasing the display of table row and column headers, increasing merged cells, and increasing unmerged cells, so that the function of the rich-text editor is more comprehensive, the interactive ability of the table is improved, and thus the user experience is improved.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to table processing methods and related devices. Background Technology

[0002] Some applications on electronic devices can be used to record information, such as memos and note-taking apps. When using these applications to record information, in addition to recording basic text, users may also want to record other content such as tables and images within the application, thus requiring the use of a rich text editor to edit the rich text content.

[0003] However, current rich text editors are usually developed based on the system's native framework, and rich text editors developed based on the system's native framework usually do not support table editing functions. Summary of the Invention

[0004] The table processing method and related apparatus provided in this application can be used to develop rich text editors with richer functions based on webviews, such as adding the display of table row and column headers, adding merged cells, and adding functions to unmerge cells, making the rich text editor more comprehensive, improving the interactivity of the table, and thus enhancing the user experience.

[0005] Firstly, the table processing method provided in the embodiments of this application includes:

[0006] The system displays a first interface, which includes a first control; receives a first operation on the first control; in response to the first operation, displays a second control, which includes one or more pre-selected cells and / or a text input box; receives a second operation to select N rows and M columns in one or more pre-selected cells, or to input N rows and M columns in the text input box; in response to the second operation, displays a first table on the first interface, which includes N rows and M columns; receives a third operation on the first cell in the first table; and in response to the third operation, displays the row and column headers of the first table. This addition of row and column headers enables a more feature-rich rich text editor, making its functionality more comprehensive.

[0007] In one possible implementation, the first interface is the interface of a first application, which includes a rich text editor developed based on a web page view. The rich text editor includes a first data structure and a second data structure. The first data structure stores persistent data, and the second data structure stores temporary data. In response to a second operation, the rich text editor further includes: saving the first data in the first data structure and saving the second data in the second data structure. The first data includes data in a first list that matches the first data structure, and the second data includes data in the first list that matches the second data structure. In response to a third operation, the rich text editor further includes: updating the second data structure with third data. The third data includes the updated data in the first list that matches the second data structure. Both the second and third data include a first field identifier, and the first field identifier of the second data is different from that of the third data. The first field identifier indicates whether there are cells in the first list that are in an editable state. Displaying the row and column headers of the first table includes: the rich text editor displaying the row and column headers of the first table based on the third data. In this way, by controlling whether the table displays row and column headers according to the second data structure, the display and cancellation of the interface can be flexibly controlled, enabling a rich text editor with richer functionality.

[0008] In one possible implementation, the method further includes: receiving a fourth operation to cancel a cell in the first table; and in response to the fourth operation, canceling the display of the row and column headers of the first table. This way, when the first table loses focus, the table row and column headers are not displayed, ensuring that the user's actions match the interface display and improving the table's interactivity.

[0009] In one possible implementation, in response to the fourth operation, the following steps are also included: the rich text editor saves the fourth data in the second data structure, the fourth data including: updated data matching the second data structure in the first list, the fourth data including a first field identifier, and the first field identifier of the fourth data being different from the first field identifier of the third data; canceling the display of the row and column headers of the first table includes: the rich text editor canceling the display of the row and column headers of the first table based on the fourth data. In this way, controlling whether the table displays row and column headers based on the second data structure allows for flexible control of the display and cancellation of the interface, improving the interactivity of the table.

[0010] In one possible implementation, the first data structure stores one or more of the following data: the identifier id of the first list, the child element type of the first list being a table row, the child element type of the table row being a cell, the child element type of the cell being a paragraph, the content of the paragraph, the number of rows spanned by the cell, the number of columns spanned by the cell, or an invisible attribute; the second data structure stores one or more of the following data: the first field identifier, the second field identifier, the third field identifier, the fourth field identifier, the fifth field identifier, the sixth field identifier, the seventh field identifier, the eighth field identifier, the ninth field identifier, the tenth field identifier, or the eleventh field identifier; wherein, the second field identifier is used to represent the first list. The table's status is recorded in real time using various fields. The first field indicates whether there are selected cells; the second field indicates the size of the first list; the third field indicates whether the first list is fully selected; the fourth field indicates whether the first list is row-selected; the sixth field indicates whether the first list is column-selected; the seventh field indicates whether the first list is partially selected; the eighth field indicates whether there is text content in the selected area; the ninth field indicates whether there are merged cells in the selected area; the tenth field indicates whether there are unmerged cells in the selected area; and the eleventh field indicates whether cells in the first list can be merged. This allows the table's status to be continuously recorded, enabling the determination of the corresponding table functions and the display of appropriate interface content.

[0011] In one possible implementation, the first field of the second data is set to null, the first field of the third data is set to the row and column position of the first cell, and the first field of the fourth data is set to null. This way, the first field identifier can continuously track whether a cell in the table is in edit mode. When a cell gains focus, it can be provided with corresponding editing functions, and row and column headers can be displayed, thus improving the user experience.

[0012] In one possible implementation, the row header of the first cell is highlighted, and / or the column header of the first cell is highlighted. Highlighting the row and column headers of the first cell provides a more intuitive view of the selected cell, thus offering a more user-friendly interface.

[0013] In one possible implementation, the second control also includes a first button, and displays a first table on the first interface, including: displaying the first table on the first interface in response to an operation on the first button. This allows the table size to be arbitrarily modified before the user triggers the confirmation button, thus reducing the possibility of the generated table size being inconsistent with the user's intention due to accidental operation, and improving the user experience.

[0014] In one possible implementation, the method further includes: receiving a fifth operation that selects L1 cells in a first table, where L1 is a positive integer greater than 1; responding to the fifth operation, displaying a third control, which includes one or more options; receiving a sixth operation for a first option in the third control; and responding to the sixth operation, merging the L1 cells into one cell. This adds the functionality of merging cells, making the rich text editor more feature-rich and comprehensive, and enhancing the interactivity of the table.

[0015] In one possible implementation, in response to the fifth operation, the rich text editor further includes: saving the fifth data in the second data structure, the fifth data including: updated data matching the second data structure in the first list, and the fifth data including a second field identifier; in response to the sixth operation, the rich text editor further includes: saving the sixth data in the first data structure, the sixth data including: updated data matching the first data structure in the first list, and the sixth data including one or more of the following: a row count attribute, a column count attribute, and an invisible attribute. Thus, the row count and column count attributes allow cells to span multiple rows or columns, and the invisible attribute hides cells that do not need to be displayed, thereby achieving the function of merging cells.

[0016] In one possible implementation, the second field of the fifth data includes the starting row and column positions and the ending row and column positions of the L1 cells. If at least two cells in the L1 cells are in the same row, then the sixth data includes attributes such as the number of rows the cell spans and an invisible attribute. And / or, if at least two cells in the L1 cells are in the same column, then the sixth data includes attributes such as the number of columns the cell spans and an invisible attribute. Thus, cell merging can be achieved through attributes such as the number of rows the cell spans, the number of columns the cell spans, and the invisible attribute.

[0017] One possible implementation merges L1 cells into one cell by: merging L1 cells into one cell in response to a right-click operation. This allows the user to select from one or more options included in the third control before right-clicking, reducing the likelihood of accidental actions that deviate from the user's intended behavior and improving the user experience.

[0018] In one possible implementation, the method further includes: receiving a seventh operation that selects L2 cells in a first table, where L2 is a positive integer greater than or equal to 1; responding to the seventh operation, displaying a fourth control, which includes one or more options, and the L2 cells include merged cells; receiving an eighth operation for a second option in the fourth control; and responding to the eighth operation, unmerging the L2 cells into L3 cells, where L3 is a positive integer greater than L2. This adds the functionality to unmerge cells, making the rich text editor more feature-rich and comprehensive, enhancing the table's interactivity, and thus improving the user experience.

[0019] In one possible implementation, in response to the seventh operation, the rich text editor further includes: saving the seventh data in the second data structure, the seventh data including: updated data matching the second data structure in the first list, the seventh data including a second field identifier, the second field identifier including the starting row and column positions and the ending row and column positions of L2 cells; in response to the eighth operation, the rich text editor further includes: saving the eighth data in the first data structure, the eighth data excluding one or more of the following: the number of rows spanned by the cell, the number of columns spanned by the cell, and an invisible attribute. Thus, by excluding the number of rows spanned by the cell, the number of columns spanned by the cell, and / or the invisible attribute, the cells after unmerging no longer span multiple rows or columns, and each cell is visible.

[0020] In one possible implementation, unmerging cells L2 into cells L3 includes: responding to a right-click action by unmerging cells L2 into cells L3. This allows the user to choose from one or more options included in the fourth control before right-clicking, reducing the likelihood of accidental actions that deviate from the user's intended behavior and improving the user experience.

[0021] In one possible implementation, the first interface is a note-taking interface, comprising one or more of the following areas: a first area, a second area, a third area, and a fourth area. The third area includes a first control, and the fourth area includes a first table. The first area displays a file list, the second area displays a note list, the third area includes one or more editing icons, each corresponding to one or more editing tasks, and the rich text content is contained in the first table. The fourth area displays the rich text content. In this way, a rich text editor developed based on a webview can support functions such as displaying table row and column headers, merging cells, and unmerging cells, making the rich text editor more comprehensive and feature-rich.

[0022] In one possible implementation, the method further includes: in response to exiting the first interface, the rich text editor saves the data in the first data structure corresponding to the first table; in response to reopening the first interface, the rich text editor displays the first table based on the data in the first data structure corresponding to the first table. This provides users with undo and redo functions, and also allows the editor to load previously edited rich text content when the first table is reopened, thus improving the user experience.

[0023] Secondly, embodiments of this application provide a table processing apparatus, which may be an electronic device, a chip within an electronic device, or a chip system. The apparatus may include a processing unit and a display unit. The processing unit is used to implement any processing-related method executed by the electronic device in the first aspect or any possible implementation of the first aspect. The display unit is used to implement any display-related method executed by the electronic device in the first aspect or any possible implementation of the first aspect. When the apparatus is an electronic device, the processing unit may be a processor. The apparatus may further include a storage unit, which may be a memory. The storage unit is used to store instructions, and the processing unit executes the instructions stored in the storage unit to cause the electronic device to implement the methods described in the first aspect or any possible implementation of the first aspect. When the apparatus is a chip within an electronic device, the processing unit may be a processor. The processing unit executes the instructions stored in the storage unit to cause the electronic device to implement the methods described in the first aspect or any possible implementation of the first aspect. The storage unit may be a storage unit within the chip (e.g., a register, cache, etc.), or a storage unit located outside the chip within the electronic device (e.g., a read-only memory, random access memory, etc.).

[0024] For example, the processing unit is configured to receive a first operation on a first control; and to receive a second operation of selecting N rows and M columns in one or more pre-selected cells, or entering N rows and M columns in a text input box; and specifically, to receive a third operation on a first cell in a first table.

[0025] The display unit is used to display a first interface, a second control, and a first table on the first interface, specifically displaying the row and column headers of the first table.

[0026] In one possible implementation, a processing unit is used to store first data in a first data structure, and also to store second data in a second data structure, and specifically, to update the second data structure with third data. A display unit is used to display the row and column headers of the first table based on the third data.

[0027] In one possible implementation, a processing unit is used to receive a request to cancel a fourth operation targeting a cell in the first table. A display unit is used to cancel the display of row and column headers in the first table.

[0028] In one possible implementation, a processing unit is used to store the fourth data in a second data structure. A display unit is used to deselect the row and column headers of the first table based on the fourth data.

[0029] In one possible implementation, the first data structure stores one or more of the following data: the identifier id of the first list, the child element type of the first list being a table row, the child element type of the table row being a cell, the child element type of the cell being a paragraph, the content of the paragraph, the number of rows spanned by the cell, the number of columns spanned by the cell, or an invisible attribute; the second data structure stores one or more of the following data: the identifier of the first field, the identifier of the second field, the identifier of the third field, the identifier of the fourth field, the identifier of the fifth field, the identifier of the sixth field, the identifier of the seventh field, the identifier of the eighth field, the identifier of the ninth field, the identifier of the tenth field, or the identifier of the eleventh field; wherein, the identifier of the second field is used to represent the first column. The table has no selected cells. The third field indicates the size of the first list. The fourth field indicates whether the first list is fully selected. The fifth field indicates whether the first list is row-selected. The sixth field indicates whether the first list is column-selected. The seventh field indicates whether the first list is partially selected. The eighth field indicates whether there is text content in the selected area of ​​the first list. The ninth field indicates whether there are merged cells in the selected area of ​​the first list. The tenth field indicates whether there are non-merged cells in the selected area of ​​the first list. The eleventh field indicates whether cells in the first list can be merged.

[0030] In one possible implementation, the first field of the second data is marked as null, the first field of the third data is marked as the row and column position of the first cell, and the first field of the fourth data is marked as null.

[0031] In one possible implementation, the display unit is used to highlight the header of the row containing the first cell, and / or to highlight the header of the column containing the first cell.

[0032] In one possible implementation, a display unit is used to display a first table on a first interface in response to an operation on a first button.

[0033] In one possible implementation, the processing unit is configured to receive a fifth operation selecting L1 cells in the first table, and also to receive a sixth operation for the first option in the third control, specifically further configured to merge the L1 cells into one cell in response to the sixth operation. The display unit is configured to display the third control.

[0034] In one possible implementation, the processing unit is used to store the fifth data in the second data structure and also to store the sixth data in the first data structure.

[0035] In one possible implementation, the second field identifier of the fifth data includes the starting row and column positions of L1 cells and the ending row and column positions of L1 cells; if at least two cells in L1 cells are in the same row, then the sixth data has a row number attribute and an invisible attribute set, and / or, if at least two cells in L1 cells are in the same column, then the sixth data has a column number attribute and an invisible attribute set.

[0036] In one possible implementation, a processing unit is used to merge L1 cells into one cell in response to a right-click operation.

[0037] In one possible implementation, the processing unit is configured to receive a seventh operation that selects L2 cells in the first table, and also to receive an eighth operation for the second option in the fourth control, specifically, in response to the eighth operation, to unmerge the L2 cells into L3 cells. The display unit is configured to display the fourth control.

[0038] In one possible implementation, the processing unit is used to store the seventh data in the second data structure and also to store the eighth data in the first data structure.

[0039] In one possible implementation, a processing unit is configured to unmerge cells L2 into cells L3 in response to a right-click operation.

[0040] In one possible implementation, the first interface is a note-taking interface, which includes one or more of the following areas: a first area, a second area, a third area, and a fourth area. The third area includes a first control, and the fourth area includes a first table.

[0041] In one possible implementation, a processing unit is used to store data in a first data structure corresponding to the first table. A display unit is used to display the first table based on the data in the first data structure corresponding to the first table.

[0042] Thirdly, embodiments of this application provide an electronic device including a processor and a memory, the memory for storing code instructions, and the processor for running the code instructions to perform the methods described in the first aspect or any possible implementation of the first aspect.

[0043] Fourthly, this application provides a chip or chip system including at least one processor and a communication interface. The communication interface and the at least one processor are interconnected via a circuit. The at least one processor is used to run computer programs or instructions to perform the methods described in the first aspect or any possible implementation thereof. The communication interface in the chip can be an input / output interface, pins, or circuits, etc.

[0044] In one possible implementation, the chip or chip system described above in this application further includes at least one memory storing instructions. The memory can be an internal storage unit of the chip, such as a register or cache, or it can be a storage unit of the chip itself (e.g., read-only memory, random access memory, etc.).

[0045] Fifthly, embodiments of this application provide a computer-readable storage medium storing a computer program or instructions that, when executed on a computer, cause the computer to perform the methods described in the first aspect or any possible implementation thereof.

[0046] In a sixth aspect, embodiments of this application provide a computer program product including a computer program, which, when run on a computer, causes the computer to perform the methods described in the first aspect or any possible implementation thereof.

[0047] It should be understood that the second to sixth 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. Attached Figure Description

[0048] Figure 1 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0049] Figure 2 A schematic diagram of the software structure of an electronic device provided in an embodiment of this application;

[0050] Figure 3 A schematic diagram of the interface of a note-taking application provided in an embodiment of this application;

[0051] Figure 4 This application provides an example of an interface for inserting a table cell.

[0052] Figure 5 A schematic diagram of an interface for displaying table row and column headers provided in an embodiment of this application;

[0053] Figure 6 This is a schematic diagram of an interface for merging cells provided in an embodiment of this application;

[0054] Figure 7 This is a schematic diagram of an interface for unmerging cells provided in an embodiment of this application;

[0055] Figure 8 A schematic diagram of the framework of a rich text editor provided in an embodiment of this application;

[0056] Figure 9 This is a schematic diagram of the module interaction of a table plugin provided in an embodiment of this application;

[0057] Figure 10 A flowchart illustrating a table processing method provided in this application embodiment;

[0058] Figure 11 This is a schematic diagram illustrating column cell merging as provided in an embodiment of this application;

[0059] Figure 12 This is a schematic diagram illustrating row cell merging as provided in an embodiment of this application;

[0060] Figure 13 A schematic diagram illustrating a table processing method provided in an embodiment of this application;

[0061] Figure 14 This is a schematic diagram of the structure of a chip provided in an embodiment of this application. Detailed Implementation

[0062] To facilitate a clear description of the technical solutions in the embodiments of this application, some terms and technologies involved in the embodiments of this application will be briefly introduced below:

[0063] 1. Terminology

[0064] In the embodiments of this application, terms such as "first" and "second" are used to distinguish identical or similar items with substantially the same function and purpose. For example, "first chip" and "second chip" are used only to distinguish different chips and do not limit their order of execution. Those skilled in the art will understand that terms such as "first" and "second" do not limit the quantity or execution order, and that "first" and "second" do not necessarily imply that they are different.

[0065] It should be noted that, in the embodiments of this application, the terms "exemplary" or "for example" are used to indicate 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.

[0066] 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, a--c, bc, or abc, where a, b, and c can be single or multiple.

[0067] 2. Electronic equipment

[0068] The electronic devices in this application embodiment can also be any form of terminal device. For example, electronic devices may include: mobile phones, tablet computers, handheld computers, laptops, mobile internet devices (MIDs), wearable devices, virtual reality (VR) devices, augmented reality (AR) devices, wireless terminals in industrial control, wireless terminals in self-driving, wireless terminals in remote medical surgery, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, wireless terminals in smart homes, cellular phones, cordless phones, session initiation protocol (SIP) phones, wireless local loop (WLL) stations, personal digital assistants (PDAs), handheld devices with wireless communication capabilities, computing devices or other processing devices connected to a wireless modem, in-vehicle devices, wearable devices, electronic devices in 5G networks, or future evolved public land mobile communication networks (PLANs). The embodiments of this application do not limit the scope of electronic devices in a mobile network (PLMN).

[0069] By way of example and not limitation, in this embodiment, the electronic device can also be a wearable device. Wearable devices, also known as wearable smart devices, are a general term for devices that utilize wearable technology to intelligently design and develop everyday wearables, such as glasses, gloves, watches, clothing, and shoes. Wearable devices are portable devices that are worn directly on the body or integrated into the user's clothing or accessories. Wearable devices are not merely hardware devices, but also achieve powerful functions through software support, data interaction, and cloud interaction. Broadly speaking, wearable smart devices include those that are feature-rich, large in size, and can achieve complete or partial functions without relying on a smartphone, such as smartwatches or smart glasses, as well as those that focus on a specific type of application function and require the use of other devices such as smartphones, such as various smart bracelets and smart jewelry for vital sign monitoring.

[0070] Furthermore, in this application embodiment, the electronic device can also be an electronic device in the Internet of Things (IoT) system. IoT is an important part of the future development of information technology. Its main technical feature is to connect objects to the network through communication technology, thereby realizing an intelligent network of human-machine interconnection and object-to-object interconnection.

[0071] The electronic equipment in the embodiments of this application may also be referred to as: user equipment (UE), mobile station (MS), mobile terminal (MT), access terminal, user unit, user station, mobile station, mobile station, remote station, remote terminal, mobile device, user terminal, terminal, wireless communication equipment, user agent, or user device, etc.

[0072] In this embodiment, the electronic device or various network devices include a hardware layer, an operating system layer running on top of the hardware layer, and an application layer running on top of the operating system layer. The hardware layer includes hardware such as a central processing unit (CPU), a memory management unit (MMU), and memory (also called main memory). The operating system can be any one or more computer operating systems that implement business processing through processes, such as Linux, Unix, Android, iOS, or Windows. The application layer includes applications such as browsers, address books, word processing software, and instant messaging software.

[0073] For example, Figure 1 A schematic diagram of the electronic device is shown.

[0074] The electronic device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0075] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may include hardware, software, or a combination of software and hardware.

[0076] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution.

[0077] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the aforementioned memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0078] It is understood that the interface connection relationships between the modules illustrated in the embodiments of the present invention are merely illustrative and do not constitute a limitation on the structure of the electronic device. In other embodiments of this application, the electronic device may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0079] Internal memory 121 can be used to store executable program code, including instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function, etc. The data storage area may store data created during the use of the electronic device, etc. Furthermore, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional applications and data processing of the electronic device by running instructions stored in internal memory 121 and / or instructions stored in memory disposed within the processor.

[0080] Figure 2 This is a software structure block diagram of an electronic device according to an embodiment of this application. The layered architecture divides the software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into five layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system libraries, the hardware adaptation layer (HAL), and the kernel layer.

[0081] The application layer, also known as the application layer, can include a series of application packages. For example... Figure 2 As shown, the application package can include applications such as notes, memos, and camera. Applications can include system applications and third-party applications.

[0082] The application framework layer, also known as the framework layer, provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The framework layer can include some predefined functions.

[0083] like Figure 2 As shown, the Framework layer can include a window manager, resource manager, notification manager, content provider, and view system, etc.

[0084] The Android runtime consists of core libraries and a virtual machine. The Android runtime is responsible for the control and management of the Android system.

[0085] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0086] The application layer and framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection. For example, in the embodiments of this application, the virtual machine can be used to perform these functions.

[0087] The system library, also known as the native layer, can include multiple functional modules. Examples include media libraries, function libraries, and graphics processing libraries.

[0088] The kernel layer is the layer between hardware and software. The kernel layer can include display drivers, camera drivers, audio drivers, battery drivers, Bluetooth drivers, CPU drivers, USB drivers, etc.

[0089] It should be noted that the embodiments of this application are only illustrated using the Android system. In other operating systems (such as Windows system, iOS system, etc.), as long as the functions implemented by each functional module are similar to those in the embodiments of this application, the solution of this application can also be implemented.

[0090] Some applications on electronic devices can be used to record information, such as memos and note-taking apps. When using these applications to record information, in addition to recording basic text, users may also want to record other content such as tables and images within the application, thus requiring the use of a rich text editor to edit the rich text content.

[0091] However, most rich text editors are currently developed based on the system's native framework. It is difficult to implement table functions and corresponding complex interaction logic based on the system's native framework. Therefore, rich text editors developed based on the system's native framework usually do not support table editing functions, or do not support relatively complex table editing functions.

[0092] In some implementations, rich text editors can be developed using webviews to modify the display style of rich text content. For example, rich text editors developed based on webviews can support functions such as inserting, deleting, selecting areas, and inserting rows and columns in tables.

[0093] However, the table editing functions implemented by rich text editors are relatively simple and lack comprehensiveness, which reduces the user experience.

[0094] In view of this, the table processing method provided in this application embodiment can be used to develop a richer text editor with richer functions based on webview, such as adding the display of table row and column headers, adding merged cells, adding and unmerging cell functions, making the rich text editor more comprehensive, improving the table's interactivity, and thus enhancing the user experience.

[0095] It is understood that the rich text editor provided in this application embodiment can be integrated into applications on different terminal platforms such as Android or Windows, and can also be used in web pages, making the cross-platform rich text editor more portable. Therefore, the rich text editor can also be called a cross-platform rich text editor.

[0096] For ease of description, the following explanation will use a note-taking application on a tablet as an example. In some scenarios, note-taking applications may also be called memo applications. Note-taking applications can integrate a rich text editor's software development kit (SDK) to achieve the functions provided by the rich text editor, such as paragraphs, lists, images, and tables.

[0097] For example, such as Figure 3 As shown, an electronic device can display a note-taking application interface 301. Interface 301 may include a file list 302, a note list 303, a user event response area 304, and a rich text editor area 305. The file list 302 displays the user's file categories, the note list 303 displays a list of rich text files stored in a folder, the user event response area 304 displays the user's editing operations on the rich text content, and the rich text editor area 305 displays the rich text content edited by the user.

[0098] The user event response area 304 may include editing operations such as font type selection, font size selection, bold, italic, underline, and image insertion. Additionally, the user event response area 304 may also include a table icon 306 for inserting tables.

[0099] For example, when a user clicks the table icon 306, the application interface can display a table selection box 307 in response to the user's click operation. The table selection box 307 may include multiple pre-selected cells 308, a text input box 309, and an OK button 310.

[0100] Optionally, the table selection box 307 may include only multiple pre-selected cells 308, or only text input boxes 309, or both multiple pre-selected cells 308 and text input boxes 309, depending on actual needs. Furthermore, the specific display style and content of the table selection box 307 can also be selected and set according to actual needs, and this embodiment does not limit this.

[0101] Users can select the number of rows and columns in the table selection box 307 and click the OK button 310. For ease of description, the following explanation will use a table with 2 rows and 2 columns as an example.

[0102] In one possible implementation, the user can select 2 rows and 2 columns of pre-selected cells from multiple pre-selected cells 308 and click the OK button 310. In response to the user's click, the rich text editor can create a table with a size of 2 rows and 2 columns, such as... Figure 4 The application interface 401 is shown in Table 402.

[0103] In another possible implementation, the user can enter 2-2 in the text input box 309 and click the OK button 310. In response to the user's click, the rich text editor can create a table with a size of 2 rows and 2 columns, such as... Figure 4 The table 402 in the application interface 401 is shown. The format of the text entered by the user in the text input box 309 is not limited in this embodiment.

[0104] Optionally, the OK button 310 may not be included in the table selection box 307. When the user selects 2 rows and 2 columns of pre-selected cells from multiple pre-selected cells 308, or when the user enters 2-2 in the text input box 309, the rich text editor can create a table with a size of 2 rows and 2 columns in response to the user's operation.

[0105] It is understandable that, such as Figure 4As shown, in the current rich text editor's implementation of table 402, when the user selects a cell in table 402, the table's row and column headers will not be displayed.

[0106] like Figure 5 As shown in the application interface 501, in the table 502 implemented by the rich text editor in this application embodiment, when the user selects the first cell 503 of the table 502, the cell 503 can get focus, and the row and column headers 504 of the table can be displayed on the interface 501.

[0107] Among them, the table's row and column headers 504 can display the column header of column A, the number A of column A, the column header of column B, the number B of column B, the select all icon 505, the row header of row 1, the number 1 of row 1, the row header of row 2, and the number 2 of row 2, etc.

[0108] It is understood that since the first cell of Table 502 receives focus, the row and column headers corresponding to the first cell can be highlighted. This highlighting may include highlighting the column header of column A and / or bolding the column number A, as well as highlighting the row header of row 1 and / or bolding the row number 1. The specific highlighting method is not limited in this embodiment.

[0109] It should be noted that when the user deselects a cell in table 502, the cell loses focus, and the rich text editor can hide the table's row and column headers, so that the table's row and column headers are not displayed on interface 501.

[0110] The rich text editor in this application embodiment can also implement the functions of merging and unmerging cells.

[0111] Figure 6 The function to merge cells is shown.

[0112] For example, such as Figure 6 As shown in Figure a, in the application interface 601, when the user selects a cell range 603 consisting of two cells in table 602 and right-clicks, an option box 604 can be displayed in response to the user's click operation. The option box 604 may include options such as select all, copy, paste, merge cells 605, unmerge cells, and clear cells.

[0113] Optionally, during the above process, when the user selects cell range 603, it is not necessary to right-click. The application interface 601 can respond to the user's operation of selecting cell range 603 and display the option box 604.

[0114] Optionally, the user-selected cell region 603 can be highlighted in the interface 601. For example, the border of the cell region 603 can be thickened, and / or the cell region 603 can be highlighted, etc. The specific way to highlight the cell region 603 is not limited in this embodiment.

[0115] Understandably, since cell range 603 includes the smallest unit of cells, the process of unmerging cells cannot be executed; therefore, the unmerge cells option is not selectable. At this time, the text for unmerge cells can still be grayed out. Optionally, the unmerge cells option may not be displayed in option box 604; this embodiment does not limit this.

[0116] Optionally, when the focus is on the merged cell option 605, the merged cell option 605 can be highlighted. Highlighting may include highlighting the background of the merged cell option 605 and / or bolding the font of the merged cell option 605. The specific highlighting method is not limited in this embodiment.

[0117] When the user clicks the merge cells option 605, in response to the user's click, the application interface 601 can... Figure 6 As shown in b, the two cells in cell range 603 in the original table 602 can be merged into one cell, as shown in cell range 607 in table 606.

[0118] Optionally, the merged cell region 607 can be highlighted in the interface 601. For example, the border of cell region 607 can be thickened, and / or cell region 607 can be highlighted, etc. The specific way to highlight cell region 607 is not limited in this embodiment.

[0119] It is understood that when multiple cells are merged, the content displayed in the merged cell can be the content of one or more cells before the merge, and this application embodiment does not limit this.

[0120] For example, such as Figure 6 As shown, before merging the cells, the two cells in cell range 603 of table 602 display the content of text 1 and text 2, respectively. After merging the cells, the content displayed in cell range 607 of table 606 can be text 1. Optionally, the content displayed in cell range 607 can also be text 2, or it can be both text 1 and text 2, or it can be that no text content is displayed, etc. The specific content displayed in cell range 607 after merging the cells is not limited in this embodiment.

[0121] Figure 7The function to unmerge cells is shown.

[0122] For example, such as Figure 7 As shown in Figure a, in the application interface 701, when the user selects the cell range 703 in table 702 and right-clicks, an option box 704 can be displayed in response to the user's click operation. The option box 704 may include options such as select all, copy, paste, merge cells, unmerge cells 705, and clear cells.

[0123] Optionally, during the above process, when the user selects cell range 603, it is not necessary to right-click. The application interface 601 can respond to the user's operation of selecting cell range 603 and display the option box 604.

[0124] Optionally, the user-selected cell region 703 can be highlighted in the interface 701. For example, the border of the cell region 703 can be thickened, and / or the cell region 703 can be highlighted, etc. The specific way to highlight the cell region 703 is not limited in this embodiment.

[0125] Understandably, since there is only one cell in cell range 703, the process of merging cells cannot be executed; therefore, the merge cell option is not selectable. At this time, the text for canceling merge cells can still be grayed out. Optionally, the cancel merge cell option may not be displayed in option box 704; this embodiment does not limit this.

[0126] Optionally, when the focus is on the "Unmerge Cells 705" option, the "Unmerge Cells 705" option can be highlighted. Highlighting may include highlighting the background of the "Unmerge Cells 705" option and / or bolding the font of the "Unmerge Cells 705" option. The specific highlighting method is not limited in this embodiment.

[0127] When the user selects the option to unmerge cells (705), the application interface (701) responds to the user's click as follows: Figure 7 As shown in b, the cell range 703 in the original table 702 can be displayed as two cells, as shown in the cell range 707 in the table 706.

[0128] Optionally, the interface 701 can highlight the unmerged cell region 707. For example, the border of cell region 707 can be thickened, and / or cell region 707 can be highlighted, etc. The specific way to highlight cell region 707 is not limited in this embodiment.

[0129] It is understandable that when cells are unmerged, the content displayed in the multiple cells after unmerging can be the content displayed in cell range 703 before the cells were unmerged.

[0130] For example, such as Figure 7 As shown, before unmerging cells, the content displayed in cell range 703 of table 702 includes the text "1". After unmerging cells, the content displayed in multiple cells of cell range 707 of table 706 can be the text "1". Optionally, after unmerging cells, each cell may not display any text content. The specific content displayed in each cell after unmerging cells is not limited in this embodiment.

[0131] Based on the content displayed by the rich text editor in the above application interface, the following will combine... Figure 8 and Figure 9 The framework and module interactions of the rich text editor provided in the embodiments of this application are described.

[0132] Figure 8 A schematic diagram of the rich text editor framework is shown.

[0133] Rich text editors can include paragraph rich text editors, list rich text editors, image rich text editors, table rich text editors, etc. In some implementations, paragraph rich text editors can also be called paragraph plugins, list rich text editors can also be called list plugins, image rich text editors can also be called image plugins, and table rich text editors can also be called table plugins.

[0134] The basic rendering logic of a rich text editor can render paragraph plugins, list plugins, image plugins, table plugins, etc. The rendering of table plugins can include managing the table data model, displaying the view interface, and executing event handling logic (Actions).

[0135] It is understood that the tables provided in this application embodiment can be decoupled from the rich text editor and used as table plugins. This makes the table plugin independent of other rich text plugins, ensuring that the content of the table is also independent of other rich text content, thereby facilitating the expansion and maintenance of the table plugin's functionality.

[0136] Rich text editors are editors developed based on webviews. Webview technology can be implemented using the TypeScript programming language, React rendering technology, and the Webpack code compilation tool. TypeScript is also known as the TS programming language. By modifying the data structures of the TS programming language format, the display style of the rich text content in the rich text editor can be modified. Therefore, rich text editors can easily and effectively support table editing functions, thereby significantly improving the functionality of the rich text editor.

[0137] Figure 9 The diagram illustrates the module interaction of the table plugin.

[0138] The implementation of a table plugin can include a table control center (Action), a table data model (Model), an event listener and data update module (useHook), a database (DB), React rendering technology, an external interface (HinoteBridge), an external interface (AppBridge), and a history record.

[0139] In this context, the table control center (Action) can be understood as the control center for modifying table data. Actions can be used to execute related logic such as event handling. For example, an Action can perform corresponding processing based on table selections and event types, and update the table data model (Model). In some scenarios, an Action can also be called a behavior control unit or execution unit.

[0140] A tabular data model (Model) can be used to modify and save tabular data according to instructions from an Action. A tabular data model can include Data and Status data. In some scenarios, a Model can also be referred to as a data processing unit.

[0141] Data can be used to store table structure and content data. For example, data can store information such as the number of rows and columns, cell merging, and cell content. Data can be stored in a database (DB).

[0142] Status data can be used to store temporary data, such as the temporary state of a table. This temporary state can include information such as focus changes, selection changes, and whether editing is in progress. The temporary state of a table can be understood as the state that temporarily occurs during user interaction. Status data can be stored in a temporary cache or represented by temporary variables.

[0143] The `useHook` module, used for event listening and data update, can be used for event listening and view rendering. Understandably, the Model and `useHook` can be bound together using React technology, and `useHook` can render data from the Model onto the user interface (UI).

[0144] For example, the UI displays a table with 2 rows and 2 columns. Actions can listen for events on the table, such as mouse clicks, button clicks, and dragging selections. If a user deletes a row in the table, in response, the Action can modify the data in the Model based on this action. These changes in the Model can then be re-rendered onto the UI using React technology, achieving consistency between data and the UI.

[0145] Action can call the external interface HinoteBridge to perform functions such as undoing, adding backgrounds, and inserting images on tables. It can also perform functions such as bolding, italics, underlining, adjusting font size, changing font color, and adding or removing hyperlinks to the content in the table.

[0146] When the table changes, for example, when a row is selected, the Action can call the external interface AppBridge to notify an external object that a row is currently selected. This external object can include note-taking applications, web pages, or other objects capable of displaying tables. Optionally, the external object can also provide functions such as undo, add background, insert images, bold, italic, underline, adjust font size, change font color, and / or add or remove hyperlinks. The specific external object is not limited in this embodiment.

[0147] For example, consider a user selecting a row in a table and highlighting its content in bold. When the user selects a row, the table's `useHook` can listen for the row selection event. In response to the user's action, the `Action` can call the external interface `AppBridge` to notify the external object that the table is currently in a row-selected state. Similarly, when the user selects to highlight the content in that row, the `Action` can call the external interface `HinoteBridge` to bold the content in that row, and it can also call the external interface `AppBridge` to notify the external object that the content in that row is now highlighted in bold.

[0148] It is understandable that the Action can call the external interface HinoteBridge to modify the table, and the Action can call the external interface AppBridge to notify the external object of the current table status.

[0149] History records, also known as record units, are used to record operations performed in a rich text editor.

[0150] Figure 10 A flowchart of the table processing method is shown.

[0151] S1001. Initialize the data model.

[0152] In one possible scenario, when a user inserts a new table, the application can initialize a rich text editor in response to the user's action. The rich text editor can create a data model (Model), initialize the data, and save the initialized data to either the Data or Status database. Understandably, in this scenario, since the table is newly created and there is no corresponding historical data for that table in the database, the rich text editor will not execute the process of loading historical data from the database.

[0153] In another possible scenario, the rich text editor can be initialized when the application starts. The rich text editor can create a data model and initialize data. Understandably, in this scenario, if the user opens a previously edited note that includes a table, the rich text editor can retrieve the historical data of that table from the database and load it into the data model.

[0154] S1002, Record a historical record.

[0155] When there are updates to the data model, the corresponding historical records can be saved in the database, which enables functions such as undoing and redoing. It is understood that the database can store one or more historical records, and the specific number of historical data records that can be saved is not limited in this embodiment.

[0156] S1003, Render table style.

[0157] useHook can render table styles in the UI. Step S1004 can also be executed while rendering the table style.

[0158] S1004. Add event listeners.

[0159] Understandably, different event listeners can be added to the application, and depending on the event, status data can be updated in the Status and / or Data data. Updates to the Status and / or Data data can trigger a re-rendering of the table.

[0160] For example, in this embodiment of the application, the row and column header data of the table can be stored in the Status data, and the merged cell data can be stored in the Data data.

[0161] S1005, User-triggered status event.

[0162] State events can include focus changes, selection changes, and component click listeners.

[0163] When a user triggers a certain state event, the useHook can listen to that state event and interact with the Action, which can then execute step S1006.

[0164] S1006, Distribute event handling.

[0165] When a user triggers a state event, the Action can process the event in response to the user's action. It's understandable that the processing logic for different state events can differ.

[0166] S1007. Update the Status data of the data model.

[0167] Since states such as focus change and selection change are temporary states of the table, the relevant data for these state events can be updated in the Status data.

[0168] S1008, Update table view.

[0169] When the table state changes, the useHook can be triggered to update the table view.

[0170] S1009, Trigger the edit event.

[0171] Editing events can include events such as entering text, merging cells, selecting rows and columns, inserting rows and columns, and deleting rows and columns.

[0172] S1010, Distribute event handling.

[0173] When a user triggers an edit event, the Action can process the edit event in response to the user's action. It's understandable that the processing logic for different edit events can differ.

[0174] S1011. Update the Data of the Data Model.

[0175] It is understandable that events such as entering text, merging cells, selecting rows and columns, inserting rows and columns, and deleting rows and columns can change the table structure and / or table content data. Therefore, the relevant data of the edit event can be updated in the Data data.

[0176] S1012, Update table view.

[0177] After the table structure and / or table content data change, the useHook can be triggered to update the table view and execute step S1013 to save the updated table information to the database.

[0178] S1013. Save the database.

[0179] S1014, Render again.

[0180] When the table is reopened, the table data can be read from the database, and step S1001 can be executed to initialize the data model.

[0181] For example, the following example illustrates the execution flow of the table processing method using a user selecting and deleting a column in a table. The processes for initializing the table and rendering table styles can be referenced above. Figure 10 The relevant descriptions of steps S1001-S1003 in the corresponding embodiments will not be repeated.

[0182] `useHook` can add event listeners to the column headers of a table. When a user triggers an event to select a column in the table, `useHook` can listen for that event. In response to the user's action, the Action can determine that the event is a state event indicating a change in selection. Since this state event is a temporary state of the table, the Action can record the event of a column being selected in the Status data. Simultaneously, `useHook` can update the table view based on changes in the Status data.

[0183] When a user triggers an event to delete a column, the useHook can listen for this event. In response to the user's action, the Action can determine that the event is an edit event for deleting a column, as this event changes the table structure. Therefore, the Action can record the column deletion event in the Data. Simultaneously, the useHook can update the table view based on the changes in the Data.

[0184] In combination with the above Figure 10 The table processing method corresponding to the embodiment is described below, specifically (1) rendering of table row and column headers and (2) merging of cells.

[0185] (1) Rendering of table row and column headers.

[0186] During the rendering of table row and column headers, the table processing method of this application embodiment needs to make corresponding settings for the table's Data, Status, and Hypertext Markup Language (HTML) data built by React.

[0187] (1.1) Setting up the Data.

[0188] The Data field in the table can contain one or more of the following settings:

[0189] The rich text type is table, the child elements of the table are children, the child elements of the table are table-row, the child elements of the table-row are cell-cell, the child elements of the cell-cell are paragraph, the content of the paragraph is text, and the identifier of the table is id, etc.

[0190] Since the table is a 2-row, 2-column table, the child elements of the table can have 2 table rows (table-row), representing the 2 rows of the table. Each table row (table-row) can have 2 table cells (table-cell), representing the 2 columns of the table.

[0191] Furthermore, if the text content is an empty string, it indicates that the paragraph content is empty. Understandably, different tables can have their own corresponding table IDs, which serve as unique identifiers for the tables. Additionally, the table content displayed in the UI and the HTML table data built by React can also be correlated using table IDs.

[0192] For example, the rendering implementation of table row and column headers may include the following:

[0193]

[0194] (1.2) Setting the Status data.

[0195] The status data stored in the Status data may include one or more of the following:

[0196] Check if the table contains cells in editing mode (editingCell), cells in selection mode (selection), table size (size), whether the table is in whole-selected mode (wholeSelected), whether the table is in row-selected mode (rowsSelected), whether the table is in column-selected mode (columnsSelected), whether the table is in partial-selected mode (partSelected), whether the table selection contains text (textInSelection), whether the table selection contains merged cells (mergedCellInSelection), whether the table selection contains unmerged cells (unMergedCellInSelection), and whether cells can be merged (canMerge), etc.

[0197] Understandably, the Status data for a table may differ depending on whether the focus is on the table or not.

[0198] For cases where the focus is not within the table, the Status data can include the following:

[0199] {"editingCell":null,

[0200] "selection":null,

[0201] "size":[2,2],

[0202] "wholeSelected":false,

[0203] "rowsSelected":false,

[0204] "columnsSelected":false,

[0205] "partSelected":false,

[0206] "textInSelection":false,

[0207] "mergedCellInSelection":false,

[0208] "unMergedCellInSelection":false,

[0209] "canMerge":false}

[0210] In this table, `editingCell` is null, indicating that there are no cells in the current table that are currently being edited. `selection` is null, indicating that there are no cells in the current table that are currently selected. `size` is a binary array [2,2], representing the number of rows and columns in the table. `wholeSelected` is false, indicating that the current table is not fully selected. `rowsSelected` is false, indicating that the current table is not row-selected. `columnsSelected` is false, indicating that the current table is not column-selected. `partSelected` is false, indicating that the current table is not partially selected. `textInSelection` is false, indicating whether there is any text content in the selected area. `mergedCellInSelection` is false, indicating that there are no merged cells in the selected area. `unMergedCellInSelection` is false, indicating whether there are any unmerged cells in the selected area. `canMerge` is false, indicating that cells cannot be merged at this time.

[0211] It is understood that the data stored in the Status data may include data types such as integer, boolean, and string. However, the specific data type stored in the Status data is not limited in this embodiment.

[0212] For cases where the focus is within a table, the Status data can include the following:

[0213] {"editingCell":[0,0],

[0214] "selection":null,

[0215] "size":[2,2],

[0216] "wholeSelected":false,

[0217] "rowsSelected":false,

[0218] "columnsSelected":false,

[0219] "partSelected":false,

[0220] "textInSelection":false,

[0221] "mergedCellInSelection":false,

[0222] "unMergedCellInSelection":false,

[0223] "canMerge":false}

[0224] As can be seen from the Status data above, unlike the case where the focus is not within the table, when the focus is within the table, editingCell can record the position of the cell where the current focus is located. For example, if the current focus is on... Figure 5 If the position of cell 503 is specified, then editingCell can be [0,0], which indicates that the current focus cell is the cell corresponding to the first row and first column of the table.

[0225] (1.3) Setting up HTML data built by React.

[0226] The HTML data constructed by React can include one or more of the following:

[0227] The class style of each element in the table, the table ID, and the table tags. Table main content tags Table row labels Cell labels The `rowspan` property specifies the number of rows a cell spans, the `colspan` property specifies the number of columns a cell spans, and the `display` property specifies the display width. The `rowspan` property can be understood as the column width of a cell, and the `colspan` property as the row width of a cell.

[0228] Understandably, the HTML data built by React can differ depending on whether the focus is on the table or not.

[0229] For cases where the focus is not within the table, the HTML data built by React can include the following:

[0230]

[0231] It is understood that the styles of class1, class2, class3, class4, class5, class6, and class7 mentioned above may be the same or different, and this application embodiment does not limit them.

[0232] In a possible implementation, table row labels Style class2 and style class5 can be the same style, cell label Styles class3, class4, class6, and class7 can be the same style.

[0233] When the focus is on a table, the HTML data built by React can include the following:

[0234]

[0235] It is understood that the styles of class9, class10, class11, class12, class13, class14, and class15 mentioned above may be the same or different, and this application embodiment does not limit them.

[0236] In a possible implementation, table row labels Styles class10 and class13 can have the same style, cell label Styles class11, class12, class14, and class15 can be the same style.

[0237] Unlike when the focus is not in the table, when the focus is in the table, the HTML data built by React can include corresponding styles such as row and column headers A and B, select all icons, number 1, number 2, etc.

[0238] Among them, the class style "Al touch-bar focus top" of row and column header A can be used to indicate Figure 5 The style for highlighting the column header and / or the column number A in column A.

[0239] The class style "Al touch-bar top last-item" for row and column header B can be used to represent Figure 5 The style displayed for the column header and / or the column number B in column B.

[0240] The class style "Al touch-bar-select-all" for the select-all icon can be used to represent... Figure 5 The style of the "Select All" icon 505.

[0241] The class style "Al touch-bar focus left" in sequence 1 can be used to indicate Figure 5 The style for highlighting the header and / or number 1 of the first line in the middle.

[0242] The class style "Al touch-bar left last-item" in sequence number 2 can be used to represent Figure 5 The style displayed by the header of line 2 and / or number 2 in line 2.

[0243] It is understood that the names of the above class styles are merely exemplary. For example, "Al touch-barfocus top", "Al touch-bar top last-item", "Al touch-bar-select-all", "Al touch-bar focus left", and "Al touch-bar left last-item" can have other names, which are not limited in this application embodiment.

[0244] (2) Merge cells.

[0245] like Figure 6 As shown, users can select multiple cells in the table and choose the "Merge Cells" option to merge the cells. In response to the user's merge cell operation, the table plugin can execute the merge process and modify the corresponding Data in the table.

[0246] It is understood that after a user selects multiple cells in a table, the selection in the corresponding Status data of the table can be an array of the form [start(row1,col1),end(row2,col2)]. Here, start(row1,col1) can be understood as the row and column position of the starting cell in the selected cell range, where row1 can be the starting row and col1 can be the starting column. end(row2,col2) can be understood as the row and column position of the ending cell in the selected cell range, where row2 can be the ending row and col2 can be the ending column. It is also understood that selection can use other forms to represent the selected cell range, and this embodiment does not limit this.

[0247] Furthermore, the `canMerge` field in the `Status` data corresponding to the table can take the first value, which can be used to indicate that multiple selected cells can be merged. The data type of this first value can include integer, boolean, string, etc. For example, the first value can take the value `true`. The specific value of the first value is not limited in this embodiment.

[0248] Merging cells can include merging row cells and merging column cells.

[0249] like Figure 11 The image shows a diagram illustrating column cell merging. (As shown...) Figure 12 The image shows a diagram illustrating the merging of row cells.

[0250] It is understandable that merging column cells and merging row cells can result in different Data in the table and HTML data built by React.

[0251] (2.1) Merging column cells.

[0252] For example, the modified Data may include the following:

[0253]

[0254]

[0255] It is understandable that after merging cells, the Data can include the rowspan property (the number of rows the cell spans) and the invisible property (the property that the cell is invisible).

[0256] In this case, the first cell of the first table row (table-row) has a rowspan property of 2, which means that the first cell of the first table row spans two rows. This can also be understood as the column width of the first cell of the first table row being 2, indicating that the first cell occupies the height of two cells.

[0257] The `invisible` property of the first cell in the second table row (`table-row`) is set to `true`, meaning that the first cell in the second table row is not visible.

[0258] In this way, because the first cell of the first row spans two rows, and the first cell of the second row is not visible, this achieves... Figure 11 Merge the corresponding column cells.

[0259] The modified HTML data built by React can include the following:

[0260]

[0261] It is understood that the styles of class16, class17, class18, class19, class20, class21, and class22 mentioned above can be the same or different, and this application embodiment does not limit this. In a possible implementation, table row labels... Styles class17 and class20 can have the same style, cell label Styles class18, class19, and class22 can be the same style.

[0262] Regarding merging column cells, in the HTML data built by React, the first table row tag... The first cell label In the table, the rowspan property of a cell is 2, which means that the first cell of the first row spans 2 rows. It can also be understood as the column width of the first cell of the first row being 2, indicating that the first cell occupies the height of 2 cells.

[0263] In the second table row label The first cell label In this context, a display property of none means that the first cell of the second row of a table will not be displayed on the screen.

[0264] In this way, because the first cell of the first row of the table spans two rows, and the first cell of the second row of the table is not displayed on the interface, thus achieving... Figure 11 Merge the corresponding column cells.

[0265] Understandably, when merging column cells, the changes in the Data and the HTML data built by React are consistent. Both will show the first cell of the first row spanning two rows, and the first cell of the second row not displaying, thus achieving... Figure 11 Merge the corresponding column cells.

[0266] (2.2) Merging row cells.

[0267] For example, the modified Data may include the following:

[0268]

[0269] It is understandable that after merging cells, the Data can include the colspan property (the number of columns the cell spans) and the invisible property (the property indicating that the cell is not visible).

[0270] In this case, the colspan property of the first cell in the first table row (table-row) is 2, which means that the first cell in the first table row spans two columns. This can also be understood as the row width of the first cell in the first table row being 2, indicating that the first cell occupies the width of two cells.

[0271] The `invisible` property of the second cell in the first table row (`table-row`) is set to `true`, meaning that the second cell in the first table row is not visible.

[0272] In this way, because the first cell of the first row of the table spans two columns, and the second cell of the first row of the table is not visible, this achieves... Figure 12 Merge the corresponding row cells.

[0273] The modified HTML data built by React can include the following:

[0274]

[0275] It is understood that the styles of class23, class24, class25, class26, class27, class28, ​​and class29 mentioned above can be the same or different, and this application embodiment does not limit this. In a possible implementation, table row labels... Styles class24 and class27 can have the same style, cell label Styles class25, class28, ​​and class29 can be the same style.

[0276] Regarding merging row cells, in the HTML data built by React, the first table row tag... The first cell label In this table, the `colspan` property, which specifies the number of rows a cell spans, is 2. This means that the first cell in the first row spans two columns. Alternatively, it can be understood as the first cell in the first row having a row width of 2, indicating that the first cell occupies the width of two cells.

[0277] In the first table row label The second cell label In this context, setting the display property to none means that the second cell of the first row of the table will not be displayed on the screen.

[0278] In this way, because the first cell of the first row of the table spans two columns, and the second cell of the first row of the table is not displayed on the interface, this achieves... Figure 12 Merge the corresponding row cells.

[0279] Understandably, when merging row cells, the changes in the Data and the HTML data built by React are consistent: the first cell of the first row spans two columns, and the second cell of the first row is not displayed, thus achieving... Figure 12 Merge the corresponding row cells.

[0280] Understandably, in the implementation of unmerging cells, the changes to the Data and the HTML data built by React are consistent.

[0281] For example, in Data, a table-cell may not include the colspan, rowspan, and / or invisible attributes. This means that the unmerged cells no longer span multiple rows or columns, and each cell is visible.

[0282] In HTML data built by React, cell tags The `colspan` and `rowspan` attributes can each be set to 1, and the cell label... The display property of the cell will not be set to none, so that the cell after unmerging will be the smallest unit cell, thus achieving the function of unmerging cells.

[0283] It is understood that the code in the embodiments of this application is exemplary code and is only used to describe the table processing method in the embodiments of this application. The code running in a specific electronic device may contain more or less exemplary code, and the embodiments of this application are not limited thereto.

[0284] The methods of this application will be described in detail below through specific embodiments. The following embodiments can be combined with each other or implemented independently, and the same or similar concepts or processes may not be described again in some embodiments.

[0285] Figure 13 An embodiment of the table processing method of this application is illustrated. The method includes:

[0286] S1301. Display the first interface, which includes the first control.

[0287] In this embodiment of the application, the first interface can be understood as described above. Figure 3 Interface 301 in the corresponding embodiment.

[0288] The first control can be understood as the above. Figure 3 The corresponding table icon 306 in the embodiment.

[0289] For details on the first interface and the first control, please refer to the above. Figure 3 The relevant descriptions in the corresponding embodiments will not be repeated here.

[0290] S1302, Received the first operation for the first control.

[0291] In this embodiment of the application, the first operation may include the above-mentioned... Figure 3 In the corresponding embodiment, the first operation of clicking the table icon 306 may also include user-inputted voice operation, etc., which is not limited in this application embodiment.

[0292] S1303. In response to the first operation, a second control is displayed, the second control including: one or more pre-selected cells, and / or, a text input box.

[0293] In this embodiment of the application, the second control can be understood as described above. Figure 3 The corresponding example shows the table selection box 307.

[0294] The pre-selected cells can be understood as described above. Figure 3 Preselected cell 308 in the corresponding embodiment.

[0295] The text input box can be understood as described above. Figure 3 The corresponding text input box 309 in the embodiment.

[0296] For details on the second control, preselected cells, and text input boxes, please refer to the above. Figure 3 The relevant descriptions in the corresponding embodiments will not be repeated here.

[0297] S1304: Received a second operation to select N rows and M columns in one or more pre-selected cells, or to enter N rows and M columns in a text input box.

[0298] In this embodiment, the second operation can be understood as creating an N-row, M-column cell. Specifically, selecting N rows and M columns in one or more pre-selected cells, or entering N rows and M columns in a text input box, can be referred to the above. Figure 3 The relevant descriptions in the corresponding embodiments will not be repeated here.

[0299] S1305. In response to the second operation, a first table is displayed on the first interface, the first table comprising N rows and M columns.

[0300] In this embodiment of the application, the first table can be understood as described above. Figure 4 Table 402 in the corresponding embodiment. The specific process of displaying the first table on the first interface can be referred to the above. Figure 3 and Figure 4 The relevant descriptions in the corresponding embodiments will not be repeated here.

[0301] S1306, Received a third operation for the first cell in the first table.

[0302] In this embodiment of the application, the first cell can be any cell in the first table, and this embodiment of the application does not limit it.

[0303] The third operation can be understood as the operation that makes the first cell focus. For example, the third operation may include clicking the first cell.

[0304] S1307. In response to the third operation, display the row and column headers of the first table.

[0305] In this embodiment, the display of the row and column headers of the first table can be referred to the above. Figure 5 The row and column headers 504 in the corresponding embodiment will not be described again.

[0306] The table processing method provided in this application adds the display of table row and column headers, enabling a richer text editor with more comprehensive functions, improving the interactivity of the table, and thus enhancing the user experience.

[0307] Optional, in Figure 13 Based on the corresponding embodiments, the first interface is the interface of the first application, which includes a rich text editor developed based on a web page view. The rich text editor includes a first data structure and a second data structure. The first data structure is used to store persistent data, and the second data structure is used to store temporary data. In response to the second operation, it may further include: the rich text editor saving the first data in the first data structure and saving the second data in the second data structure. The first data includes data in the first list that matches the first data structure, and the second data includes data in the first list that matches the second data structure. In response to the third operation, it may further include: the rich text editor updating the second data structure with third data. The third data includes: the updated data in the first list that matches the second data structure. Both the second data and the third data include a first field identifier, and the first field identifier of the second data is different from the first field identifier of the third data. The first field identifier is used to indicate whether there are cells in the first list that are in an editing state. Highlighting the row and column headers of the first table may include: the rich text editor highlighting the row and column headers of the first table based on the third data.

[0308] In this application embodiment, the first application can be understood as an application that can implement table-related functions based on a rich text editor. For example, the first application may include applications such as memos and notes, but this application embodiment does not limit it.

[0309] The first data structure can be understood as the Data data in the table data model Model in the above embodiments. Persistent data can be understood as data stored in the database. For example, after exiting the first interface, this persistent data will not be deleted. The specific contents included in the first data structure can be referred to the relevant description of the Data data settings in (1.1) of the above embodiments, and will not be repeated here.

[0310] The second data structure can be understood as the Status data in the table data model Model in the above embodiments. Temporary data can be understood as data stored in the cache, which can be represented by temporary variables. When the first interface is exited, this temporary data may be cleared. The specific contents included in the second data structure can be referred to the relevant description of the Status data settings in (1.2) of the above embodiments, and will not be repeated here.

[0311] The first field identifier can be understood as the editingCell field in the Status data in the above embodiment.

[0312] The second data structure controls whether the table displays row and column headers, allowing for flexible control over the display and cancellation of the interface. This enables a more feature-rich rich text editor and enhances the interactivity of the table.

[0313] Optional, in Figure 13 Based on the corresponding embodiment, the method may further include: receiving a fourth operation to cancel a cell in the first table; and in response to the fourth operation, canceling the display of row and column headers of the first table.

[0314] In this embodiment of the application, the fourth operation can be understood as an operation in which the focus is not on any cell in the first table. For example, if the user clicks on other interface content outside the first table, the first table can lose focus, thereby canceling the operation on the cell in the first table.

[0315] When the first table loses focus, the table row and column headers can be hidden, ensuring that the user's actions match the interface display, thus improving the table's interactivity and enhancing the user experience.

[0316] Optional, in Figure 13 Based on the corresponding embodiment, in response to the fourth operation, it may further include: the rich text editor saving the fourth data in the second data structure, the fourth data including: updated data matching the second data structure in the first list, the fourth data including a first field identifier, and the first field identifier of the fourth data being different from the first field identifier of the third data; canceling the display of the row and column headers of the first table may include: the rich text editor canceling the display of the row and column headers of the first table based on the fourth data.

[0317] In this embodiment, the second data structure controls whether the table displays row and column headers, which allows for flexible control of the display and cancellation of the interface, thus improving the table's interactivity.

[0318] Optional, in Figure 13 Based on the corresponding embodiments, the first data structure is used to store one or more of the following data: the identifier id of the first list, the sub-element type of the first list being a table row, the sub-element type of the table row being a cell, the sub-element type of the cell being a paragraph, the content of the paragraph, the number of rows spanned by the cell, the number of columns spanned by the cell, or an invisible attribute; the second data structure is used to store one or more of the following data: the first field identifier, the second field identifier, the third field identifier, the fourth field identifier, the fifth field identifier, the sixth field identifier, the seventh field identifier, the eighth field identifier, the ninth field identifier, the tenth field identifier, or the eleventh field identifier; wherein, the second field identifier is used to represent the first column. The table has no selected cells. The third field indicates the size of the first list. The fourth field indicates whether the first list is fully selected. The fifth field indicates whether the first list is row-selected. The sixth field indicates whether the first list is column-selected. The seventh field indicates whether the first list is partially selected. The eighth field indicates whether there is text content in the selected area of ​​the first list. The ninth field indicates whether there are merged cells in the selected area of ​​the first list. The tenth field indicates whether there are non-merged cells in the selected area of ​​the first list. The eleventh field indicates whether cells in the first list can be merged.

[0319] In this embodiment, the first data structure and the second data structure can be referred to the relevant descriptions of the first data structure and the second data structure in the above embodiments, and will not be repeated here.

[0320] The second field identifier can be understood as the selection field in the Status data of the above embodiment. The third field identifier can be understood as the size field in the Status data of the above embodiment. The fourth field identifier can be understood as the wholeSelected field in the Status data of the above embodiment. The fifth field identifier can be understood as the rowsSelected field in the Status data of the above embodiment. The sixth field identifier can be understood as the columnsSelected field in the Status data of the above embodiment. The seventh field identifier can be understood as the partSelected field in the Status data of the above embodiment. The eighth field identifier can be understood as the textInSelection field in the Status data of the above embodiment. The ninth field identifier can be understood as the mergedCellInSelection field in the Status data of the above embodiment. The tenth field identifier can be understood as the unMergedCellInSelection field in the Status data of the above embodiment. The eleventh field identifier can be understood as the canMerge field in the Status data of the above embodiment. The specific content of each field in the second data structure can be referred to the relevant description of the Status data settings in (1.2) of the above embodiment, and will not be repeated here.

[0321] By recording the table's status in real time through data such as table attributes and field identifiers, the system can determine the table functions corresponding to the current status and display interface content that matches the data, thus providing users with more feature-rich tables.

[0322] Optional, in Figure 13 Based on the corresponding implementation, the first field of the second data is marked as empty, the first field of the third data is marked as the row and column position of the first cell, and the first field of the fourth data is marked as empty.

[0323] In this embodiment, the first field identifiers of the second and fourth data can be null, indicating that there are no cells in the current table that are in an editing state. The first field identifier of the third data can be the row and column position of the first cell. For example, in the above embodiment, editingCell has a value of [0,0], indicating that the cell corresponding to the first row and first column in the table is a cell in an editing state.

[0324] The first field identifier can record whether a cell in the table is in edit mode at all times. When a cell in the table receives focus, it can be provided with corresponding editing functions and the row and column headers can be displayed, thereby improving the user experience.

[0325] Optional, in Figure 13 Based on the corresponding implementation, the header of the row containing the first cell is highlighted, and / or the header of the column containing the first cell is highlighted.

[0326] In this embodiment, the highlighting of row and column headers can be referred to the above. Figure 5 The relevant descriptions in the corresponding embodiments will not be repeated here. Highlighting the row and column headers of the first cell allows for a more intuitive display of the selected cell, thereby providing a more user-friendly interface and improving the user experience.

[0327] Optional, in Figure 13 Based on the corresponding embodiment, the second control further includes a first button, and the display of a first table on the first interface may include: displaying the first table on the first interface in response to an operation on the first button.

[0328] In this embodiment, the first button can be understood as described above. Figure 3 The corresponding embodiment shows the "OK" button 310. Specifically, the operation of the first button and the process of displaying the first table on the first interface can be referred to the above. Figure 3 The relevant descriptions in the corresponding embodiments will not be repeated here.

[0329] Before the user triggers the confirmation button, the size of the table can be modified at will. This reduces the chance of the table size being generated incorrectly due to user error, thus improving the user experience.

[0330] Optional, in Figure 13 Based on the corresponding embodiment, the method may further include: receiving a fifth operation of selecting L1 cells in a first table, where L1 is a positive integer greater than 1; in response to the fifth operation, displaying a third control, the third control including one or more options; receiving a sixth operation for a first option in the third control; and in response to the sixth operation, merging the L1 cells into one cell.

[0331] In this embodiment of the application, the fifth operation can be understood as the operation of selecting multiple cells in the first table.

[0332] The third control can be understood as the above. Figure 6 Option box 604 in the corresponding embodiment. The first option can be understood as the option to merge cells 605.

[0333] The sixth operation may include any operation that can trigger the first option, such as clicking the first option. This application embodiment does not limit the sixth operation.

[0334] The rich text editor in this application adds the function of merging cells, making the rich text editor more feature-rich and comprehensive, improving the interactivity of the table, and thus enhancing the user experience.

[0335] Optional, in Figure 13 Based on the corresponding embodiment, in response to the fifth operation, it may further include: the rich text editor saving the fifth data in the second data structure, the fifth data including: the updated data matching the second data structure in the first list, the fifth data including a second field identifier; in response to the sixth operation, it may further include: the rich text editor saving the sixth data in the first data structure, the sixth data including: the updated data matching the first data structure in the first list, the sixth data including one or more of the following: the number of rows spanned by the cell, the number of columns spanned by the cell, and an invisible attribute.

[0336] In this embodiment, the second field identifier can refer to the relevant description of the second field identifier in the above embodiments, and will not be repeated here.

[0337] Merging cells can include merging row cells and merging column cells.

[0338] If it is a merging of column cells, the sixth data may include the number of rows the cell spans and the invisible attribute, as described in the embodiment corresponding to the merging of column cells in (2.1) above; if it is a merging of row cells, the sixth data may include the number of columns the cell spans and the invisible attribute, as described in the embodiment corresponding to the merging of row cells in (2.2) above above, and will not be repeated here.

[0339] The row span and column span attributes of a cell allow cells to span multiple rows or columns, while the invisible attribute can hide cells that do not need to be displayed, thus enabling the function of merging cells.

[0340] Optional, in Figure 13 Based on the corresponding embodiment, the second field identifier of the fifth data includes the starting row and column positions of L1 cells and the ending row and column positions of L1 cells; if at least two cells in L1 cells are in the same row, then the sixth data is set with the row number attribute and the invisible attribute, and / or, if at least two cells in L1 cells are in the same column, then the sixth data is set with the column number attribute and the invisible attribute.

[0341] In this embodiment of the application, the second field identifier can refer to the relevant description of the selection field in the embodiment corresponding to the merged cell in (2) above. For example, the starting row and column position of L1 cells can be start(row1,col1), and the ending row and column position of L1 cells can be end(row2,col2), which will not be repeated here.

[0342] If at least two cells in L1 are in the same row, it means that merging cells includes merging column cells. In this case, the sixth data setting has the attribute of the number of rows a cell spans and the attribute of being invisible. If at least two cells in L1 are in the same column, it means that merging cells includes merging row cells. In this case, the sixth data setting has the attribute of the number of columns a cell spans and the attribute of being invisible.

[0343] In this way, cell merging can be achieved by using attributes such as the number of rows a cell spans, the number of columns a cell spans, and the invisibility attribute.

[0344] Optional, in Figure 13 Based on the corresponding embodiment, merging L1 cells into one cell may include: merging L1 cells into one cell in response to a right-click operation.

[0345] In this embodiment of the application, before the user clicks the right mouse button, the user can arbitrarily select from one or more options included in the third control. This can reduce the situation where the user performs actions that are inconsistent with the user's intention due to accidental operation, and improve the user experience.

[0346] Optional, in Figure 13 Based on the corresponding embodiment, the method may further include: receiving a seventh operation of selecting L2 cells in a first table, where L2 is a positive integer greater than or equal to 1; in response to the seventh operation, displaying a fourth control, the fourth control including one or more options, the L2 cells including merged cells; receiving an eighth operation for a second option in the fourth control; in response to the eighth operation, unmerging the L2 cells into L3 cells, where L3 is a positive integer greater than L2.

[0347] In this embodiment of the application, the seventh operation can be understood as the operation of selecting one or more cells in the first table.

[0348] The fourth control can be understood as described above. Figure 7 The corresponding option box 704 in the embodiment. The second option can be understood as the option to cancel merging cells 705.

[0349] Merged cells can be understood as cells that have already undergone a merge operation, or cells that can be unmerged.

[0350] The eighth operation may include any operation that can trigger the second option, such as clicking the second option. This application embodiment does not limit the eighth operation.

[0351] The rich text editor in this application adds the function of unmerging cells, making the rich text editor more feature-rich and comprehensive, improving the interactivity of the table, and thus enhancing the user experience.

[0352] Optional, in Figure 13 Based on the corresponding embodiment, in response to the seventh operation, it may further include: the rich text editor saving the seventh data in the second data structure, the seventh data including: the data updated in the first list that matches the second data structure, the seventh data including a second field identifier, the second field identifier including the starting row and column positions of L2 cells and the ending row and column positions of L2 cells; in response to the eighth operation, it may further include: the rich text editor saving the eighth data in the first data structure, the eighth data not including one or more of the following: the number of rows spanned by the cell, the number of columns spanned by the cell, and the invisible attribute.

[0353] In this embodiment, the second field identifier can refer to the relevant description of the second field identifier in the above embodiments, and will not be repeated here.

[0354] The cell does not include the row number attribute, column number attribute, and / or invisible attribute. This ensures that the unmerged cell no longer spans multiple rows or columns, and that each cell is visible.

[0355] Optional, in Figure 13 Based on the corresponding embodiment, unmerging L2 cells into L3 cells may include: responding to a right-click operation to unmerge L2 cells into L3 cells.

[0356] In this embodiment of the application, before the user clicks the right mouse button, the user can arbitrarily select from one or more options included in the fourth control. This can reduce the situation where the user performs actions that are inconsistent with the user's intention due to accidental operation, and improve the user experience.

[0357] Optional, in Figure 13 Based on the corresponding embodiment, the first interface is a note interface, which includes one or more of the following areas: a first area, a second area, a third area, and a fourth area. The third area includes a first control, and the fourth area includes a first table. The first area is used to display a file list, the second area is used to display a note list, the third area includes one or more editing icons, each editing icon corresponds to one or more editing tasks, the rich text content includes the first table, and the fourth area is used to display rich text content.

[0358] In this embodiment of the application, the rich text editor developed based on WebView can support functions such as displaying table row and column headers, merging cells, and unmerging cells, making the rich text editor more comprehensive and feature-rich.

[0359] Optional, in Figure 13 Based on the corresponding embodiments, the method may further include: in response to the operation of exiting the first interface, the rich text editor saves the data in the first data structure corresponding to the first table; in response to the operation of reopening the first interface, the rich text editor displays the first table based on the data in the first data structure corresponding to the first table.

[0360] In this embodiment, the rich text editor can provide a history function. This history can record operations performed in the rich text editor and save relevant data from the first table. This provides users with undo and redo functions, and allows the editor to load previously edited rich text content when the first table is reopened, thus improving the user experience.

[0361] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation portals are provided for users to choose to authorize or refuse.

[0362] The foregoing primarily describes the solutions provided by the embodiments of this application from a methodological perspective. To achieve the aforementioned functions, it includes corresponding hardware structures and / or software modules for executing each function. Those skilled in the art should readily recognize that, based on the method steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0363] This application embodiment can divide the apparatus for implementing the method into functional modules based on the above method examples. For example, each function can be divided into its own functional modules, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application embodiment is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.

[0364] like Figure 14 The diagram shows a chip structure according to an embodiment of this application. The chip 1400 includes one or more processors 1401, communication lines 1402, communication interfaces 1403, and memory 1404.

[0365] In some implementations, memory 1404 stores elements such as executable modules or data structures, or subsets thereof, or extended sets thereof.

[0366] The methods described in the embodiments of this application can be applied to, or implemented by, processor 1401. Processor 1401 may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above methods can be completed by integrated logic circuits in the hardware of processor 1401 or by instructions in software form. Processor 1401 may be a general-purpose processor (e.g., a microprocessor or conventional processor), a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gates, transistor logic devices, or discrete hardware components. Processor 1401 can implement or execute the various processing-related methods, steps, and logic block diagrams disclosed in the embodiments of this application.

[0367] The steps of the method disclosed in the embodiments of this application can be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software modules can be located in mature storage media in the art, such as random access memory, read-only memory, programmable read-only memory, or electrically erasable programmable read-only memory (EEPROM). This storage medium is located in memory 1404, and processor 1401 reads information from memory 1404 and, in conjunction with its hardware, completes the steps of the above method.

[0368] The processor 1401, memory 1404 and communication interface 1403 can communicate with each other via communication line 1402.

[0369] In the above embodiments, the instructions stored in the memory for execution by the processor can be implemented in the form of a computer program product. This computer program product can be pre-written into the memory, or it can be downloaded and installed into the memory as software.

[0370] This application also provides a computer program product comprising one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the flow or function according to the embodiments of this application is generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions may be transmitted from a website site, computer, server, or data center to another website site, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a server or data center that integrates one or more available media. For example, available media may include magnetic media (e.g., floppy disk, hard disk, or magnetic tape), optical media (e.g., digital versatile disc (DVD)), or semiconductor media (e.g., solid-state disk (SSD)).

[0371] This application also provides a computer-readable storage medium. The methods described in the above embodiments can be implemented, in whole or in part, by software, hardware, firmware, or any combination thereof. The computer-readable medium may include computer storage media and communication media, and may also include any medium capable of transferring a computer program from one place to another. The storage medium can be any target medium accessible by a computer.

[0372] As one possible design, computer-readable media may include compact disc read-only memory (CD-ROM), RAM, ROM, EEPROM, or other optical disc storage; computer-readable media may also include disk storage or other disk storage devices. Furthermore, any connecting cable may also be appropriately referred to as computer-readable media. 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 media. As used herein, disks and optical discs include optical discs (CD), laser discs, optical discs, digital versatile discs (DVD), floppy disks, and Blu-ray discs, where disks typically reproduce data magnetically, while optical discs optically reproduce data using lasers.

[0373] This application describes embodiments with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. 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 data processing apparatus to produce a machine, such that the instructions, which execute via the processing unit of the computer or other programmable data processing apparatus, 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.

Claims

1. A table processing method, characterized in that, The method includes: The first interface is displayed, and the first interface includes a first control; the first interface is the interface of a first application, and the first application includes a rich text editor; the rich text editor includes a second data structure, and the second data structure is used to store temporary data. Received a first operation targeting the first control; In response to the first operation, a second control is displayed, the second control including: one or more pre-selected cells, and / or, a text input box; The system receives a second operation: selecting N rows and M columns in one or more pre-selected cells, or entering N rows and M columns in the text input box. In response to the second operation, a first table is displayed on the first interface, the first table comprising N rows and M columns; Received a third operation targeting the first cell in the first table; In response to the third operation, the row and column headers of the first table are displayed; The response following the third operation also includes: The rich text editor updates the second data structure with third data; the third data includes a first field identifier, which is used to indicate whether there are cells in the first list that are in an editing state; The method further includes: The fourth operation targeting a cell in the first table has been cancelled. In response to the fourth operation, the rich text editor saves fourth data in the second data structure, the fourth data including: data that matches the second data structure after being updated in the first list, the fourth data including the first field identifier, and the first field identifier of the fourth data being different from the first field identifier of the third data; The rich text editor cancels the display of the row and column headers of the first table based on the fourth data.

2. The method according to claim 1, characterized in that, The rich text editor is developed based on a webpage view. The rich text editor includes a first data structure for storing persistent data. The response to the second operation further includes: The rich text editor stores first data in the first data structure and second data in the second data structure. The first data includes data in the first list that matches the first data structure, and the second data includes data in the first list that matches the second data structure. The third data further includes: updated data in the first list that matches the second data structure, wherein the second data includes a first field identifier, and the first field identifier of the second data is different from the first field identifier of the third data; The display of the row and column headers of the first table includes: The rich text editor displays the row and column headers of the first table based on the third data display.

3. The method according to claim 2, characterized in that, The first data structure is used to store one or more of the following data: the identifier id of the first list, the sub-element type of the first list is a table row, the sub-element type of the table row is a cell, the sub-element type of the cell is a paragraph, the content of the paragraph, the number of rows spanned by the cell, the number of columns spanned by the cell, or the invisible attribute; The second data structure is used to store one or more of the following data: the first field identifier, the second field identifier, the third field identifier, the fourth field identifier, the fifth field identifier, the sixth field identifier, the seventh field identifier, the eighth field identifier, the ninth field identifier, the tenth field identifier, or the eleventh field identifier; Wherein, the second field identifier is used to indicate whether there are selected cells in the first list, the third field identifier is used to indicate the size of the first list, the fourth field identifier is used to indicate whether the first list is in a selected-all state, the fifth field identifier is used to indicate whether the first list is in a row selected state, the sixth field identifier is used to indicate whether the first list is in a column selected state, the seventh field identifier is used to indicate whether the first list is in a partially selected state, the eighth field identifier is used to indicate whether there is text content in the selected area of ​​the first list, the ninth field identifier is used to indicate whether there are merged cells in the selected area of ​​the first list, the tenth field identifier is used to indicate whether there are non-merged cells in the selected area of ​​the first list, and the eleventh field identifier is used to indicate whether the first list can merge cells.

4. The method according to any one of claims 1-3, characterized in that, The first field identifier of the second data is empty, the first field identifier of the third data is the row and column position of the first cell, and the first field identifier of the fourth data is empty.

5. The method according to any one of claims 1-3, characterized in that, The header of the row containing the first cell is highlighted, and / or the header of the column containing the first cell is highlighted.

6. The method according to any one of claims 1-3, characterized in that, The second control also includes a first button, which displays a first table on the first interface, including: In response to an action on the first button, the first table is displayed on the first interface.

7. The method according to any one of claims 1-3, characterized in that, The method further includes: The fifth operation is received, which selects L1 cells in the first table, where L1 is a positive integer greater than 1; In response to the fifth operation, a third control is displayed, the third control including one or more options; A sixth operation was received for the first option in the third control; In response to the sixth operation, the L1 cells are merged into one cell.

8. The method according to claim 7, characterized in that, The response following the fifth operation also includes: The rich text editor stores the fifth data in the second data structure, the fifth data including: the data that matches the second data structure after being updated in the first list, the fifth data including a second field identifier; The response following the sixth operation also includes: The rich text editor stores sixth data in the first data structure. The sixth data includes: data that matches the first data structure after being updated in the first list. The sixth data includes one or more of the following: the number of rows spanned by the cell, the number of columns spanned by the cell, and the invisible attribute.

9. The method according to claim 8, characterized in that, The second field identifier of the fifth data includes the starting row and column positions of the L1 cells and the ending row and column positions of the L1 cells; If at least two cells in the L1 cells are in the same row, then the sixth data is set with the row number attribute and the invisible attribute of the cell, and / or, if at least two cells in the L1 cells are in the same column, then the sixth data is set with the column number attribute and the invisible attribute of the cell.

10. The method according to claim 7, characterized in that, Merging the L1 cells into one cell includes: In response to a right-click operation, the L1 cells are merged into a single cell.

11. The method according to claim 7, characterized in that, The method further includes: The seventh operation is received, which selects L2 cells in the first table, where L2 is a positive integer greater than or equal to 1; In response to the seventh operation, a fourth control is displayed, the fourth control including one or more options, and the L2 cells include merged cells; The eighth operation was received for the second option in the fourth control; In response to the eighth operation, the L2 cells are unmerged into L3 cells, where L3 is a positive integer greater than L2.

12. The method according to claim 11, characterized in that, The response following the seventh operation also includes: The rich text editor stores the seventh data in the second data structure. The seventh data includes: the data that matches the second data structure after being updated in the first list. The seventh data includes a second field identifier, which includes the starting row and column positions of the L2 cells and the ending row and column positions of the L2 cells. The response following the eighth operation also includes: The rich text editor stores the eighth data in the first data structure, and the eighth data does not include one or more of the following: the number of rows spanned by the cell, the number of columns spanned by the cell, and the invisible attribute.

13. The method according to any one of claims 11-12, characterized in that, Unmerging the L2 cells into L3 cells includes: In response to the right-click operation, the L2 cells are unmerged into the L3 cells.

14. The method according to any one of claims 1-3 and 8-12, characterized in that, The first interface is a note-taking interface, which includes one or more of the following areas: a first area, a second area, a third area, and a fourth area. The third area includes the first control, and the fourth area includes the first table. The first area is used to display a file list, the second area is used to display a note list, the third area includes one or more editing icons, each editing icon corresponds to one or more editing tasks, and the fourth area is used to display rich text content, which includes the first table.

15. The method according to any one of claims 2-3 and 8-12, characterized in that, The method further includes: In response to exiting the first interface, the rich text editor saves the data in the first data structure corresponding to the first table; the rich text editor includes the first data structure, which is used to store persistent data; In response to the operation of reopening the first interface, the rich text editor displays the first table based on the data in the first data structure corresponding to the first table.

16. An electronic device, characterized in that, include: Memory and processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory, causing the electronic device to perform the method as described in any one of claims 1-15.

17. A chip system, characterized in that, It includes at least one processor and a communication interface, the communication interface and the at least one processor being interconnected via a line, the at least one processor being configured to run a computer program or instructions to perform the method as described in any one of claims 1-15.

18. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions that, when executed, cause a computer to perform the method as described in any one of claims 1-15.

19. A computer program product, characterized in that, Includes a computer program that, when run, causes an electronic device to perform the method as described in any one of claims 1-15.

Images