Rich text editing content isolation rendering method, device and system and storage medium

Abstract

The invention discloses a rich text editing content isolation rendering method, device and system and a storage medium, and relates to the technical field of data processing. The method comprises the steps of obtaining rich text content, and preprocessing the rich text content to obtain preprocessed content; judging browser compatibility, and selecting an isolation rendering method according to the browser compatibility; and performing isolated rendering on the preprocessed content according to the isolated rendering method. By adopting the rich text editing content isolation rendering method provided by the embodiment of the invention, correct and consistent rendering effects of the rich text content on different browsers can be ensured, and the rich text content is effectively isolated from other page elements, so that potential safety risks are avoided, and the user experience is improved. According to the embodiment of the invention, the condition that the content is cut off or a scroll bar appears is avoided, the click experience of the user can be further optimized, and unnecessary page redrawing and rearrangement are reduced, so that the rendering performance of the page is improved, and the difficulty of subsequent maintenance and modification is reduced.

Description

Technical Field

[0001] The present application belongs to the field of data processing technology, and in particular, relates to a method, device, system and storage medium for isolated rendering of rich text editing content. Background Art

[0002] With the increasing demand for content creation on the Internet, rich text editors have become an important tool in web development. Rich text editors allow users to edit content through a graphical interface and create documents with rich formats, such as text styles, pictures, links, tables, etc. These contents are widely used in blogs, news articles, social media and other fields. However, when these rich text contents are embedded in web pages, developers often face the problem of style pollution. Style pollution refers to the situation that when rich text content is inserted into a web page, the style set by the user in the editor is overwritten or destroyed due to the influence of the original global style or other external styles of the web page. This phenomenon has brought many troubles and inconveniences to users and developers. In the prior art, developers usually deal with the style rendering problem of rich text content through the following implementation schemes:

[0003] CSS Reset: Eliminate the default style differences of browsers by unifying the default styles of all HTML elements. It resets the element's margin, padding, border and other properties to a consistent initial state in order to provide a clean style foundation. This approach attempts to reduce style conflicts by defining styles from scratch; Increase style priority: To ensure that the style of rich text content takes precedence over global styles, developers can use more specific CSS selectors or the !important keyword to increase the priority of styles. This method can force the application of specific style rules to avoid being overwritten by external styles; JavaScript dynamic adjustment: Detect and adjust the style of rich text content after the page is loaded through scripts. The script can check whether the actual style of the content matches the expected style, and modify the style or insert new style rules as needed. This method increases dynamic processing capabilities, but also increases development complexity.

[0004] However, CSS Reset usually affects the style of the entire web page, which may cause the styles of other pages or components to be reset unnecessarily, causing new style problems. Since all styles need to be reset, developers may need extra work when defining and maintaining custom styles, which increases the complexity of style management; using !important or more specific selectors can solve the style override problem, but it may cause style priority confusion. As the complexity of the page increases, high-priority styles may become difficult to manage, especially in large projects, where adjusting styles becomes more cumbersome; dynamically adjusting styles may cause page loading to slow down or affect performance, especially when styles need to be adjusted frequently. At the same time, additional JavaScript code needs to be written and maintained, which increases the complexity of development and maintenance and may introduce cross-browser compatibility issues. Summary of the invention

[0005] The purpose of this application is to provide a method, device, system and storage medium for isolated rendering of rich text editing content, which ensures that the rich text content is not affected by external styles when rendering by detecting the compatibility of the browser and dynamically utilizing the style isolation characteristics of Shadow DOM and iFrame.

[0006] In order to achieve the above objectives, the solution of this application is:

[0007] In a first aspect, an embodiment of the present application provides a method for isolating and rendering rich text editing content, including:

[0008] Obtain rich text content, preprocess the rich text content, and obtain preprocessed content;

[0009] Determine browser compatibility and select the isolated rendering method based on browser compatibility;

[0010] The preprocessed content is rendered in isolation according to the isolation rendering method.

[0011] According to the above method of the embodiment of the present application, the following additional technical features may also be provided:

[0012] Furthermore, the preprocessing includes uniformly formatting the rich text content through regular expressions and / or custom function slots.

[0013] Furthermore, judging the browser compatibility includes judging the browser compatibility through a JavaScript statement, and the JavaScript statement includes an HTMLElement.prototype.attachShadow function.

[0014] Furthermore, browser compatibility includes Shadow DOM and iframe. AttachShadow is converted into a Boolean value through double negation to determine whether the browser compatibility supports Shadow DOM. If the browser compatibility supports Shadow DOM, the Boolean value output is true; if the browser compatibility does not support Shadow DOM, the Boolean value output is false.

[0015] Furthermore, the isolated rendering method includes isolating the preprocessed content through Shadow DOM or isolating the preprocessed content through iframe. If the browser compatibility supports Shadow DOM, the preprocessed content is isolated and rendered through Shadow DOM; if the browser compatibility does not support Shadow DOM, the preprocessed content is isolated and rendered through iframe.

[0016] Furthermore, the pre-processed content is rendered in isolation through iframe, including:

[0017] Repeatedly detect the height of the preprocessed content, adjust the height of the iframe according to the height of the preprocessed content, and use the detectBrowserSupport function to detect whether the browser supports requestAnimationFrame; if the browser supports requestAnimationFrame, call the startAnimationFrameDe tection function to adjust the height of the iframe through requestAnimationFrame; if the browser does not support requestAnimationFrame, call the startIntervalDetection function to adjust the height of the iframe through setInterval at preset intervals to keep the height of the iframe the same as the height of the preprocessed content;

[0018] When the number of repeated detections of the height of the preprocessed content reaches a preset threshold, if the height of the iframe is adjusted through requestAnimationFrame, cancelAnimationFrame is called to stop the detection; if the height of the iframe is adjusted at preset intervals through setInterval, clearInterval is called to stop the detection.

[0019] Furthermore, the method includes hijacking and redirecting the A tag in the iframe to control the jump logic.

[0020] In a second aspect, an embodiment of the present application provides a rich text editing content isolation rendering device, comprising:

[0021] A preprocessing module is configured to obtain rich text content, preprocess the rich text content, and obtain preprocessed content, wherein the preprocessing includes uniformly formatting the rich text content through regular expressions and / or custom function slots;

[0022] A compatibility judgment module is configured to judge the browser compatibility, select the isolation rendering method according to the browser compatibility, judge the browser compatibility, including judging the browser compatibility through JavaScript statements, the JavaScript statements include HTMLElement.prototype.attachShadow function, the browser compatibility includes Shadow DOM and iframe, convert attachShad ow into a Boolean value through double negation, judge whether the browser compatibility supports Shadow DOM, if the browser compatibility supports Shadow DOM, the Boolean value output is true; if the browser compatibility does not support Shadow DOM, the Boolean value output is false;

[0023] An isolated rendering module is configured to perform isolated rendering on the preprocessed content according to an isolated rendering method, the isolated rendering method including isolating the preprocessed content through Shadow DOM or isolating the preprocessed content through iframe. If the browser compatibility supports Shadow DOM, the preprocessed content is isolated and rendered through Shadow DOM; if the browser compatibility does not support Shadow DOM, the preprocessed content is isolated and rendered through iframe. The isolated rendering of the preprocessed content through iframe includes repeatedly detecting the height of the preprocessed content, adjusting the height of the iframe according to the height of the preprocessed content, and detecting whether the browser supports requestAnimationFrame through the detectBrowserSupport function; if the browser supports requestAnimationFrame, calling the startAnimationFrameDetection function to adjust the height of the iframe through requestAnimationFrame; if the browser does not support requestAnimationFrame, calling the startIntervalDetection function to adjust the height of the iframe at preset intervals through setInterval to keep the iframe The height of me is the same as the height of the preprocessed content. When the number of repeated detections of the height of the preprocessed content reaches a preset threshold, if the height of the iframe is adjusted by requestAnimationFrame, cancelAnimationFrame is called to stop the detection. If the height of the iframe is adjusted at preset intervals by setInterval, clearInterval is called to stop the detection. The jump logic is controlled by hijacking and redirecting the A tag in the iframe.

[0024] In a third aspect, an embodiment of the present application provides a system for isolating and rendering rich text editing content, the system comprising a processor and a memory, the memory storing a computer program, the computer program being loaded and executed by the processor to implement a method for isolating and rendering rich text editing content as provided in the first aspect of the embodiment of the present application.

[0025] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, it is used to implement the rich text editing content isolation rendering method as in the first aspect of the embodiment of the present application.

[0026] Compared with the prior art, the rich text editing content isolation rendering method provided by the embodiment of the present application has the following beneficial technical effects:

[0027] The embodiment of the present application can select the isolated rendering method that is most suitable for the current browser by judging the compatibility of the browser, thereby ensuring that the rich text content can obtain correct and consistent rendering effects on different browsers; using Shadow DOM or iframe for isolated rendering can effectively isolate the rich text content from other page elements, thereby avoiding potential security risks.

[0028] The embodiment of the present application repeatedly detects the height of the pre-processed content and adjusts the height of the iframe according to the height, thereby ensuring that the rich text content in the iframe can be displayed completely without the content being truncated or the appearance of a scroll bar; hijacking the A tag in the iframe and redirecting the control jump logic can further optimize the user's click experience and prevent the user from being guided to unsafe or unwelcome websites by malicious links.

[0029] The embodiment of the present application uses JavaScript's requestAnimationFrame or setInterval function to dynamically adjust the height of the iframe, reducing unnecessary page redrawing and rearrangement, thereby improving the rendering performance of the page; and uses regular expressions and / or custom function slots to uniformly format rich text content to ensure content format consistency and reduce the difficulty of subsequent maintenance and modification.

[0030] The embodiments of the present application take into account a variety of browser compatibility and rendering options, and can be more easily expanded and modified when faced with new browser features or changes in requirements; through modular design, the method is more flexible in function and can be customized and optimized according to specific needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 A schematic diagram showing a process flow of a method for isolating and rendering rich text editing content according to an embodiment of the present application is shown;

[0032] Figure 2 A structural block diagram of a rich text editing content isolation rendering device according to an embodiment of the present application is shown;

[0033] Figure 3 A structural block diagram of a computer device according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0034] In order to make the above-mentioned purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are described in detail below in conjunction with the accompanying drawings. It is to be understood that the specific embodiments described herein are only used to explain the present application, rather than to limit the present application. It should also be noted that, for ease of description, only some structures related to the present application are shown in the accompanying drawings, rather than all structures. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0035] The terms "including" and "having" and any variations thereof in this application are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device comprising a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products or devices.

[0036] Reference to "embodiments" in this application means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described in this application may be combined with other embodiments.

[0037] like Figure 1 As shown, the embodiment of the present application provides a method for isolating and rendering rich text editing content, including the following steps:

[0038] Step 101, obtain rich text content, pre-process the rich text content, and obtain pre-processed content.

[0039] In step 101, the embodiment of the present application preprocesses the rich text content. The main purpose of the preprocessing is to perform necessary formatting and cleaning on the original rich text content to ensure that subsequent steps (such as browser compatibility determination and isolated rendering) can proceed smoothly. Through preprocessing, potential problems in the rich text content, such as inconsistent formats, illegal characters, etc., can be eliminated, thereby improving the stability and reliability of the entire rendering process.

[0040] Specifically, the embodiment of the present application preprocesses the rich text content through regular expressions and / or custom function slots, wherein regular expressions are a powerful text processing tool that allows users to define a pattern and search, replace or operate text that conforms to the pattern. In the preprocessing of rich text content, regular expressions can be used to clean up illegal characters. By defining specific regular expression patterns, illegal characters or special symbols in rich text content can be searched and deleted; formatting text, regular expressions can also be used to format specific parts of rich text content (such as titles, paragraphs, links, etc.) to ensure that they conform to the expected style and format.

[0041] In addition to regular expressions, the preprocessing step can also utilize custom function slots to further process the rich text content. Custom function slots allow users to define specific processing logic according to their needs and apply it to specific parts of the rich text content. This flexibility allows the preprocessing process to more accurately meet the actual needs of users.

[0042] For example, users may want to highlight specific keywords in rich text content, or redirect certain links to specified URLs, which can be achieved by defining corresponding custom function slots.

[0043] In practical applications, the preprocessing step is usually implemented by writing corresponding codes. These codes can be integrated into the backend service of the rich text editor, or executed on the front end through scripting languages ​​such as JavaScript. Regardless of the method used, the preprocessing step should be able to efficiently process a large amount of rich text content and ensure the accuracy and consistency of the processing results.

[0044] In summary, step 101 performs necessary formatting and cleaning of the rich text content by using tools such as regular expressions and custom function slots, thereby providing stable and reliable input for subsequent browser compatibility judgment and isolated rendering steps. This preprocessing process not only improves the stability and reliability of the entire rendering process, but also makes the rich text content more in line with the actual needs of users.

[0045] Step 102, determine browser compatibility, and select an isolated rendering method based on the browser compatibility.

[0046] Step 102 ensures that the rich text content can be correctly and safely rendered on different browsers. Browser compatibility refers to the ability of a web page or web application to maintain a consistent appearance and functionality when running on different browsers. Since different browsers support different web technologies such as HTML, CSS, and JavaScript, browser compatibility needs to be considered when rendering rich text editing content.

[0047] The embodiment of the present application uses the HTMLElement.prototype.attachShadow function as the basis for judgment. attachShadow is part of the Web Components technology and is used to create a Shadow DOM, which can encapsulate the DOM and style in an independent, isolated context. The reason why attachShadow is converted to a Boolean value through double negation is that the attachShadow function is a function object on browsers that support it, and undefined on browsers that do not support it. The first negation converts the variable to the opposite value of the Boolean value (if the variable is "truthy", it becomes false, and if the variable is "falsy", it becomes true), and the second negation reverses it back to the original Boolean meaning again. When a function object is converted to a Boolean value, true is obtained, and when undefined is converted to a Boolean value, false is obtained.

[0048] According to the converted Boolean value, determine whether the browser supports Shadow DOM. If the Boolean value is true, it means that the browser supports Shadow DOM; if the Boolean value is false, it means that the browser does not support Shadow DOM.

[0049] Finally, according to the judgment result of browser compatibility, select the appropriate isolated rendering method. If the browser supports Shadow DOM, use Shadow DOM to render the preprocessed content in isolation; if the browser does not support ShadowDOM, use iframe to render the preprocessed content in isolation. This method of selecting isolated rendering methods based on browser compatibility not only improves the compatibility of rich text content on different browsers, but also ensures the security and stability of the rendering process. At the same time, it also shows the attention and solution strategies for browser compatibility issues in Web development.

[0050] Step 103: perform isolated rendering on the preprocessed content according to the isolated rendering method.

[0051] The isolated rendering method of the embodiment of the present application is intended to isolate rich text content from other page elements to ensure independent rendering and security of the content. This embodiment includes two implementation methods: Shadow DOM and iframe.

[0052] When browser compatibility supports Shadow DOM, the embodiment of the present application uses Shadow DOM for isolated rendering. Shadow DOM is a Web component technology that allows developers to encapsulate DOM and styles in an independent context isolated from the rest of the page. By using Shadow DOM, rich text content can be rendered safely without interference from other styles or scripts on the page.

[0053] When the browser compatibility does not support Shadow DOM, the embodiment of the present application uses iframe for isolated rendering. Iframe is an embedded frame that can load another HTML document, and this document is isolated from the page containing it. In the context of rich text editing, iframe can be used to load and render rich text content, thereby ensuring the independence and security of the content.

[0054] When using iframe for isolated rendering, a common problem is that the height of the iframe may not match the height of the rich text content, resulting in truncated content or scroll bars. To solve this problem, the embodiment of the present application adopts a strategy of dynamically adjusting the height of the iframe. Specifically, it repeatedly detects the height of the pre-processed content and adjusts the height of the iframe according to the height.

[0055] In the process of dynamically adjusting the height of the iframe, the embodiment of the present application will also detect whether the browser supports the requestAnimationFrame function. requestAnimationFrame is a function used to execute animations before the next redraw of the browser, which provides a more efficient way to execute animations and page updates. If the browser supports requestAnimationFrame, then the embodiment of the present application will give priority to using it to dynamically adjust the height of the iframe. If it does not support it, the setInterval function will be used to adjust the height of the iframe at preset intervals.

[0056] When the number of repeated detections of the height of the preprocessed content reaches the preset threshold, the method stops the detection. If requestAnimationFrame is used to adjust the height of the iframe, the cancelAnimationFrame function is called to stop the detection. If setInterval is used to adjust the height of the iframe, the clearInterval function is called to stop the detection.

[0057] In addition, the embodiment of the present application also includes hijacking the A tag in the iframe and redirecting the control jump logic. This is to ensure that when the user clicks the link in the iframe, the jump can be performed according to the expected jump logic, rather than being guided to an unsafe or unwelcome website by a malicious link.

[0058] In summary, the embodiments of the present application ensure independent rendering, security and good user experience of rich text content by flexibly selecting Shadow DOM or iframe for isolated rendering, and adopting technical means such as dynamically adjusting the iframe height and hijacking and redirecting the A tag.

[0059] Furthermore, if the browser compatibility supports neither Shadow DOM nor iframe, the embodiment of the present application also designs a fallback mechanism. When it is detected that the browser supports neither Shadow DOM nor iframe, a more basic rendering method is adopted to directly embed the rich text content into the page, but doing so may increase security risks because the rich text content may contain malicious scripts.

[0060] If the client browser cannot support the required isolated rendering technology, the rendering process can also be transferred to the server. The server can process the rich text content, generate secure HTML, and send it to the client for display. This approach can reduce the complexity of the client, but may increase the burden and latency of the server.

[0061] In addition, the embodiments of the present application can also dynamically enable or disable specific functions according to the browser's support. For example, if the browser does not support Shadow DOM or iframe, then those functions that rely on these technologies can be disabled while maintaining the availability of other functions.

[0062] like Figure 2 As shown, the embodiment of the present application provides a rich text editing content isolation rendering device, including a pre-processing module 201, a compatibility judgment module 202 and an isolation rendering module 203, wherein:

[0063] The preprocessing module 201 is configured to obtain rich text content, preprocess the rich text content, and obtain preprocessed content, wherein the preprocessing includes uniformly formatting the rich text content through regular expressions and / or custom function slots;

[0064] The compatibility determination module 202 is configured to determine the browser compatibility, select the isolation rendering method according to the browser compatibility, determine the browser compatibility, including determining the browser compatibility through a JavaScript statement, the JavaScript statement includes the HTMLElement.prototype.attachShad ow function, the browser compatibility includes Shadow DOM and iframe, converting attach Shadow into a Boolean value through double negation, determining whether the browser compatibility supports Shadow DOM, if the browser compatibility supports Shadow DOM, the Boolean value output is true; if the browser compatibility does not support Shadow DOM, the Boolean value output is false;

[0065] The isolated rendering module 203 is configured to perform isolated rendering on the preprocessed content according to the isolated rendering method, the isolated rendering method includes isolating the preprocessed content through Shadow DOM or isolating the preprocessed content through iframe. If the browser compatibility supports Shadow DOM, the preprocessed content is isolated and rendered through Shadow DOM; if the browser compatibility does not support Shadow DOM, the preprocessed content is isolated and rendered through iframe. The isolated rendering of the preprocessed content through ifra me includes repeatedly detecting the height of the preprocessed content, adjusting the height of the iframe according to the height of the preprocessed content, and detecting whether the browser supports requestAnimationFrame through the detectBrowserSupport function; if the browser supports requestAnimationFrame, calling the startAnimationFrameDetection function to adjust the height of the iframe through requestAnimationFrame; if the browser does not support requestAnimationFrame, calling startInt ervalDetection function, adjusts the height of the iframe at preset intervals through setInterval to keep the height of the iframe the same as the height of the preprocessed content; when the number of repeated detections of the height of the preprocessed content reaches the preset threshold, if the height of the iframe is adjusted through requestAnimationFrame, cancelAnimationFrame is called to stop the detection; if the height of the iframe is adjusted at preset intervals through setInterval, clearInterval is called to stop the detection; the jump logic is controlled by hijacking and redirecting the A tag in the iframe.

[0066] The rich text editing content isolation rendering device of the embodiment of the present application can be a computer device, or a component in the computer device, such as an integrated circuit or a chip. The computer device can be a terminal, or it can be other devices other than the terminal. Exemplarily, the computer device can be a mobile phone, a tablet computer, a laptop computer, a PDA, a vehicle-mounted computer device, a mobile Internet device (Mobile Internet Device, MID), an ultra-mobile personal computer (Ultra-Mobile Personal Computer, UMPC), a netbook or a personal digital assistant (Personal Digital Assistant, PDA), etc., and can also be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (Personal Computer, PC), etc., which is not specifically limited in the embodiment of the present application.

[0067] The rich text editing content isolation rendering device provided in the embodiment of the present application can achieve Figure 1 To avoid repetition, the various processes implemented in the embodiment of the rich text editing content isolation rendering method are not repeated here.

[0068] The present application also provides a computer device, such as Figure 3 As shown, the computer device includes a processor 301 and a memory 302. The memory 302 stores programs or instructions that can be executed on the processor 301. When the program or instructions are executed by the processor 301, the various steps of the above-mentioned rich text editing content isolation rendering method are implemented, and the same technical effect can be achieved. To avoid repetition, they are not repeated here.

[0069] It should be noted that the computer device in the embodiment of the present application includes the above-mentioned mobile computer device and non-mobile computer device.

[0070] The memory 302 can be used to store software programs and various data. The memory 302 may mainly include a first storage area for storing programs or instructions and a second storage area for storing data, wherein the first storage area may store an operating system, an application program or instructions required for at least one function (such as a sound playback function, an image playback function, etc.), etc. In addition, the memory 302 may include a volatile memory or a non-volatile memory, or the memory 302 may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), a static random access memory (SRAM), a dynamic random access memory (DRAM), a synchronous dynamic random access memory (SDRAM), a double data rate synchronous dynamic random access memory (DDRSDRAM), an enhanced synchronous dynamic random access memory (ESDRAM), a synchronous link dynamic random access memory (SLDRAM) and a direct memory bus random access memory (DRRAM). The memory 302 of the embodiment of the present application includes but is not limited to these and any other suitable types of memory.

[0071] The processor 301 may include one or more processing units; optionally, the processor 301 integrates an application processor and a modem processor, wherein the application processor mainly processes operations related to an operating system, a user interface, and application programs, and the modem processor mainly processes wireless communication signals, such as a baseband processor. It is understandable that the modem processor may not be integrated into the processor 301.

[0072] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, each process of the above-mentioned rich text editing content isolation rendering method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0073] An embodiment of the present application also provides a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned rich text editing content isolation rendering method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0074] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0075] An embodiment of the present application also provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various processes of the above-mentioned rich text editing content isolation rendering method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0076] It should be noted that, in the present application, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises one..." does not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be noted that the scope of the method and device in the embodiment of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0077] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for isolating and rendering rich text editing content, characterized in that: The method comprises: Acquire rich text content, and preprocess the rich text content to obtain preprocessed content; Determine browser compatibility and select an isolated rendering method based on the browser compatibility; The pre-processed content is isolated and rendered according to the isolated rendering method.

2. The rich text editing content isolation rendering method according to claim 1, characterized in that: The preprocessing includes performing unified format processing on the rich text content through regular expressions and / or custom function slots.

3. The rich text editing content isolation rendering method according to claim 1, characterized in that: The determining of browser compatibility includes determining the browser compatibility through a JavaScript statement, wherein the JavaScript statement includes an HTMLElement.prototype.attachShadow function.

4. The rich text editing content isolation rendering method according to claim 3, characterized in that: The browser compatibility includes Shadow DOM and iframe. AttachShadow is converted into a Boolean value through double negation to determine whether the browser compatibility supports Shadow DOM. If the browser compatibility supports Shadow DOM, the Boolean value output is true; if the browser compatibility does not support Shadow DOM, the Boolean value output is false.

5. The rich text editing content isolation rendering method according to claim 4, characterized in that: The isolated rendering method includes isolating the preprocessed content through Shadow DOM or isolating the preprocessed content through iframe. If the browser compatibility supports Shadow DOM, the preprocessed content is isolated and rendered through Shadow DOM; if the browser compatibility does not support Shadow DOM, the preprocessed content is isolated and rendered through iframe.

6. The rich text editing content isolation rendering method according to claim 5, characterized in that: The isolating and rendering the pre-processed content through the iframe includes: Repeatedly detect the height of the preprocessed content, adjust the height of the iframe according to the height of the preprocessed content, and detect whether the browser supports requestAnimationFrame through the detectBrowserSupport function; if the browser supports requestAnimationFrame, call the startAnimationFrameDetection function to adjust the height of the iframe through requestAnimationFrame; if the browser does not support requestAnimationFrame, call the startIntervalDetection function to adjust the height of the iframe through setInterval at preset intervals to keep the height of the iframe the same as the height of the preprocessed content; When the number of times the height of the preprocessed content is repeatedly detected reaches a preset threshold, if the height of the iframe is adjusted through requestAnimationFrame, cancelAnimationFrame is called to stop the detection; if the height of the iframe is adjusted at preset intervals through setInterval, clearInterval is called to stop the detection.

7. The rich text editing content isolation rendering method according to claim 6, characterized in that: The method includes hijacking and redirecting the A tag in the iframe to control the jump logic.

8. A rich text editing content isolation rendering device, characterized in that: The device comprises: A preprocessing module is configured to obtain rich text content, preprocess the rich text content, and obtain preprocessed content, wherein the preprocessing includes uniformly formatting the rich text content through regular expressions and / or custom function slots; a compatibility determination module, configured to determine browser compatibility, and select an isolated rendering method according to the browser compatibility, wherein determining browser compatibility includes determining the browser compatibility through a JavaScript statement, wherein the JavaScript statement includes an HTMLElement.prototype.attachShadow function, wherein the browser compatibility includes Shadow DOM and iframe, and converting attachShadow into a Boolean value through double negation to determine whether the browser compatibility supports Shadow DOM, and if the browser compatibility supports Shadow DOM, the Boolean value output is true; if the browser compatibility does not support Shadow DOM, the Boolean value output is false; The isolated rendering module is configured to perform isolated rendering on the preprocessed content according to the isolated rendering method, wherein the isolated rendering method includes isolating the preprocessed content through Shadow DOM or isolating the preprocessed content through iframe. If the browser compatibility supports Shadow DOM, the preprocessed content is isolated and rendered through ShadowDOM; if the browser compatibility does not support Shadow DOM, the preprocessed content is isolated and rendered through iframe, wherein the isolating rendering of the preprocessed content through iframe includes repeatedly detecting the height of the preprocessed content, adjusting the height of the iframe according to the height of the preprocessed content, and detecting whether the browser supports requestAnimationFrame through detectBrowserSupport function; if the browser supports requestAnimationFrame, calling startAnimationFrameDetection function to adjust the height of the iframe through requestAnimationFrame; if the browser does not support requestAnimationFrame, calling startInterval Detection function, adjusts the height of the iframe at preset intervals through setInterval to keep the height of the iframe the same as the height of the preprocessed content; when the number of repeated detections of the height of the preprocessed content reaches a preset threshold, if the height of the iframe is adjusted through requestAnimationFrame, cancelAnimationFrame is called to stop detection; if the height of the iframe is adjusted at preset intervals through setInterval, clearInterval is called to stop detection; the jump logic is controlled by hijacking and redirecting the A tag in the iframe.

9. A rich text editing content isolation rendering system, the system comprising a processor and a memory, the memory storing a computer program, characterized in that: The computer program is loaded and executed by the processor to implement the rich text editing content isolation rendering method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, wherein a computer program is stored in the storage medium, characterized in that: When the computer program is executed by a processor, it is used to implement the rich text editing content isolation rendering method as described in any one of claims 1 to 7.

Images