Auxiliary editing method and system based on rich text editor
By introducing auxiliary editing functions into rich text editors, users can learn library search and AIGC to generate pictures, solve the problem of inefficient text query and replacement in existing editors, and achieve an efficient and intelligent editing experience.
Patent Information
- Application Number
- CN202411778044.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-05
- Publication Date
- 2025-03-04
- Estimated Expiration
- Not applicable · inactive patent
AI Technical Summary
The existing rich text editor lacks intelligent auxiliary editing functions, resulting in inefficiency of users in text query and replacement.
Provides an auxiliary editing method and system based on a rich text editor. By responding to the user's selection of text, obtaining selected text to add tags, and displaying operation options such as 'retrieval through learning library' and 'intelligently generate pictures'. Users can select the corresponding operation options and realize text replacement or image generation through the learning library service interface or the AIGC question and answer interface.
It significantly improves the editing efficiency of users. Through intelligent text processing and image generation, users can quickly obtain relevant content or generate pictures, complete text replacement or insert pictures, enhance the editing experience.
Smart Images

Figure CN119558283A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of rich text editing, and in particular to an auxiliary editing method and system based on a rich text editor. Background Art
[0002] With the popularization of the Internet and the widespread application of multimedia information, rich text editors have become important tools for the creation and editing of various types of content. In the daily editing process, users often need to query the knowledge base associated with the keywords of the article and perform operations such as replacing text content based on the query results. However, existing rich text editors lack intelligent auxiliary editing functions, which requires users to query in query engines such as browsers through traditional methods, copy the query results to the editor for replacement, and the editing efficiency is low.
[0003] Therefore, it is particularly important to design a rich text editor technology that can assist users in performing efficient text query and replacement. Summary of the invention
[0004] The purpose of the present invention is to provide an auxiliary editing method and system based on a rich text editor to solve the problem of low editing efficiency in the prior art.
[0005] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention provides an auxiliary editing method based on a rich text editor, the method comprising: In response to the selection of text in the rich text editor, the selected text is obtained and a tag is added, and operation options are displayed, including "search through learning library" and "intelligently generate pictures"; In response to the user selecting an operation option, the corresponding auxiliary editing process is executed; when the user selects "Search through the learning library", the learning library service interface is called, the label text is used as a keyword for query, the matching field is output, and the "Replace" operation option is displayed; when the user selects "Intelligently generate pictures", the AIGC question-and-answer interface is called to generate pictures, and the "Insert" operation option is displayed; In response to the user selecting the "Replace" or "Insert" option, the label text is replaced with the field to be replaced or a picture is inserted after the label text by matching the position information of the label text with a regular expression.
[0006] As a further improvement of an embodiment of the present invention, the method further includes that obtaining the selected text and adding a label includes: Get the selected text through the window.getSelection method; Create a mark tag through document.createElement, encapsulate the obtained selected text as its child node, and set the background color of the mark tag to maintain the selection effect; When you need to select other fields, register an event listener for clicking on a non-related area to cancel the mark tag node through document.addEventListener('click', callback). In response to clicking on other areas, the selected state is canceled.
[0007] As a further improvement of an embodiment of the present invention, the method further includes: the display operation options, including "search through learning library" and "intelligently generate pictures", include: Get the size of the label text and its position relative to the viewport through the getBoundingClientRect method; Create the "Search through learning library" and "Intelligently generate pictures" button nodes through document.createElement, and use absolute positioning to insert the "Search through learning library" and "Intelligently generate pictures" button nodes below the label text.
[0008] As a further improvement of an embodiment of the present invention, the method further includes: calling the learning library service interface includes: Input the keyword searchWord, the query page number pageNum and the page size pageSize of the label text into the learning library for query, and output the paging data of the matching field list; Use regular expressions to match keywords to the title of each matching field in the matching field list, and use the matched keywords to ${searchWord} The label is highlighted; Using a regular expression to match the earliest position of the keyword in the content of each matching field in the matching field list, and intercepting the field of preset characters as a summary; In response to the user selecting a field to be replaced in the matching fields, a "Replace" button node is inserted below the field to be replaced.
[0009] As a further improvement of an embodiment of the present invention, the method further includes that calling the AIGC question-answering interface to generate a picture includes: By calling the AIGC question-answering interface, the label text is input as the question, the generated image data is returned, and button nodes of "Insert", "Download" and "Regenerate" are inserted below the image.
[0010] As a further improvement of an embodiment of the present invention, the method further includes that the step of matching the position information of the label text by a regular expression to replace the label text with the field to be replaced or inserting a picture after the label text includes: Through regular expressions <mark markkey([\\s\\s]*?)>([\\s\\S]*?)<\\ / mark> matches the label text and uses the replace method to replace the selected label text with the field to be replaced or insert an image after the label text.
[0011] As a further improvement of an embodiment of the present invention, the method further includes, when it is detected that the learning library service interface call fails, no matching item is found during the text replacement process, or the AIGC question-answer interface call fails, displaying a "retry" or "cancel" operation option; In response to the user selecting "Retry", the corresponding operation is retriggered; In response to the user selecting "Cancel", the event listener for unselecting the text is triggered and the related panel is closed.
[0012] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention further provides an auxiliary editing system based on a rich text editor, the system comprising a text selection module, an operation selection module and a content editing module; The text selection module is used to respond to the selection of text by the rich text editor, obtain the selected text to add tags, and display operation options, including "search through learning library" and "intelligently generate pictures"; The operation selection module is used to execute the corresponding auxiliary editing process in response to the user selecting the operation option; when the user selects "search through learning library", the learning library service interface is called, the label text is used as a keyword for query, the matching field is output, and the "replace" operation option is displayed; when the user selects "intelligently generate pictures", the AIGC question-and-answer interface is called to generate pictures, and the "insert" operation option is displayed; The content editing module is used for replacing the label text with the field to be replaced or inserting a picture after the label text in response to the user selecting the "Replace" or "Insert" option by matching the position information of the label text through a regular expression.
[0013] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention further provides an electronic device, comprising a memory and a processor, characterized in that the memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the auxiliary editing method based on the rich text editor as described above are implemented.
[0014] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention further provides a storage medium, wherein the storage medium stores a computer program, and wherein the computer program, when executed by a processor, implements the steps in the auxiliary editing method based on a rich text editor as described above.
[0015] Compared with the prior art, the present invention provides an auxiliary editing method and system based on a rich text editor, which significantly improves the user editing efficiency through intelligent text processing and image generation. By integrating learning library retrieval with AIGC generated images, users can quickly obtain relevant content or generate images, and complete text replacement or image insertion through simple operations, thereby enhancing the editing experience. This method not only reduces manual intervention through automated and intelligent processes, but also improves the accuracy and flexibility of content editing. It is applicable to a variety of editing scenarios and has broad application prospects. BRIEF DESCRIPTION OF THE DRAWINGS
[0016] Figure 1 It is an overall flow chart of the auxiliary editing method based on the rich text editor described in the present invention.
[0017] Figure 2 is a schematic diagram of operation options of the auxiliary editing method based on the rich text editor of the present invention; Figure 3 It is a schematic diagram of label text query in an embodiment of the auxiliary editing method based on the rich text editor described in the present invention.
[0018] Figure 4 It is a schematic diagram of a replacement field and a replacement button selected by a user in an embodiment of the auxiliary editing method based on a rich text editor of the present invention.
[0019] Figure 5 It is an image and a schematic diagram of an insert button generated by an AIGC interface in an embodiment of an auxiliary editing method based on a rich text editor described in the present invention.
[0020] Figure 6 It is a schematic diagram of inserting a generated image below a label text in an embodiment of the auxiliary editing method based on a rich text editor described in the present invention.
[0021] Figure 7 It is a schematic diagram of the architecture of the auxiliary editing system based on the rich text editor described in the present invention. DETAILED DESCRIPTION
[0022] The present invention will be described in detail below in conjunction with the specific embodiments shown in the accompanying drawings. However, these embodiments do not limit the present invention, and any structural, methodological, or functional changes made by a person skilled in the art based on these embodiments are all within the scope of protection of the present invention.
[0023] The embodiments of the present invention are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and cannot be understood as limiting the present invention.
[0024] In the first embodiment of the present invention, the present invention provides an auxiliary editing method based on a rich text editor, such as Figure 1 As shown, the method includes, S1: In response to selecting text in the rich text editor, obtaining the selected text to add a tag, and displaying operation options, including "search through learning library" and "intelligently generate pictures"; S2: In response to the user selecting an operation option, the corresponding auxiliary editing process is executed; when the user selects "Search through the learning library", the learning library service interface is called, the label text is used as a keyword for query, the matching field is output, and the "Replace" operation option is displayed; when the user selects "Intelligently generate pictures", the AIGC question-and-answer interface is called to generate pictures, and the "Insert" operation option is displayed; S3: In response to the user selecting the "Replace" or "Insert" option, the label text is replaced with the field to be replaced or a picture is inserted after the label text by matching the position information of the label text with a regular expression.
[0025] In a specific embodiment of the present invention, the selected text is obtained and a label is added, specifically, Get the selected text through the window.getSelection method; Create a mark tag through document.createElement, encapsulate the obtained selected text as its child node, and set the background color of the mark tag to maintain the selection effect; When you need to select other fields, register an event listener for clicking on a non-related area to cancel the mark tag node through document.addEventListener('click', callback). In response to clicking on other areas, the selected state is canceled.
[0026] It should be noted that the selection content is obtained through window.getSelection. Specifically, the getSelection method returns a Selection object, which represents the text range currently selected by the user. The selected text can be obtained using the selection.toString method. It should be noted that by setting the background color of the mark tag to background-color:rgb(182,215,254), the selected area can be kept selected.
[0027] It should be noted that the event listener for unmarking a node when clicking in a non-related area is registered. Use document.addEventListener('click',callback) to listen to the click event of the document, and check the click position in the callback function. If the click position is not in the mark tag and other related areas, you can use a regular expression <mark markkey([\\s\\s]*?)>([\\s\\S]*?)<\\ / mark> matches the mark tag text and replaces it with the original text content to cancel the selected state. This ensures that when the user clicks other areas, the selected state will be correctly canceled.
[0028] In a specific implementation scenario of the present invention, for the text "Shenzhen-Zhongshan Channel is a super-large cross-sea project. For Zhuhai, the opening of the Shenzhen-Zhongshan Channel has compressed the time and space distance between it and Shenzhen from a 2-hour drive to a minimum of tens of minutes, and also demonstrated a series of changes and opportunities brought about by the integrated development of the Guangdong-Hong Kong-Macao Greater Bay Area.", in order to select "Shenzhen-Zhongshan Channel is a super-large cross-sea project", the following code is used to achieve the selection: <mark markkey="searchText" style="background-color:rgb(182,215,254);"> The Shenzhen-Zhongshan Channel is a super-large cross-sea project.< / mark> ==$0 "," In a specific embodiment of the present invention, the display operation options include "search through learning library" and "intelligently generate pictures", specifically, Get the size of the label text and its position relative to the viewport through the getBoundingClientRect method; Create "Search through learning library" and "Intelligently generate pictures" button nodes through document.createElement, and use absolute positioning to insert the "Search through learning library" and "Intelligently generate pictures" button nodes below the label text.
[0029] It should be noted that getBoundingClientRect is a method used to obtain the size of an element and its position relative to the viewport. It returns a DOMRect object that contains the element's boundary information, including the element's position (top, right, bottom, left) and the element's width and height (width and height). These attributes are positioned relative to the upper left corner of the viewport (not the upper left corner of the page). The document.createElement method is used to create a new HTML element node of a specified type. This method receives a string parameter, which is the tag name of the HTML element to be created (such as div, button, span, p, etc.). The created element has not yet been inserted into the document and requires further operation.
[0030] In a specific implementation scenario of the present invention, Figure 2 As shown, after selecting the text, the buttons of "Search through learning library" and "Intelligently generate pictures" will be displayed below.
[0031] In a specific embodiment of the present invention, the learning library service interface is called, specifically, Input the keyword searchWord, the query page number pageNum and the page size pageSize of the label text into the learning library for query, and output the paging data of the matching field list; Use regular expressions to match keywords to the title of each matching field in the matching field list, and use the matched keywords to ${searchWord} The label is highlighted; Using a regular expression to match the earliest position of the keyword in the content of each matching field in the matching field list, and intercepting the field of preset characters as a summary; In response to the user selecting a field to be replaced in the matching fields, a "Replace" button node is inserted below the field to be replaced.
[0032] It should be noted that the code for calling the learning library service interface for retrieval is as follows: { "data": { "startRow": 0, "hasNextPage": false, "prePage": 0, "nextPage": 0, "endRow": 0, "pageSize": 50, "list": [ { "disciplineInspection": "", "city": "", "remark": "", "source": "News", "contentHtml": " On the afternoon of March 12, Guangdong Transportation Group announced that the steel deck paving of Zhongshan Bridge on the Shenzhen-Zhongshan Link was successfully completed. The Shenzhen-Zhongshan Channel is a super-large cross-sea cluster project integrating "bridges, islands, tunnels, and underwater interchanges", with a total length of about 24 kilometers. At present, the construction of the Shenzhen-Zhongshan Channel project is advancing with all efforts towards the goal of completion and opening to traffic in 2024. The road surface project has completed the first phase of steel bridge deck paving construction, and will then implement the ordinary asphalt concrete paving of the concrete bridge deck. The Lingdingyang Bridge is carrying out the steel box girder hoisting construction. The submarine immersed tube tunnel has completed the installation of 31 pipe sections, and is prefabricating the last pipe section (including the final joint). The construction of the East and West artificial islands is steadily advancing. ", "imageStatus": 0, "title": "Steel deck paving of Zhongshan Bridge on Shenzhen-Zhongshan Link completed", "content": "On the afternoon of March 12, Guangdong Transportation Group announced that the steel deck paving of Zhongshan Bridge of Shenzhen-Zhongshan Link was successfully completed.\n\nShenzhen-Zhongshan Link is a super-large cross-sea cluster project integrating "bridge, island, tunnel and underwater interchange", with a total length of about 24 kilometers. At present, the construction of Shenzhen-Zhongshan Link project is advancing with all efforts towards the goal of completion and opening to traffic in 2024. The pavement project has completed the first phase of steel bridge deck paving construction, and will implement the ordinary asphalt concrete paving of the concrete bridge deck. The Lingdingyang Bridge is carrying out the steel box girder hoisting construction, and the submarine immersed tube tunnel has completed the installation of 31 pipe sections, and is prefabricating the last pipe section (including the final joint). The construction of the east and west artificial islands is steadily advancing.\n", "operator": "", "tagStr": "", "adoptStatus": 1, "subTitle": "", "id": 12541, "contenth": " <em> The Shenzhen-Zhongshan Channel is< / em> It integrates "bridge, island, tunnel and underwater interconnection" <em> Super large sea crossing< / em> Cluster <em> project< / em> , with a total length of about 24 kilometers. At present, the construction of the Shenzhen-Zhongshan Link project is advancing with all efforts towards the goal of completion and opening to traffic in 2024. <em> project< / em> The first phase of steel bridge deck paving has been completed, and the concrete bridge deck will be paved with ordinary asphalt concrete. The Lingdingyang Bridge is carrying out the steel box girder hoisting construction. The submarine immersed tube tunnel has completed the installation of 31 tube sections and is carrying out the installation of the last tube section...", "profession": "", "titleh": " <em> Shenzhen-Zhongshan Channel< / em> Zhongshan Bridge steel deck paving completed", "collectTime": "2023-03-18 16:57:16", "publishTime": "2023-03-12 17:55:53", "level": "", "articleId": 0, "updateTime": "2023-04-14 16:01:14", "wordStatus": 0, "url": "", "originType": 4, "punishment": "", "domain": "Ecology", "name": "Steel deck paving of Zhongshan Bridge on Shenzhen-Zhongshan Link completed", "position": "", "category": "Correspondence", "region": "Guangdong", "imgList": [], "status": 0 } ], "pageNum": 1, "navigatePages": 0, "navigateFirstPage": 0, "total": 1, "pages": 0, "size": 0, "isLastPage": false, "hasPreviousPage": false, "navigateLastPage": 0, "isFirstPage": false }, "code": 200, "msg": "Success", "success": true } It should be noted that in response to the user selecting the field to be replaced in the matching fields, the system obtains the size of the selected field and its position relative to the viewport through the getBoundingClientRect method, creates and uses absolute positioning, and inserts the "Replace" button node below the field to be replaced to facilitate the user to perform replacement operations.
[0033] In a specific implementation scenario of the present invention, Figure 3 As shown in the figure, it is a schematic diagram of the result after searching the label text in the learning library. Figure 4 As shown in the figure, after selecting the replacement field, the "Replace" button will be displayed below.
[0034] In a specific embodiment of the present invention, the AIGC question-answering interface is called to generate a picture, specifically, By calling the AIGC question-answering interface, the label text is input as the question, the generated image data is returned, and button nodes of "Insert", "Download" and "Regenerate" are inserted below the image.
[0035] It should be noted that AIGC (Artificial Intelligence Generated Content Question and Answer Interface) is an interface based on artificial intelligence technology, which is used to generate corresponding pictures or answer questions based on the text content input by the user. The interface uses technologies such as natural language processing (NLP) and generative adversarial networks (GAN) to extract key information from the input text and generate semantically consistent visual or text content.
[0036] It should be noted that the "Insert", "Download" and "Regenerate" button nodes are created through the document.createElement method, and the corresponding functions are implemented through appropriate style settings and event listeners, such as inserting images into a specific location, downloading images or regenerating images.
[0037] It should be noted that the code for calling the AIGC interface is as follows: { code: 200, data: { "id": 288, "sessionId": 37, "createTime": "11:21", "modelId": 1, "largeModelName": "Tong Yi Qian Wen", "modelName": "Tongyi Qianwen", "talkType": 1, "imageUrl": "https: / / dashscope-result-hz.oss-cn-hangzhou.aliyuncs.com / 1d / c0 / 20241118 / 522176a8 / 1630a829-c134-4460-b3d2-f5f4fe 71bed7-1.png?Expires=1731986495&OSSAccessKeyId=LTAI5tQZd8AEcZX6KZV4G8qL&Signature=4kIXPM39d18TOfKzIvkwlsErhW4%3D" }, msg: "Success", success: true } In a specific implementation scenario of the present invention, Figure 5 Shown is a schematic diagram of an image output through the AIGC interface, as well as schematic diagrams of the "Insert", "Download" and "Regenerate" button nodes.
[0038] In a specific embodiment of the present invention, the label text is replaced with the field to be replaced or a picture is inserted after the label text by matching the position information of the label text through a regular expression, specifically, Through regular expressions <mark markkey([\\s\\s]*?)>([\\s\\S]*?)<\\ / mark> matches the label text and uses the replace method to replace the selected label text with the field to be replaced or insert an image after the label text.
[0039] It should be noted that the use of regular expressions <mark markkey([\\s\\s]*?)>([\\s\\S]*?)<\\ / mark> matches the tag area containing the mark. This expression is used to find the mark tag with the markkey attribute and capture the text content inside it. Once the match is successful, the system replaces the matched tag text with the field to be replaced through the replace method. This step ensures that the text selected by the user is correctly replaced with the new content. If the user chooses to insert an image, the HTML tag of the image is spliced after the matched tag text. , so as to insert the generated image at the position of the original label text. In this way, the generated image will be correctly displayed after the text position selected by the user.
[0040] In a specific implementation scenario of the present invention, the replaced text is displayed as "The Shenzhen-Zhongshan Channel is an ultra-large cross-sea cluster project integrating "bridges, islands, tunnels, and underwater interchanges". For Zhuhai, the distance is shortened from a 2-hour drive to a minimum of tens of minutes. It also demonstrates a series of changes and opportunities brought about by the integrated development of the Guangdong-Hong Kong-Macao Greater Bay Area."
[0041] In a specific implementation scenario of the present invention, Figure 6 The figure shows the image after it is generated and inserted below the label text.
[0042] In a specific embodiment of the present invention, when it is detected that the learning library service interface call fails, no matching item is found during the text replacement process, or the AIGC question-answer interface call fails, a "retry" or "cancel" operation option is displayed; In response to the user selecting "Retry", the corresponding operation is retriggered; In response to the user selecting "Cancel", the event listener for unselecting the text is triggered and the related panel is closed.
[0043] It should be noted that when the text retrieval service call fails, the interface response interceptor captures the error and displays a friendly error prompt to the user, prompting "There was a problem during the retrieval process, please try again". The user clicks the Retry button to re-trigger the retrieval, and clicks the Cancel button to trigger the above-mentioned event listener for deselecting the text and close the retrieval panel. If no match is found during the text replacement process, the page will prompt the user "No content to replace found" so that the user can reselect or enter according to the prompt. When the intelligent image generation interface call fails, the page will prompt the user "Image generation failed, please try again". Clicking the Regenerate button can trigger the regeneration of the image, and clicking the Cancel button will trigger the above-mentioned event listener for deselecting the text and close the image retrieval panel.
[0044] In the second embodiment of the present invention, the present invention provides an auxiliary editing system based on a rich text editor, such as Figure 4 As shown, the system includes a text selection module 1, an operation selection module 2 and a content editing module 3; The text selection module 1 is used to respond to the selection of text by the rich text editor, obtain the selected text to add tags, and display operation options, including "search through learning library" and "intelligently generate pictures"; The operation selection module 2 is used to execute the corresponding auxiliary editing process in response to the user selecting the operation option; when the user selects "search through learning library", the learning library service interface is called, the label text is used as a keyword for query, the matching field is output, and the "replace" operation option is displayed; when the user selects "intelligently generate pictures", the AIGC question-and-answer interface is called to generate pictures, and the "insert" operation option is displayed; The content editing module 3 is used for replacing the label text with the field to be replaced or inserting a picture after the label text in response to the user selecting the "Replace" or "Insert" option by matching the position information of the label text through a regular expression.
[0045] In a third embodiment of the present invention, the present invention provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the auxiliary editing method based on the rich text editor as described above are implemented.
[0046] In a fourth embodiment of the present invention, the present invention provides a storage medium storing a computer program, wherein the computer program, when executed by a processor, implements the steps in the auxiliary editing method based on a rich text editor as described above.
[0047] In summary, the auxiliary editing method and system based on the rich text editor provided by the present invention significantly improve the user editing efficiency through intelligent text processing and image generation. By integrating the learning library retrieval with AIGC generated images, users can quickly obtain relevant content or generate images, and complete text replacement or image insertion through simple operations, thereby enhancing the editing experience. This method not only reduces manual intervention through automated and intelligent processes, but also improves the accuracy and flexibility of content editing. It is suitable for a variety of editing scenarios and has broad application prospects.
[0048] It should be understood that although this specification is described according to implementation modes, not every implementation mode contains only one independent technical solution. This description of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each implementation mode may also be appropriately combined to form other implementation modes that can be understood by those skilled in the art.
[0049] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the modules described above can refer to the corresponding process in the aforementioned method implementation, and will not be repeated here.
[0050] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical modules, that is, they may be located in one place or distributed on multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present implementation scheme.
[0051] In addition, each functional module in each embodiment of the present application can be integrated into one processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The above integrated modules can be implemented in the form of hardware or in the form of hardware plus software functional modules.
[0052] The above-mentioned integrated module implemented in the form of a software function module can be stored in a computer-readable storage medium. The above-mentioned software function module is stored in a storage medium, including a number of instructions for a computer system (which can be a personal computer, a server, or a network system, etc.) or a processor to perform some steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program codes.
[0053] Finally, it should be noted that the above implementation modes are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned implementation modes, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned implementation modes, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various implementation modes of the present application.< / mark> < / mark> < / mark> < / mark>
Claims
1. An auxiliary editing method based on a rich text editor, characterized in that: include, In response to the selection of text in the rich text editor, the selected text is obtained and a tag is added, and operation options are displayed, including "search through learning library" and "intelligently generate pictures"; In response to the user selecting an operation option, the corresponding auxiliary editing process is executed; when the user selects "Search through the learning library", the learning library service interface is called, the label text is used as a keyword for query, the matching field is output, and the "Replace" operation option is displayed; when the user selects "Intelligently generate pictures", the AIGC question-and-answer interface is called to generate pictures, and the "Insert" operation option is displayed; In response to the user selecting the "Replace" or "Insert" option, the label text is replaced with the field to be replaced or a picture is inserted after the label text by matching the position information of the label text with a regular expression.
2. The auxiliary editing method based on a rich text editor according to claim 1, characterized in that: The method of obtaining the selected text and adding a label includes: Get the selected text through the window.getSelection method; Create a mark tag through document.createElement, encapsulate the obtained selected text as its child node, and set the background color of the mark tag to maintain the selection effect; When you need to select other fields, register an event listener for clicking on a non-related area to cancel the mark tag node through document.addEventListener('click', callback). In response to clicking on other areas, the selected state is canceled.
3. The auxiliary editing method based on a rich text editor according to claim 2, characterized in that: The display operation options include "search through learning library" and "intelligently generate pictures" including, Get the size of the label text and its position relative to the viewport through the getBoundingClientRect method; Create "Search through learning library" and "Intelligently generate pictures" button nodes through document.createElement, and use absolute positioning to insert the "Search through learning library" and "Intelligently generate pictures" button nodes below the label text.
4. The auxiliary editing method based on a rich text editor according to claim 1, characterized in that: The calling of the learning library service interface includes: Input the keyword searchWord, the query page number pageNum and the page size pageSize of the label text into the learning library for query, and output the paging data of the matching field list; Use regular expressions to match keywords to the title of each matching field in the matching field list, and use the matched keywords to ${searchWord} The label is highlighted; Using a regular expression to match the earliest position of the keyword in the content of each matching field in the matching field list, and intercepting the field of preset characters as a summary; In response to the user selecting a field to be replaced in the matching fields, a "Replace" button node is inserted below the field to be replaced.
5. The auxiliary editing method based on a rich text editor according to claim 1, characterized in that: The calling of the AIGC question-answering interface to generate a picture includes: By calling the AIGC question-answering interface, the label text is input as the question, the generated image data is returned, and button nodes of "Insert", "Download" and "Regenerate" are inserted below the image.
6. The auxiliary editing method based on a rich text editor according to claim 4 or 5, characterized in that: The step of matching the position information of the label text by a regular expression to replace the label text with the field to be replaced or inserting a picture after the label text includes: Through regular expressions <mark markkey([\\s\\s]*?)>([\\s\\S]*?)<\\ / mark> matches the label text and uses the replace method to replace the selected label text with the field to be replaced or insert an image after the label text.< / mark> 7. The auxiliary editing method based on a rich text editor according to claim 1, characterized in that: Also includes, When it is detected that the learning library service interface call fails, no matching items are found during the text replacement process, or the AIGC question-answer interface call fails, the "Retry" or "Cancel" operation options are displayed; In response to the user selecting "Retry", the corresponding operation is retriggered; In response to the user selecting "Cancel", the event listener for unselecting the text is triggered and the related panel is closed.
8. An auxiliary editing system based on a rich text editor, characterized in that: Including text selection module, operation selection module and content editing module; The text selection module is used to respond to the selection of text by the rich text editor, obtain the selected text to add tags, and display operation options, including "search through learning library" and "intelligently generate pictures"; The operation selection module is used to execute the corresponding auxiliary editing process in response to the user selecting the operation option; when the user selects "search through learning library", the learning library service interface is called, the label text is used as a keyword for query, the matching field is output, and the "replace" operation option is displayed; when the user selects "intelligently generate pictures", the AIGC question-and-answer interface is called to generate pictures, and the "insert" operation option is displayed; The content editing module is used for replacing the label text with the field to be replaced or inserting a picture after the label text in response to the user selecting the "Replace" or "Insert" option by matching the position information of the label text through a regular expression.
9. An electronic device, comprising a memory and a processor, characterized in that: The memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the auxiliary editing method based on the rich text editor as described in any one of claims 1 to 7 are implemented.
10. A storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the auxiliary editing method based on a rich text editor as described in any one of claims 1 to 7 are implemented.
Citation Information
Patent Citations
Picture watermark processing method and device based on rich text editor
CN113887178A
Article generation method and device, electronic equipment and storage medium
CN116468009A
Article editing automatic illustration method, device and equipment based on AIGC and storage medium
CN117078802A
Cited By
Rich text processing method and device based on artificial intelligence, equipment and medium
CN121723978A
Artificial intelligence-based rich text processing method and device, equipment and medium
CN121723978B