Extension method and device for page rich text editor, storage medium, and equipment
By adding independent editing modules to rich text editors, the problem that existing rich text editors are difficult to expand to support complex functions is solved, and flexible editing and expansion of rich text content is achieved, improving document display and editing Diversity and flexibility.
Patent Information
- Application Number
- CN202111143870.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-09-28
- Publication Date
- 2025-02-18
- Estimated Expiration
- 2041-09-28
AI Technical Summary
After meeting the basic document editing functions, existing rich text editors are difficult to expand to support more complex functions such as form submission, and cannot meet users' diverse needs for document display and editing.
By adding an editable editing module to the rich text editor, editing in response to page editing instructions, exporting the edited data, and rendering the page based on these data, flexible editing and expansion of rich text content is achieved.
It realizes flexible editing and expansion of rich text content, supports more complex functional requirements, and improves the diversity and flexibility of document display and editing.
Smart Images

Figure CN113867726B_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of data processing technology, and in particular to an expansion method and apparatus, storage medium, and device for a page rich text editor. Background Art
[0002] In document services, in order to achieve richer display effects, rich text editors are used to enter documents. Rich text editors provide functions such as changing font size and color, inserting pictures, etc. However, as the needs of entrants for rich text formats increase, such as adding form submission functions to documents, existing rich text editors can no longer meet these needs. Summary of the invention
[0003] In order to solve the above technical problems, the present disclosure is proposed. The embodiments of the present disclosure provide a method and apparatus, a storage medium, and a device for extending a page rich text editor.
[0004] According to one aspect of an embodiment of the present disclosure, a method for extending a page rich text editor is provided, including:
[0005] In response to receiving a page editing instruction, adding at least one independently editable editing module in a rich text editor corresponding to the page;
[0006] Editing the at least one editing module according to the module editing instruction to obtain at least one edited editing module;
[0007] Exporting first data corresponding to the rich text editor and at least one set of second data corresponding to the at least one edited editing module;
[0008] The page is rendered based on the first data and the at least one set of second data to obtain a rendered page.
[0009] Optionally, adding at least one independently editable editing module in the rich text editor corresponding to the page includes:
[0010] Inserting at least one placeholder element corresponding to the size of the at least one editing module into the data of the rich text editor; wherein each placeholder element corresponds to an editing module;
[0011] The editing module corresponding to at least one of the placeholder elements is covered to a position corresponding to the placeholder element.
[0012] Optionally, covering the editing module corresponding to at least one of the placeholder elements to a position corresponding to the placeholder element includes:
[0013] The editing module corresponding to at least one of the placeholder elements is covered to a position corresponding to the placeholder element through absolute positioning.
[0014] Optionally, the editing in the at least one editing module according to the module editing instruction to obtain the at least one edited editing module includes:
[0015] In response to a click event on the at least one editing module being monitored, adjusting the state of the at least one editing module to an editing state, and adjusting the state of the rich text editor to a read-only state;
[0016] The at least one editing module is controlled to accept editing content according to the module editing instruction in an editing state to obtain at least one editing module after editing.
[0017] Optionally, it also includes:
[0018] In response to a focus loss event of the at least one editing module being monitored, adjusting the state of the at least one editing module to a read-only state, and adjusting the state of the rich text editor to an editing state;
[0019] The rich text editor is controlled to accept edited content according to a text editing instruction in an editing state to obtain an edited rich text editor.
[0020] Optionally, rendering the page based on the first data and the at least one set of second data to obtain a rendered page includes:
[0021] Determine at least one placeholder data corresponding to the at least one placeholder element included in the first data;
[0022] Replace the at least one placeholder data with the at least one second data to obtain replaced complete data;
[0023] The page is rendered based on the complete data to obtain a rendered page.
[0024] Optionally, it also includes:
[0025] In response to receiving a first update instruction to edit the rendered page;
[0026] Obtaining complete data corresponding to the rendered page;
[0027] Based on the complete data, a rich text editor having at least one editing module is obtained;
[0028] Performing an update process on the at least one editing module and / or the rich text editor according to a second update instruction;
[0029] Export the updated data corresponding to at least one editing module and / or rich text editor, and render the page based on the updated data to obtain an updated page.
[0030] Optionally, obtaining a rich text editor having at least one editing module based on the complete data includes:
[0031] Decomposing the complete data to obtain at least one set of second data and first data;
[0032] Input the first data into a rich text editor corresponding to the page;
[0033] Rendering the at least one set of second data in sequence to obtain at least one editing module;
[0034] Overlay the at least one editing module to a position corresponding to at least one placeholder element in the rich text editor to obtain the rich text editor having the at least one editing module.
[0035] Optionally, the decomposing the complete data to obtain at least one set of second data and first data comprises:
[0036] According to the setting parameters corresponding to the at least one editing module, identifying and extracting at least one set of second data corresponding to the at least one editing module from the complete data;
[0037] The position corresponding to the at least one set of second data in the complete data is replaced with at least one placeholder element to obtain the first data corresponding to the rich text editor.
[0038] According to another aspect of an embodiment of the present disclosure, a device for extending a page rich text editor is provided, including:
[0039] An editing extension module, configured to add at least one independently editable editing module in a rich text editor corresponding to a page in response to receiving a page editing instruction;
[0040] An instruction response module, used for editing the at least one editing module according to the module editing instruction to obtain the at least one editing module after editing;
[0041] A data export module, used for exporting first data corresponding to the rich text editor and at least one set of second data corresponding to the at least one edited editing module;
[0042] The page rendering module is used to render the page based on the first data and the at least one set of second data to obtain a rendered page.
[0043] Optionally, the editing extension module includes:
[0044] A placeholder unit, used to insert at least one placeholder element corresponding to the size of the at least one editing module into the data of the rich text editor; wherein each of the placeholder elements corresponds to an editing module;
[0045] The module covering unit is used to cover the editing module corresponding to at least one of the placeholder elements to the position corresponding to the placeholder element.
[0046] Optionally, the module covering unit is specifically used to cover the editing module corresponding to at least one of the placeholder elements to a position corresponding to the placeholder element through absolute positioning.
[0047] Optionally, the instruction response module is specifically used to adjust the state of the at least one editing module to an editing state, and adjust the state of the rich text editor to a read-only state in response to monitoring a click event on the at least one editing module; control the at least one editing module to accept editing content in the editing state according to the module editing instruction, and obtain at least one editing module after editing.
[0048] Optionally, the device provided in this embodiment further includes:
[0049] A rich text editing module is used to adjust the state of at least one editing module to a read-only state and the state of the rich text editor to an editing state in response to a focus loss event of at least one editing module being monitored; and to control the rich text editor to accept editing content according to text editing instructions in the editing state to obtain an edited rich text editor.
[0050] Optionally, the page rendering module is specifically used to determine at least one placeholder data corresponding to the at least one placeholder element included in the first data; replace the at least one placeholder data with the at least one second data to obtain the replaced complete data; and render the page based on the complete data to obtain the rendered page.
[0051] Optionally, the device provided in this embodiment further includes:
[0052] An update instruction module, configured to respond to receiving a first update instruction for editing the rendered page;
[0053] A data acquisition module, used to obtain complete data corresponding to the rendered page;
[0054] A data decomposition module, used for obtaining a rich text editor having at least one editing module based on the complete data;
[0055] An update processing module, used for performing update processing on the at least one editing module and / or the rich text editor according to a second update instruction;
[0056] The update rendering module is used to export the updated data corresponding to at least one editing module and / or rich text editor, and render the page based on the updated data to obtain an updated page.
[0057] Optionally, the data decomposition module is specifically used to decompose the complete data to obtain at least one set of second data and first data; input the first data into a rich text editor corresponding to the page; render the at least one set of second data in sequence to obtain at least one editing module; overwrite the at least one editing module to a position corresponding to at least one placeholder element in the rich text editor to obtain the rich text editor having at least one editing module.
[0058] Optionally, when the data decomposition module obtains at least one set of second data and first data based on the decomposition of the complete data, the data decomposition module is used to identify and extract at least one set of second data corresponding to the at least one editing module from the complete data according to the setting parameters corresponding to the at least one editing module; and replace the position corresponding to the at least one set of second data in the complete data with at least one placeholder element to obtain the first data corresponding to the rich text editor.
[0059] According to another aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided, wherein the storage medium stores a computer program, and the computer program is used to execute the method for extending a page rich text editor as described in any of the above embodiments.
[0060] According to another aspect of the embodiments of the present disclosure, an electronic device is provided, the electronic device comprising:
[0061] processor;
[0062] a memory for storing instructions executable by the processor;
[0063] The processor is used to read the executable instructions from the memory and execute the instructions to implement the method for extending the page rich text editor described in any of the above embodiments.
[0064] Based on the above-mentioned embodiments of the present disclosure, a method and apparatus for extending a page rich text editor, a storage medium, and a device are provided. In response to receiving a page editing instruction, at least one independently editable editing module is added to the rich text editor corresponding to the page; editing is performed in the at least one editing module according to the module editing instruction to obtain at least one edited editing module; first data corresponding to the rich text editor and at least one set of second data corresponding to the at least one edited editing module are exported; the page is rendered based on the first data and the at least one set of second data to obtain a rendered page; this embodiment achieves the effect of visually editing the internal content of the rich text by independently editing the editing module, but its editing process is not limited to the control of the rich text, and the event and content change processing is relatively flexible.
[0065] The technical solution of the present disclosure is further described in detail below through the accompanying drawings and embodiments. BRIEF DESCRIPTION OF THE DRAWINGS
[0066] The above and other purposes, features and advantages of the present disclosure will become more apparent by describing the embodiments of the present disclosure in more detail in conjunction with the accompanying drawings. The accompanying drawings are used to provide a further understanding of the embodiments of the present disclosure and constitute a part of the specification. Together with the embodiments of the present disclosure, they are used to explain the present disclosure and do not constitute a limitation of the present disclosure. In the drawings, the same reference numerals generally represent the same components or steps.
[0067] Figure 1 It is a flowchart of a method for extending a page rich text editor provided by an exemplary embodiment of the present disclosure.
[0068] Figure 2 This disclosure Figure 1 A schematic flow chart of step 102 in the embodiment shown.
[0069] Figure 3 This disclosure Figure 1 A schematic flow chart of step 104 in the illustrated embodiment.
[0070] Figure 4 This disclosure Figure 1 A schematic flow chart of step 108 in the illustrated embodiment.
[0071] Figure 5 It is a flowchart of a method for extending a page rich text editor provided by another exemplary embodiment of the present disclosure.
[0072] Figure 6 It is a structural diagram of an extension device for a page rich text editor provided by an exemplary embodiment of the present disclosure.
[0073] Figure 7is a structural diagram of an electronic device provided by an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION
[0074] Below, the exemplary embodiments according to the present disclosure will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all the embodiments of the present disclosure, and it should be understood that the present disclosure is not limited to the exemplary embodiments described here.
[0075] It should be noted that the relative arrangement of components and steps, the numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present disclosure unless specifically stated otherwise.
[0076] Those skilled in the art can understand that the terms "first" and "second" in the embodiments of the present disclosure are only used to distinguish different steps, devices or modules, etc., and neither represent any specific technical meaning nor indicate the necessary logical order between them.
[0077] It should also be understood that in the embodiments of the present disclosure, “plurality” may refer to two or more than two, and “at least one” may refer to one, two, or more than two.
[0078] It should also be understood that any component, data or structure mentioned in the embodiments of the present disclosure can generally be understood as one or more, unless explicitly limited or otherwise indicated in the context.
[0079] In addition, the term "and / or" in this disclosure is only a description of the association relationship of associated objects, indicating that there may be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this disclosure generally indicates that the previous and next associated objects are in an "or" relationship. The data referred to in this disclosure may include unstructured data such as text, images, and videos, and may also be structured data.
[0080] It should also be understood that the description of the various embodiments in the present disclosure focuses on the differences between the various embodiments, and the same or similar aspects thereof can be referenced to each other, and for the sake of brevity, they will not be described one by one.
[0081] At the same time, it should be understood that for the convenience of description, the sizes of the various parts shown in the drawings are not drawn according to the actual proportional relationship.
[0082] The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the present disclosure, its application, or uses.
[0083] Technologies, methods, and equipment known to ordinary technicians in the relevant art may not be discussed in detail, but where appropriate, the technologies, methods, and equipment should be considered as part of the specification.
[0084] It should be noted that like reference numerals and letters refer to similar items in the following figures, and therefore, once an item is defined in one figure, it need not be further discussed in subsequent figures.
[0085] The disclosed embodiments can be applied to electronic devices such as terminal devices, computer systems, servers, etc., which can operate with many other general or special computing system environments or configurations. Examples of well-known terminal devices, computing systems, environments and / or configurations suitable for use with electronic devices such as terminal devices, computer systems, servers, etc. include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, small computer systems, large computer systems, and distributed cloud computing technology environments including any of the above systems, etc.
[0086] Electronic devices such as terminal devices, computer systems, servers, etc. can be described in the general context of computer system executable instructions (such as program modules) executed by computer systems. Generally, program modules can include routines, programs, object programs, components, logic, data structures, etc., which perform specific tasks or implement specific abstract data types. Computer systems / servers can be implemented in a distributed cloud computing environment, where tasks are performed by remote processing devices linked through a communication network. In a distributed cloud computing environment, program modules can be located on local or remote computing system storage media including storage devices.
[0087] Exemplary Methods
[0088] Figure 1 1 is a flow chart of a method for extending a page rich text editor provided by an exemplary embodiment of the present disclosure. This embodiment can be applied to electronic devices, such as Figure 1 As shown, the following steps are included:
[0089] Step 102, in response to receiving a page editing instruction, adding at least one independently editable editing module in a rich text editor corresponding to the page.
[0090] The editing module is independent of the rich text editor and is displayed inside the rich text editor, but its operation is not subject to the logic control of the rich text editor.
[0091] Step 104: Editing is performed in at least one editing module according to the module editing instruction to obtain at least one edited editing module.
[0092] In one embodiment, at least one editing module can be edited individually according to the module editing instructions. The editing process may include adding, modifying, deleting data or formatting of the editing module; and during the editing of the editing module, the rich text editor is completely unaffected; the data in the rich text editor can also be edited individually, and all editing modules are also unaffected.
[0093] Step 106: export first data corresponding to the rich text editor and at least one set of second data corresponding to at least one edited editing module.
[0094] Optionally, both the first data and the second data may be hypertext markup language (html) texts.
[0095] Step 108: Render the page based on the first data and at least one set of second data to obtain a rendered page.
[0096] In this embodiment, the page is rendered based on the first data and at least one set of second data, and the obtained rendered page includes not only the content in the rich text editor, but also the edited content in the editing module.
[0097] Based on a method for extending a page rich text editor provided by the above-mentioned embodiment of the present disclosure, in response to receiving a page editing instruction, at least one independently editable editing module is added to the rich text editor corresponding to the page; editing is performed in at least one editing module according to the module editing instruction to obtain at least one edited editing module; first data corresponding to the rich text editor and at least one set of second data corresponding to at least one edited editing module are exported; the page is rendered based on the first data and at least one set of second data to obtain a rendered page; this embodiment achieves the effect of visually editing the internal content of the rich text by independently editing the editing module, but its editing process is not limited to the control of the rich text, and the event and content change processing is relatively flexible; it is achieved that a new rich text plug-in can be developed without having to understand the current editor implementation.
[0098] like Figure 2 As shown in the above Figure 1 Based on the illustrated embodiment, step 102 may include the following steps:
[0099] Step 1021: insert at least one placeholder element corresponding to the size of at least one editing module into the data of the rich text editor.
[0100] Among them, each placeholder element corresponds to an editing module.
[0101] Optionally, an operation button is added to the toolbar of the rich text editor, and the insertion of the editing module into the article is triggered by clicking the button; after clicking the operation button, at least one non-editable placeholder element is first inserted into the rich text editor, and the size of each placeholder element is the same as the size of an editing module; optionally, the placeholder element can use a simple div tag to occupy the place.
[0102] Step 1022: Overwrite the editing module corresponding to at least one placeholder element to the position corresponding to the placeholder element.
[0103] In this embodiment, a simple placeholder element is used to expand the rich text editor to a space of at least the size of an editing module, and at the same time an editing module element is inserted outside the rich text editor. The editing module element is covered above the placeholder element through the position and length and width of the placeholder element, so that the editing module is visually located in the rich text editor.
[0104] Optionally, step 1022 in the above embodiment may include:
[0105] By absolute positioning, the editing module corresponding to at least one placeholder element is covered to the position corresponding to the placeholder element.
[0106] In this embodiment, the absolute positioning (absolute) in the positioning method corresponding to the style file (CSS file) is used to implement covering the editing module to the position corresponding to the placeholder element, wherein absolute positioning means that the element is separated from the document flow and is directly positioned relative to the nearest positioned ancestor element; by adopting absolute positioning, the effect of visually presenting that the editing module is located in the rich text editor is achieved, and the placeholder element is completely covered.
[0107] like Figure 3 As shown in the above Figure 1 Based on the illustrated embodiment, step 104 may include the following steps:
[0108] Step 1041: in response to a click event on at least one editing module being monitored, adjusting the state of at least one editing module to an editing state, and adjusting the state of the rich text editor to a read-only state.
[0109] Optionally, the click event may be an onClick event.
[0110] Step 1042, controlling at least one editing module in an editing state to accept editing content according to a module editing instruction to obtain at least one editing module after editing.
[0111] In this embodiment, the onClick event of the editing module is monitored, and when the editing module is clicked, the rich text editor is set to a read-only state, that is, the events in the rich text editing area are no longer processed, and the editing module is set to an editing state, and the cursor is set to the editing module at the same time. At this time, the editing content is only received through the editing module, and editing operations are performed in the editing module. The degree of support for all operations depends on the functional implementation of the editing module itself, and is not subject to the constraints and restrictions of the rich text editor. Independent editing of the editing module is achieved, the editing process is not affected by the rich text editor, and the content processing of the editing module is more flexible.
[0112] In some optional embodiments, the method provided in this embodiment may further include:
[0113] In response to a focus loss event of at least one editing module being monitored, adjusting the state of at least one editing module to a read-only state, and adjusting the state of the rich text editor to an editing state;
[0114] The rich text editor is controlled to accept the edited content according to the text editing instruction in the editing state to obtain the edited rich text editor.
[0115] In this embodiment, through monitoring, when the loss of focus event (onBlur event) of the editing module is monitored, that is, when the non-editing module area is clicked, the editing module is set to a read-only state, and the rich text editor is set to an editing state, and the data in the editing module is saved for subsequent export. At this time, since the editing module is not processed, the event changes of the editing module are no longer monitored, and the cursor is set to the rich text editor. At this time, the operation can continue in the rich text editor; this embodiment realizes flexible editing switching by monitoring events, that is, editing can be performed in the editing module, and editing can also be performed in the rich text editor, and the two are mutually exclusive, that is, editing can only be performed in one editing module or rich text editor at the same time.
[0116] like Figure 4 As shown in the above Figure 1 Based on the illustrated embodiment, step 108 may include the following steps:
[0117] Step 1081: Determine at least one placeholder data corresponding to at least one placeholder element included in the first data.
[0118] In this embodiment, since at least one placeholder element is added to the rich text editor before editing, and the editing module and the rich text editor are independent of each other, the first data only includes placeholder data corresponding to the added placeholder element.
[0119] Step 1082: Replace at least one placeholder data with at least one set of second data to obtain replaced complete data.
[0120] Optionally, the first data and the second data may be hypertext markup language (html) texts, which are markup languages that include a series of tags, through which the document formats on the network can be unified, so that scattered Internet resources can be connected into a logical whole. HTML text is a descriptive text composed of HTML commands, which can describe text, graphics, animations, sounds, tables, links, etc.
[0121] Step 1083, rendering the page based on the complete data to obtain a rendered page.
[0122] In this embodiment, in order to achieve the effect of editing the rendered page, it is necessary to insert the content edited by at least one editing module into the rich text editor. In this embodiment, the second data corresponding to at least one editing module is replaced with its corresponding placeholder data, so that the obtained complete data is equivalent to the complete effect of all editing in the rich text editor, and then the page rendered based on the complete data realizes the display of all editing processing results. The corresponding html code will be stored when the data is saved, so when saving, the placeholder div needs to be replaced with the html code of the editing module to ensure that the document is in a non-editing state and the effect of direct rendering using html code is consistent with that of the editing state.
[0123] Figure 5 FIG. 1 is a flow chart of a method for extending a rich text editor for a page provided by another exemplary embodiment of the present disclosure. This embodiment can be applied to electronic devices, such as Figure 5 As shown, the following steps are included:
[0124] Step 502: In response to receiving a page editing instruction, at least one independently editable editing module is added to a rich text editor corresponding to the page.
[0125] The technical implementation and technical effect of this step in this embodiment can be referred to Figure 1 Step 102 in the provided embodiment will not be described in detail here.
[0126] Step 504: Edit in at least one editing module according to the module editing instruction to obtain at least one editing module after editing.
[0127] The technical implementation and technical effect of this step in this embodiment can be referred to Figure 1 Step 104 in the provided embodiment will not be described in detail here.
[0128] Step 506: Export the first data corresponding to the rich text editor and at least one set of second data corresponding to at least one edited editing module.
[0129] The technical implementation and technical effect of this step in this embodiment can be referred to Figure 1 Step 106 in the provided embodiment will not be described in detail here.
[0130] Step 508: Render the page based on the first data and at least one set of second data to obtain a rendered page.
[0131] The technical implementation and technical effect of this step in this embodiment can be referred to Figure 1 Step 108 in the provided embodiment will not be described in detail here.
[0132] Step 510, responding to receiving a first update instruction to edit the rendered page.
[0133] After completing the rendering of the page, this embodiment has completed the rendering process of a complete page. On this basis, if it is necessary to update the rendered page (modify, delete, add, etc.), a first update instruction will be received and complete data will be obtained according to the first update instruction.
[0134] Step 512, obtaining complete data corresponding to the rendered page.
[0135] For a page that needs to be updated, first obtain complete data corresponding to the page, where the data includes first data corresponding to the rich text editor and second data corresponding to at least one editing module.
[0136] Step 514, based on the complete data, obtain a rich text editor having at least one editing module.
[0137] Optionally, the rich text editor and at least one editing module may be separated from the complete data by decomposition, so as to achieve independent editing between the rich text editor and the editing module during the update editing process.
[0138] Step 516: Update at least one editing module and / or rich text editor according to the second update instruction.
[0139] After achieving a relatively independent rich text editor and at least one editing module, when performing an update operation, at least one editing module can be processed separately, or the rich text editor can be processed independently, or at least one editing module and the rich text editor can be processed separately through event switching. The specific update processing process can refer to the editing process based on event monitoring in the above embodiment; according to the second update instruction, specific update operations (modification, deletion, addition, etc.) are performed on the rendered page.
[0140] Step 518: export the updated data corresponding to at least one editing module and / or rich text editor, and render the page based on the updated data to obtain an updated page.
[0141] The rendering process of this step may refer to the rendering process in steps 106 and 108 in the above embodiment, and will not be described in detail here.
[0142] When an update operation is required on a page, this embodiment realizes more flexible page content modification by re-decomposing the complete data corresponding to the page and regenerating a rich text editor and at least one editing module.
[0143] Optionally, step 514 in the above embodiment may include:
[0144] Decomposing the complete data to obtain at least one set of second data and first data;
[0145] Enter the first data into the rich text editor corresponding to the page;
[0146] Rendering at least one set of second data in sequence to obtain at least one editing module;
[0147] At least one editing module is overlaid on a position corresponding to at least one placeholder element in the rich text editor to obtain a rich text editor having at least one editing module.
[0148] In this embodiment, when updating and editing an existing page, it is necessary to identify the code (second data) fragment corresponding to the editing module in the HTML code. The specific identification process can be based on setting parameter identification at the code position corresponding to each editing module when storing complete data. When it is necessary to identify each second data, the position of each second data can be determined by identifying these setting parameters, and then decomposing to obtain at least one second data; then replace the original second data location back to the placeholder element, and at the same time overlay the editable editing module on the upper layer, so that the content can be updated in at least one editing module overlaid on the rich text editor.
[0149] Optionally, obtaining at least one set of second data and first data based on the complete data decomposition includes:
[0150] According to the setting parameters corresponding to the at least one editing module, identifying and extracting at least one set of second data corresponding to the at least one editing module from the complete data;
[0151] A position corresponding to at least one set of second data in the complete data is replaced with at least one placeholder element to obtain first data corresponding to the rich text editor.
[0152] In this embodiment, in order to identify at least one group of second data in the complete data, when the second data is combined with the first data, a setting parameter can be added to each group of second data for identifying the position of each editing module; and, in order to realize that at least one editing module can be covered in the obtained rich text editor, after extracting at least one group of second data in the complete data, the corresponding position is replaced with a corresponding placeholder element, so that the rich text editor generated based on the replaced first data still has a reserved position that can be covered by at least one editing module, thereby realizing content updating separately in the editing module as in the above embodiment, and realizing that the page content can be updated through the editing module without understanding the current editor implementation.
[0153] Any method for extending a page rich text editor provided in the embodiments of the present disclosure may be executed by any appropriate device with data processing capabilities, including but not limited to: a terminal device and a server, etc. Alternatively, any method for extending a page rich text editor provided in the embodiments of the present disclosure may be executed by a processor, such as the processor executing any method for extending a page rich text editor mentioned in the embodiments of the present disclosure by calling corresponding instructions stored in a memory. This will not be described in detail below.
[0154] Exemplary Devices
[0155] Figure 6 FIG. 1 is a schematic diagram of a structure of an extension device for a page rich text editor provided by an exemplary embodiment of the present disclosure. Figure 6 As shown, the device provided in this embodiment includes:
[0156] The editing extension module 61 is used to add at least one independently editable editing module in the rich text editor corresponding to the page in response to receiving a page editing instruction.
[0157] The instruction response module 62 is used to perform editing in at least one editing module according to the module editing instruction to obtain at least one editing module after editing.
[0158] The data export module 63 is used to export first data corresponding to the rich text editor and at least one set of second data corresponding to at least one edited editing module.
[0159] The page rendering module 64 is used to render the page based on the first data and at least one set of second data to obtain a rendered page.
[0160] Based on an extension device of a page rich text editor provided by the above-mentioned embodiment of the present disclosure, in response to receiving a page editing instruction, at least one independently editable editing module is added to the rich text editor corresponding to the page; editing is performed in at least one editing module according to the module editing instruction to obtain at least one edited editing module; first data corresponding to the rich text editor and at least one set of second data corresponding to at least one edited editing module are exported; the page is rendered based on the first data and at least one set of second data to obtain a rendered page; this embodiment achieves the effect of visually editing the internal content of the rich text by independently editing the editing module, but its editing process is not limited to the control of the rich text, and the event and content change processing is relatively flexible; it is achieved that a new rich text plug-in can be developed without having to understand the current editor implementation.
[0161] Optionally, edit the extension module, including:
[0162] A placeholder unit, used to insert at least one placeholder element corresponding to the size of at least one editing module into the data of the rich text editor; wherein each placeholder element corresponds to one editing module;
[0163] The module covering unit is used to cover the editing module corresponding to at least one placeholder element to the position corresponding to the placeholder element.
[0164] Optionally, the module covering unit is specifically used to cover the editing module corresponding to at least one placeholder element to a position corresponding to the placeholder element through absolute positioning.
[0165] Optionally, the instruction response module is specifically used to adjust the state of at least one editing module to an editing state and the state of the rich text editor to a read-only state in response to a click event on at least one editing module obtained through monitoring; control at least one editing module to accept editing content in the editing state according to the module editing instruction, and obtain at least one editing module after editing.
[0166] Optionally, the device provided in this embodiment further includes:
[0167] A rich text editing module is used to adjust the state of at least one editing module to a read-only state and the state of a rich text editor to an editing state in response to a focus loss event of at least one editing module obtained by monitoring; and to control the rich text editor to accept editing content according to text editing instructions in the editing state to obtain an edited rich text editor.
[0168] Optionally, the page rendering module is specifically used to determine at least one placeholder data corresponding to at least one placeholder element included in the first data; replace at least one placeholder data with at least one second data to obtain complete data after replacement; and render the page based on the complete data to obtain a rendered page.
[0169] Optionally, the device provided in this embodiment further includes:
[0170] An update instruction module, configured to respond to receiving a first update instruction to edit the rendered page;
[0171] Data acquisition module, used to obtain the complete data corresponding to the rendered page;
[0172] A data decomposition module, used for obtaining a rich text editor having at least one editing module based on the complete data;
[0173] An update processing module, used to perform update processing on at least one editing module and / or rich text editor according to a second update instruction;
[0174] The update rendering module is used to export the updated data corresponding to at least one editing module and / or rich text editor, and render the page based on the updated data to obtain an updated page.
[0175] Optionally, a data decomposition module is specifically used to decompose the complete data to obtain at least one set of second data and first data; input the first data into a rich text editor corresponding to the page; render at least one set of second data in sequence to obtain at least one editing module; overwrite at least one editing module to a position corresponding to at least one placeholder element in the rich text editor to obtain a rich text editor with at least one editing module.
[0176] Optionally, when the data decomposition module obtains at least one set of second data and first data based on the decomposition of the complete data, the data decomposition module is used to identify and extract at least one set of second data corresponding to at least one editing module from the complete data according to the set parameters corresponding to at least one editing module; and replace the position corresponding to the at least one set of second data in the complete data with at least one placeholder element to obtain the first data corresponding to the rich text editor.
[0177] Exemplary Electronic Devices
[0178] Below, reference Figure 7 The electronic device according to the embodiment of the present disclosure is described. The electronic device may be any one or both of the first device 100 and the second device 200, or a stand-alone device independent of them, and the stand-alone device may communicate with the first device and the second device to receive the collected input signals from them.
[0179] Figure 7 A block diagram of an electronic device according to an embodiment of the present disclosure is illustrated.
[0180] like Figure 7 As shown, the electronic device 70 includes one or more processors 71 and a memory 72 .
[0181] The processor 71 may be a central processing unit (CPU) or other forms of processing units having data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device 70 to perform desired functions.
[0182] The memory 72 may include one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory (cache), etc. The non-volatile memory may include, for example, a read-only memory (ROM), a hard disk, a flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium, and the processor 71 may run the program instructions to implement the expansion method of the page rich text editor of each embodiment of the present disclosure described above and / or other desired functions. Various contents such as input signals, signal components, noise components, etc. may also be stored in the computer-readable storage medium.
[0183] In one example, the electronic device 70 may further include: an input device 73 and an output device 74, and these components are interconnected via a bus system and / or other forms of connection mechanisms (not shown).
[0184] For example, when the electronic device is the first device 100 or the second device 200, the input device 73 may be the microphone or microphone array described above, for capturing input signals from a sound source. When the electronic device is a stand-alone device, the input device 73 may be a communication network connector, for receiving collected input signals from the first device 100 and the second device 200.
[0185] In addition, the input device 73 may also include, for example, a keyboard, a mouse, and the like.
[0186] The output device 74 can output various information to the outside, including the determined distance information, direction information, etc. The output device 74 can include, for example, a display, a speaker, a printer, a communication network and a remote output device connected thereto, and the like.
[0187] Of course, to simplify, Figure 7Only some of the components related to the present disclosure in the electronic device 70 are shown, and components such as a bus, an input / output interface, etc. are omitted. In addition, according to specific application situations, the electronic device 70 may also include any other appropriate components.
[0188] Exemplary computer program products and computer-readable storage media
[0189] In addition to the above-mentioned methods and devices, an embodiment of the present disclosure may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps in the method for extending the page rich text editor according to various embodiments of the present disclosure described in the above-mentioned "Exemplary Method" section of this specification.
[0190] The computer program product may be written in any combination of one or more programming languages to write program code for performing the operations of the disclosed embodiments, including object-oriented programming languages such as Java, C++, etc., and conventional procedural programming languages such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.
[0191] In addition, an embodiment of the present disclosure may also be a computer-readable storage medium having computer program instructions stored thereon, which, when executed by a processor, cause the processor to execute the steps of the method for extending a page rich text editor according to various embodiments of the present disclosure described in the above “Exemplary Method” section of this specification.
[0192] The computer readable storage medium can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can include, for example, but is not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.
[0193] The basic principles of the present disclosure are described above in conjunction with specific embodiments. However, it should be noted that the advantages, strengths, effects, etc. mentioned in the present disclosure are only examples and not limitations, and it cannot be considered that these advantages, strengths, effects, etc. are required by each embodiment of the present disclosure. In addition, the specific details disclosed above are only for the purpose of illustration and ease of understanding, and are not limitations. The above details do not limit the present disclosure to the necessity of adopting the above specific details to be implemented.
[0194] Each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.
[0195] The block diagrams of the devices, apparatuses, equipment, and systems involved in this disclosure are only illustrative examples and are not intended to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagrams. As will be appreciated by those skilled in the art, these devices, apparatuses, equipment, and systems can be connected, arranged, and configured in any manner. Words such as "including," "comprising," "having," and the like are open words, referring to "including but not limited to," and can be used interchangeably therewith. The words "or" and "and" used herein refer to the words "and / or," and can be used interchangeably therewith, unless the context clearly indicates otherwise. The word "such as" used herein refers to the phrase "such as but not limited to," and can be used interchangeably therewith.
[0196] The method and apparatus of the present disclosure may be implemented in many ways. For example, the method and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above order of steps for the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above, unless otherwise specifically stated. In addition, in some embodiments, the present disclosure may also be implemented as a program recorded in a recording medium, which includes machine-readable instructions for implementing the method according to the present disclosure. Therefore, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.
[0197] It should also be noted that in the apparatus, device and method of the present disclosure, each component or each step can be decomposed and / or recombined. Such decomposition and / or recombination should be regarded as equivalent solutions of the present disclosure.
[0198] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other aspects without departing from the scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the aspects shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.
[0199] The above description has been given for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although multiple example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof.
Claims
1. A method for extending a page rich text editor, characterized in that: include: In response to receiving a page editing instruction, adding at least one independently editable editing module in a rich text editor corresponding to the page; Inserting an editing module element outside the rich text editor, and covering the editing module element above the placeholder element in the rich text editor; Editing the at least one editing module according to the module editing instruction to obtain at least one edited editing module; Exporting first data corresponding to the rich text editor and at least one set of second data corresponding to the at least one edited editing module; Rendering a page based on the first data and the at least one set of second data to obtain a rendered page; The editing in the at least one editing module according to the module editing instruction to obtain the at least one editing module after editing comprises: In response to a click event on the at least one editing module obtained through monitoring, the state of the at least one editing module is adjusted to an editing state, and the state of the rich text editor is adjusted to a read-only state; the at least one editing module is controlled to accept editing content according to the module editing instruction in the editing state, and the at least one editing module after editing is obtained; The step of adding at least one independently editable editing module to the rich text editor corresponding to the page includes: Inserting at least one placeholder element corresponding to the size of the at least one editing module into the data of the rich text editor; wherein each of the placeholder elements corresponds to an editing module; and covering the editing module corresponding to at least one of the placeholder elements to the position corresponding to the placeholder element; The rendering of the page based on the first data and the at least one set of second data to obtain a rendered page includes: Determine at least one placeholder data corresponding to at least one placeholder element included in the first data; replace the at least one placeholder data with the at least one second data to obtain replaced complete data; render the page based on the complete data to obtain a rendered page.
2. The method according to claim 1, characterized in that The step of covering the editing module corresponding to at least one of the placeholder elements to a position corresponding to the placeholder element includes: The editing module corresponding to at least one of the placeholder elements is covered to a position corresponding to the placeholder element through absolute positioning.
3. The method according to any one of claims 1-2, characterized in that: Also includes: In response to a focus loss event of the at least one editing module being monitored, adjusting the state of the at least one editing module to a read-only state, and adjusting the state of the rich text editor to an editing state; The rich text editor is controlled to accept edited content according to a text editing instruction in an editing state to obtain an edited rich text editor.
4. The method according to any one of claims 1-2, characterized in that: Also includes: In response to receiving a first update instruction to edit the rendered page; Obtaining complete data corresponding to the rendered page; Based on the complete data, a rich text editor having at least one editing module is obtained; Performing an update process on the at least one editing module and / or the rich text editor according to a second update instruction; Export the updated data corresponding to at least one editing module and / or rich text editor, and render the page based on the updated data to obtain an updated page.
5. The method according to claim 4, characterized in that The method of obtaining a rich text editor having at least one editing module based on the complete data comprises: Decomposing the complete data to obtain at least one set of second data and first data; Input the first data into a rich text editor corresponding to the page; Rendering the at least one set of second data in sequence to obtain at least one editing module; Overlay the at least one editing module to a position corresponding to at least one placeholder element in the rich text editor to obtain the rich text editor having the at least one editing module.
6. The method according to claim 5, characterized in that The step of obtaining at least one set of second data and first data based on the complete data decomposition comprises: According to the setting parameters corresponding to the at least one editing module, identifying and extracting at least one set of second data corresponding to the at least one editing module from the complete data; The position corresponding to the at least one set of second data in the complete data is replaced with at least one placeholder element to obtain the first data corresponding to the rich text editor.
7. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and the computer program is used to execute the method for extending the page rich text editor described in any one of claims 1 to 6.
Citation Information
Patent Citations
Rich text rendering method and device, electronic equipment and storage medium
CN111222063A
Rich text processing method and editor, equipment and storage medium
CN111259644A