Method and device for SSE streaming output of edited data and medium

Abstract

The invention discloses a method and equipment for SSE streaming output of edited data and a medium, belongs to the technical field of WEB front ends, and aims to solve the technical problems of poor data interaction, poor performance and poor user experience in traditional text writing. Wherein the Vue.js component comprises a template, a script and a style; the template comprises a form, a rich text editor and an editor function button; the script defines a data object and a method object in a. Vue file through JavaScript, and the data object and the method object are used for data state and user behavior operation; the method comprises the following steps of: initializing and configuring a rich text editor (Wangeditor); performing streaming data interaction with a back-end server through an SSE technology, and receiving and rendering text data to a rich text editor Wangeditor in real time; state management and interaction optimization; and performance optimization and debugging.

Description

Technical Field

[0001] The present invention relates to the field of WEB front-end technology, and in particular to a method, device and medium for SSE streaming output of edited data. Background Art

[0002] In traditional methods, text writing data transmission may be a one-time large-volume data transmission, which is prone to causing lag or even timeouts. Especially when the network is stuck, it is very easy to give users a poor functional experience. Text writing based on the Vue.js framework and Wangeditor components breaks through the limitations of traditional writing: ①Poor data interaction: Traditional data transmission methods involve one-time large-volume data transmission, which can easily cause lag or even timeout, especially when the network is stuck.

[0003] ②Poor performance: Traditional text writing data transmission may be a one-time large-volume transmission, which can easily cause web page lag or even timeout, affecting performance.

[0004] ③Poor user experience: When faced with complex documents, traditional users may face a blank document interface for a long time, not knowing whether the operation is effective; and if the generated text needs to be edited later, other tools may be needed, which is a cumbersome process and not conducive to the user experience. Summary of the Invention

[0005] The technical task of the present invention is to provide a method, device and medium for SSE streaming output of editing data to solve the problems of poor data interaction, poor performance, poor user experience, etc. in traditional text writing.

[0006] The technical task of the present invention is achieved in the following manner: a method for SSE streaming output of edited data, the method being specifically as follows: Design Vue.js components; Vue.js components include templates, scripts, and styles; templates include forms, rich text editor Wangeditor, and editor function buttons; forms are used to collect text-related information such as text type, time, unit, person, and subject input by users; rich text editors are used to display and edit streaming output text content; editor function buttons are used to trigger regeneration, interrupt the current generation process, and download edited text content; scripts define data objects and methods using JavaScript in the .vue file for data status and user behavior operations; styles are used to define forms (forms), rich text editor Wangeditor, and editor function buttons (buttons) using CSS and LESS programming languages. This defines the appearance and layout of Vue.js components, that is, the layout visual effect of the page presented in the browser, ensuring that the visual effect of the component is consistent with the overall design of the application; Initialize and configure the rich text editor Wangeditor; Streaming data interaction with the backend server through SSE (Server-Sent Events) technology, real-time reception and rendering of text data to the rich text editor Wangeditor; State management and interaction optimization; Performance optimization and debugging.

[0007] As a preference, the data object adopts a combined API in the Vue framework, which creates responsive data by introducing the ref function; the data object includes form data entities, interface status information, and list display data; The form data entity is used to store various variable data entered by the user; the variable data includes text content, selection items, and switch status; Interface status information is used to record the current loading status of the page, verification results, and interaction status of error information; The list display data includes data collection and related paging parameters, sorting submission information.

[0008] As a preference, methods refer to defining function methods in the methods of the Vue framework to implement different interactive effects of the page; methods include form processing logic and business processing logic; The form processing logic includes data submission, required variable validation, and interactive control. Data submission refers to sending form data to the server via HTTP requests (such as axios or fetch) using the POST / PUT method. Form data is transmitted in JSON format or FormData (file upload) format. Anti-duplicate submission is processed during submission (such as disabling buttons). Required variable validation refers to using a front-end validation library (such as Element UI's form validation) or HTML5's native required attribute to perform required verification. If the verification fails, submission is prevented and the user is prompted (such as error highlighting). Interactive control refers to dynamically adjusting form behavior based on user operations (such as input and selection), such as linked selection and conditional display / hiding (for example, the "Company Name" input box is displayed only when "Enterprise User" is selected). Business processing logic implements specific rules or calculations based on business requirements, as follows: Different buttons trigger different services: the "Submit for Review" button calls submit(); Data calculation and conversion: total order price = unit price x quantity + shipping fee, using computed properties for real-time updates; using tool functions for date formatting and amount decimal fractions; Permission control: Dynamically display or hide function buttons based on user roles (e.g., administrator, ordinary user) (v-if="user.role==='admin'"); Status logic: When the order status changes ("Awaiting Payment" → "Shipped" → "Completed"), the operation is allowed only after the current status is verified; otherwise, the operation cannot be performed.

[0009] As a preference, initialize and configure the rich text editor Wangeditor as follows: Initialize the rich text editor Wangeditor: After the Vue.js component page is loaded, the rich text editor instance is mounted. The component structure of the rich text editor Wangeditor mounted after the Vue.js component page is loaded includes the outer container editor-container and the inner editor-wrapper. The outer container editor-container is used to wrap the entire rich text editor Wangeditor. The inner editor-wrapper includes <toolbar>Rich text editor toolbar and <editor>Editing area; <toolbar>The toolbar of the rich text editor is used to bind the editor instance editorRef and the configuration item toolbarConfig. The editor instance editorRef stores the responsive reference of the editor instance and sets the mode to simple (simple mode), indicating that the rich text editor Wangeditor uses a streamlined toolbar function. <editor>The editing area is used to bind the configuration editorConfig and the bidirectional data variable valueHtml, and listen to the editor initialization completion event through @onCreated; Configure the Wangeditor toolbar to retain common text formatting and layout options: set the toolbarKeys keyword in the toolbarConfig variable and set the keys for Wangeditor's common functions in the toolbarKey keyword. The keys for Wangeditor's common functions include basic styles, style clearing, text attributes, paragraph formatting, alignment, line height and title, and list functions. Set the height of the rich text editor Wangeditor: Use the selector editor-container to set the height of the rich text editor Wangeditor. The height is set to 75% of the entire screen to adapt to the page layout and ensure responsive design compatibility with different devices.

[0010] Preferably, the rich text editor Wangeditor is initialized through the callback function handleCreated(), specifically by assigning the passed editor instance to editorRef; calling the adjustEditorHeight() function to adjust the height of the rich text editor Wangeditor; and then listening to the resize event of the page window to dynamically adjust the height of the rich text editor Wangeditor; Among them, adjustEditorHeight() is used to dynamically set the height according to the window <editor>The height of the editing area, specifically: obtained through editorRef.value.getEditableContainer() <editor>The container of the editing area is calculated by window height - 190px (leaving space for the top toolbar and other elements) <editor>The height of the editing area, and finally assign the calculated height to the style.height of the rich text editor; When the rich text editor Wangeditor is destroyed, the editor instance is destroyed and the resize event listener is removed through onBeforeUnmounted when the page is destroyed.

[0011] As a preference, streaming data interaction with the backend server through SSE technology is as follows: Initiate an SSE request through axios, set the response type to streaming, receive data blocks in real time, and dynamically append them to the rich text editor Wangeditor; Collect the form data filled out by the user, verify the required fields and submit the data, disable the Generate button to prevent duplicate submission, and clear the rich text editor Wangeditor content to prepare for receiving new streaming data returned by the listening interface; Interrupt the request through AbortController and call abort() when clicking to stop generating; Reuse the current form data when regenerating and repeat the streaming request process.

[0012] Preferably, the editor function buttons include a regenerate button, a stop generate button and a local download button; Regenerate button: re-initiates a streaming request based on the current form data and clears the existing rich text editor Wangeditor content; Stop generating button: It is only displayed during the request process and will interrupt the current request after clicking it; Local download button: Gets the content of the rich text editor Wangeditor, converts it into a Blob object, uses URL.createObjectURL to create a download link, and triggers the browser to download.

[0013] As a preferred option, state management and interaction optimization are as follows: Dynamically control the disabled state of buttons to prevent repeated operations; During the generation process, a loading status prompt is displayed to indicate the loading status; Provide error handling mechanism and user-friendly prompts; Ensure compatibility of components on mobile and desktop through responsive design; The performance optimization and debugging are as follows: Lifecycle management: In Vue.js components, the editor instance is destroyed when the page is destroyed through onBeforeUnmounted to avoid memory leaks. The editor instance includes the rich text editor instance when the page is created and the editor instance when the page is destroyed. Compatibility processing: Perform compatibility tests on mainstream browsers and older versions to ensure that the rich text editor Wangeditor functions normally.

[0014] An electronic device comprising: a memory and at least one processor; Wherein, the memory stores a computer program; The at least one processor executes the computer program stored in the memory, so that the at least one processor performs the above-mentioned method for SSE streaming output of editing data.

[0015] A computer-readable storage medium stores a computer program, wherein the computer program can be executed by a processor to implement the above-mentioned method for SSE streaming output of edited data.

[0016] The method, device, and medium for SSE streaming output of edited data of the present invention have the following advantages: (1) This invention uses the Vue.js framework in combination with the Wangeditor component to implement the output and editing of text data content. Users input text-related information, such as type, time, unit or person, and subject, to interact with the backend server. The text content is displayed and edited in a rich text editor, providing rich text formatting, typesetting, downloading, and exporting functions. This breaks through the limitations of traditional text processing and greatly improves data interaction and user experience. (2) This invention utilizes the responsiveness principle of Vue.js and combines it with the third-party component library Wangeditor to provide rich text editing, solving the problems of data interaction, performance, and user experience in traditional text writing, ensuring the convenience and real-time nature of data interaction and improving the user experience; (3) The present invention optimizes data transmission methods through streaming output technology, reduces the impact of data transmission on system performance, improves page response speed, reduces resource usage, and takes into account performance while ensuring functional implementation, thereby optimizing overall performance; (4) The form of the present invention accurately collects user input data and sends it to the server. The server returns the generated text data in a streaming manner, and the rich text editor performs display and subsequent editing, download and export processing. The data interaction throughout the process is stable and smooth, greatly improving the data interaction capability; (5) The present invention uses streaming output to allow users to perceive operation results and make adjustments in real time, which conforms to user operating habits and brings a smoother and more efficient user experience. In addition, the integrated Wangeditor component allows users to complete text-related information input, text generation, and subsequent editing operations on the same page, simplifying the operation process and improving ease of use and user experience. (6) The digital editing process of the present invention supports version records, which solves the problem of traditional text modification history being difficult to track. Generated text can be downloaded and exported locally to form text templates, improving the efficiency of processing similar texts and enhancing collaboration efficiency. (7) The present invention uses the componentization feature of Vue.js to encapsulate text generation and rich text editor into reusable components, making them easy to use in different projects and applications; (8) The present invention aims to provide a powerful, efficient and user-friendly text writing solution for Web application development to handle text generation and subsequent editing and downloading, and ensure seamless data interaction with the back-end server, which will provide significant value and convenience to various industries that require such functions. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The present invention will be further described below with reference to the accompanying drawings.

[0018] Attachment Figure 1 A flowchart of a method for editing data for SSE streaming output. DETAILED DESCRIPTION

[0019] The method, device and medium for SSE streaming output of edited data of the present invention are described in detail below with reference to the accompanying drawings and specific embodiments.

[0020] Example 1: As shown in the attached Figure 1 As shown, this embodiment provides a method for SSE streaming output of edited data, which is specifically as follows: S1. Design Vue.js components; S2. Initialize and configure the rich text editor Wangeditor; S3, uses SSE (Server-Sent Events) technology to interact with the backend server in streaming data, receiving and rendering text data to the rich text editor Wangeditor in real time; S4, state management and interaction optimization; S5. Performance optimization and debugging.

[0021] The Vue.js component in step S1 of this embodiment includes templates, scripts, and styles.

[0022] The template includes a form, a rich text editor Wangeditor, and editor function buttons; the form is used to collect text-related information such as text type, time, unit or person, and topic entered by the user; the rich text editor is used to display and edit the streaming output text content; the editor function buttons are used to trigger regeneration, interrupt the current generation process, and download the edited text content.

[0023] The script defines data objects and methods in the .vue file through JavaScript, which are used for data status and user behavior operations.

[0024] The data object adopts a combined API in the Vue framework, which creates responsive data by introducing the ref function; the data object includes form data entity, interface status information and list display data; among them, the form data entity is used to store various variable data entered by the user; among them, the variable data includes text content, options and switch status; the interface status information is used to record the current loading status of the page, verification results and error information interaction status; the list display data includes data collection and related paging parameters, sorting submission information.

[0025] Methods refer to defining functions in the Vue framework's methods to implement different interactive effects on the page. Methods include form processing logic and business processing logic. Form processing logic includes data submission, variable mandatory verification, and interaction control. Data submission refers to sending form data to the server via HTTP requests (such as axios or fetch) using the POST / PUT method. Form data is transmitted in JSON format or FormData (file upload) format. Anti-duplicate submission is processed during submission (such as disabling buttons). Variable mandatory verification refers to using a front-end validation library (such as Element UI's form validation) or HTML5's native required attribute to perform mandatory verification. If the verification fails, submission is prevented and the user is prompted (such as error highlighting). Interaction control refers to dynamically adjusting form behavior based on user operations (such as input and selection), such as linked selection and conditional display / hiding (such as displaying the "Company Name" input box only when "Enterprise User" is selected). Business processing logic implements specific rules or calculations based on business needs, as follows: ① Different buttons trigger different services: the "Submit for Review" button calls submit(); ②Data calculation and conversion: total order price = unit price x quantity + shipping fee, using computed properties for real-time updates; using tool functions for date formatting and amount decimal fractions; ③Permission control: Dynamically display or hide function buttons based on user roles (such as administrator or ordinary user) (v-if="user.role==='admin'"); ④ Status logic: When the order status changes ("Awaiting Payment" → "Shipped" → "Completed"), the operation is allowed only after the current status is verified; otherwise, the operation cannot be performed.

[0026] Styles are used to define the appearance and layout of Vue.js components such as forms, rich text editors (wangeditor), and editor function buttons (buttons) through CSS and LESS programming languages. This is the visual layout of the page presented in the browser, ensuring that the visual effect of the components is consistent with the overall design of the application.

[0027] The initialization and configuration of the rich text editor Wangeditor in step S1 of this embodiment are as follows: S201. Initialize the rich text editor Wangeditor: After the Vue.js component page is loaded, mount the rich text editor instance; wherein, after the Vue.js component page is loaded, the component structure of the rich text editor Wangeditor mounted includes an outer container editor-container and an inner editor-wrapper; the outer container editor-container is used to wrap the entire rich text editor Wangeditor; the inner editor-wrapper includes <toolbar>Rich text editor toolbar and <editor>Editing area; <toolbar>The toolbar of the rich text editor is used to bind the editor instance editorRef and the configuration item toolbarConfig. The editor instance editorRef stores the responsive reference of the editor instance and sets the mode to simple (simple mode), indicating that the rich text editor Wangeditor uses a streamlined toolbar function. <editor>The editing area is used to bind the configuration editorConfig and the bidirectional data variable valueHtml, and listen to the editor initialization completion event through @onCreated; S202. Configure the toolbar of the rich text editor Wangeditor to retain common text formatting and typesetting options: set the toolbarKeys keyword in the variable toolbarConfig, and set the keys of the common functions of the rich text editor Wangeditor in the toolbarKey keyword; the keys of the common functions of the rich text editor Wangeditor include basic styles, style clearing, text attributes, paragraph formatting, alignment, line height and title, and list functions; basic styles include bold, underline, italic, and through; style clearing is clearStyle; text attributes include color, fontSize, and fontFamily; paragraph formatting includes indent and delIndent; alignment includes justifyLeft, justifyRight, justifyCenter, and justifyJustify; line height and title include lineHeight and headerSelect; and the list function is numberedList. S203. Set the height of the rich text editor Wangeditor: Use the selector editor-container to set the height of the rich text editor Wangeditor. The height is set to 75% of the entire screen to adapt to the page layout and ensure responsive design compatibility with different devices.

[0028] This example introduces the @wangeditor / editor style and Vue components (Editor + Toolbar).

[0029] In this embodiment, the rich text editor Wangeditor is initialized through the callback function handleCreated(), specifically: assigning the passed editor instance to editorRef; calling the adjustEditorHeight() function to adjust the height of the rich text editor Wangeditor; then listening to the resize event of the page window to dynamically adjust the height of the rich text editor Wangeditor; Among them, adjustEditorHeight() is used to dynamically set the height according to the window <editor>The height of the editing area, specifically: obtained through editorRef.value.getEditableContainer() <editor>The container of the editing area is calculated by window height - 190px (leaving space for the top toolbar and other elements) <editor>The height of the editing area, and finally assign the calculated height to the style.height of the rich text editor; When the rich text editor Wangeditor is destroyed, the editor instance is destroyed and the resize event listener is removed through onBeforeUnmounted when the page is destroyed.

[0030] The streaming data interaction with the backend server through the SSE technology in step S3 of this embodiment is specifically as follows: S301. Initiate an SSE request through axios, set the response type to streaming, receive data blocks in real time, and dynamically append them to the rich text editor Wangeditor. S302: Collect the form data filled in by the user, verify the required fields of the form and submit the data, disable the Generate button to prevent repeated submission, and clear the content of the rich text editor Wangeditor to prepare to receive the streaming new data returned by the monitoring interface; S303, interrupt the request through AbortController and call abort() when clicking to stop generating; S304: Reuse the current form data when regenerating and repeat the streaming request process.

[0031] The editor function buttons in this embodiment include a regenerate button, a stop generate button, and a local download button; Regenerate button: re-initiates a streaming request based on the current form data and clears the existing rich text editor Wangeditor content; Stop generating button: It is only displayed during the request process and will interrupt the current request after clicking it; Local download button: Gets the content of the rich text editor Wangeditor, converts it into a Blob object, uses URL.createObjectURL to create a download link, and triggers the browser to download.

[0032] The state management and interaction optimization in step S4 of this embodiment are specifically as follows: S401, disable state of dynamic control button to prevent repeated operation; S402: During the generation process, a loading status prompt is displayed to indicate the loading status; S403: Provide error handling mechanism and user-friendly prompts; S404. Ensure compatibility of components on mobile and desktop through responsive design.

[0033] The performance optimization and debugging in step S5 of this embodiment are specifically as follows: S501. Lifecycle management: In the Vue.js component, destroy the editor instance through onBeforeUnmounted when the page is destroyed to avoid memory leaks. The editor instance includes the rich text editor instance when the page is created and the editor instance when the page is destroyed. S502. Compatibility processing: Perform compatibility tests on mainstream browsers and older versions to ensure that the rich text editor Wangeditor functions normally.

[0034] Embodiment 2: This embodiment also provides an electronic device, including: a memory and a processor; wherein the memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory, so that the processor executes the method for SSE streaming output of edited data in any embodiment of the present invention.

[0035] The processor may be a central processing unit (CPU), other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor may be a microprocessor or any conventional processor, etc.

[0036] The memory can be used to store computer programs and / or modules. The processor implements various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory and accessing the data stored in the memory. The memory can mainly include a program storage area and a data storage area. The program storage area can store the operating system and at least one application required for the function; the data storage area can store data generated based on the use of the terminal. In addition, the memory can also include high-speed random access memory and non-volatile memory, such as a hard disk, internal memory, a plug-in hard disk, a smart card (SMC), a secure digital (SD) card, a flash memory card, at least one disk storage device, a flash memory device, or other volatile solid-state memory devices.

[0037] Embodiment 3: This embodiment further provides a computer-readable storage medium storing a plurality of instructions. The instructions are loaded by a processor, causing the processor to execute the method for SSE streaming output of edited data according to any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided. The storage medium stores software program code that implements the functions of any of the above embodiments, and the computer (or CPU or MPU) of the system or device can read and execute the program code stored in the storage medium.

[0038] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute part of the present invention.

[0039] Examples of storage media for providing program code include floppy disks, hard disks, magneto-optical disks, optical disks (e.g., CD-ROMs, CD-Rs, CD-RWs, DVD-ROMs, DVD-RWs, DVD+RWs), magnetic tapes, non-volatile memory cards, and ROMs. Alternatively, the program code may be downloaded from a server computer via a communications network.

[0040] In addition, it should be clear that the functions of any of the above embodiments can be achieved not only by executing the program code read by the computer, but also by enabling the operating system operating on the computer to complete part or all of the actual operations based on the instructions of the program code.

[0041] In addition, it can be understood that the program code read from the storage medium is written into the memory provided in the expansion board inserted into the computer or into the memory provided in the expansion unit connected to the computer, and then based on the instructions of the program code, the CPU installed on the expansion board or expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above embodiments.

[0042] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.< / editor> < / editor> < / editor> < / editor> < / toolbar> < / editor> < / toolbar> < / editor> < / editor> < / editor> < / editor> < / toolbar> < / editor> < / toolbar>

Claims

1. A method for SSE streaming output of edited data, characterized in that: The method is as follows: Design Vue.js components; Vue.js components include templates, scripts, and styles; templates include forms, rich text editor Wangeditor, and editor function buttons; forms are used to collect text-related information such as text type, time, unit, person, and subject input by users; rich text editors are used to display and edit streaming output text content; editor function buttons are used to trigger regeneration, interrupt the current generation process, and download edited text content; scripts define data objects and methods using JavaScript in .vue files for data status and user behavior operations; styles are used to define the appearance and layout of forms, rich text editor Wangeditor, and editor function buttons using CSS and LESS programming languages; Initialize and configure the rich text editor Wangeditor; Use SSE technology to interact with the backend server in streaming data, receive and render text data to the rich text editor Wangeditor in real time; State management and interaction optimization; Performance optimization and debugging.

2. The method for SSE streaming output of edited data according to claim 1, characterized in that: The data object in the Vue framework uses a combined API, which creates responsive data by introducing the ref function; the data object includes form data entities, interface status information, and list display data; The form data entity is used to store various variable data entered by the user; the variable data includes text content, selection items, and switch status; Interface status information is used to record the current loading status of the page, verification results, and interaction status of error information; The list display data includes data collection and related paging parameters, sorting submission information.

3. The method for SSE streaming output of edited data according to claim 1, characterized in that: Methods refer to the functions defined in the Vue framework to achieve different interactive effects on the page; methods include form processing logic and business processing logic; The form processing logic includes data submission, required variable verification, and interactive control. Data submission refers to sending form data to the server via HTTP request using the POST / PUT method. Form data is transmitted in JSON or FormData format. Anti-duplicate submission is performed during submission. Required variable verification refers to using a front-end verification library or the native required attribute of HTML5 to perform required verification. If the verification fails, submission is blocked and the user is prompted. Interactive control refers to dynamically adjusting form behavior based on user operations. Business processing logic implements specific rules or calculations based on business requirements, as follows: Different buttons trigger different services: the "Submit for Review" button calls submit(); Data calculation and conversion: Total order price = unit price x quantity + shipping fee, using calculation properties for real-time updates; using tool functions for date formatting and amount decimal fractions; Permission control: dynamically display and hide function buttons based on user roles; Status logic: When the order status changes, operations are allowed only after the current status is verified; otherwise, no operations can be performed.

4. The method for SSE streaming output of edited data according to claim 1, characterized in that: Initialize and configure the rich text editor Wangeditor as follows: Initialize the rich text editor Wangeditor: After the Vue.js component page is loaded, the rich text editor instance is mounted. The component structure of the rich text editor Wangeditor mounted after the Vue.js component page is loaded includes the outer container editor-container and the inner editor-wrapper. The outer container editor-container is used to wrap the entire rich text editor Wangeditor. The inner editor-wrapper includes <toolbar>Rich text editor toolbar and <editor>Editing area; <toolbar>The toolbar of the rich text editor is used to bind the editor instance editorRef and the configuration item toolbarConfig. The editor instance editorRef stores the responsive reference of the editor instance and sets the mode to simple, indicating that the rich text editor Wangeditor uses a simplified toolbar function. <editor> The editing area is used to bind the configuration editorConfig and the bidirectional data variable valueHtml, and listen to the editor initialization completion event through @onCreated;< / editor> < / toolbar> < / editor> < / toolbar> Configure the Wangeditor toolbar to retain common text formatting and layout options: set the toolbarKeys keyword in the toolbarConfig variable and set the keys for Wangeditor's common functions in the toolbarKey keyword. The keys for Wangeditor's common functions include basic styles, style clearing, text attributes, paragraph formatting, alignment, line height and title, and list functions. Set the height of the rich text editor Wangeditor: Use the selector editor-container to set the height of the rich text editor Wangeditor to adapt to the page layout and ensure responsive design compatible with different devices.

5. The method for SSE streaming output of edited data according to claim 4, characterized in that: The rich text editor Wangeditor is initialized through the callback function handleCreated(). Specifically, the passed editor instance is assigned to editorRef; the adjustEditorHeight() function is called to adjust the height of the rich text editor Wangeditor; and the resize event of the page window is listened to to dynamically adjust the height of the rich text editor Wangeditor. Among them, adjustEditorHeight() is used to dynamically set the height according to the window <editor>The height of the editing area, specifically: obtained through editorRef.value.getEditableContainer() <editor>The container of the editing area is calculated by window height - 190px (leaving space for the top toolbar and other elements) <editor> The height of the editing area, and finally assign the calculated height to the style.height of the rich text editor;< / editor> < / editor> < / editor> When the rich text editor Wangeditor is destroyed, the editor instance is destroyed and the resize event listener is removed through onBeforeUnmounted when the page is destroyed.

6. The method for SSE streaming output of edited data according to claim 1, characterized in that: The specific details of streaming data interaction with the backend server through SSE technology are as follows: Initiate an SSE request through axios, set the response type to streaming, receive data blocks in real time, and dynamically append them to the rich text editor Wangeditor; Collect the form data filled out by the user, verify the required fields and submit the data, disable the Generate button to prevent duplicate submission, and clear the rich text editor Wangeditor content to prepare for receiving new streaming data returned by the listening interface; Interrupt the request through AbortController and call abort() when clicking to stop generating; Reuse the current form data when regenerating and repeat the streaming request process.

7. The method for SSE streaming output of edited data according to claim 1, characterized in that: Editor function buttons include regenerate button, stop generate button and local download button; Regenerate button: re-initiates a streaming request based on the current form data and clears the existing rich text editor Wangeditor content; Stop generating button: It is only displayed during the request process and will interrupt the current request after clicking it; Local download button: Gets the content of the rich text editor Wangeditor, converts it into a Blob object, uses URL.createObjectURL to create a download link, and triggers the browser to download.

8. The method for SSE streaming output of edited data according to claim 1, characterized in that: State management and interaction optimization are as follows: Dynamically control the disabled state of buttons to prevent repeated operations; During the generation process, a loading status prompt is displayed to indicate the loading status; Provide error handling mechanism and user-friendly prompts; Ensure compatibility of components on mobile and desktop through responsive design; The performance optimization and debugging are as follows: Lifecycle management: In Vue.js components, the editor instance is destroyed when the page is destroyed through onBeforeUnmounted to avoid memory leaks. The editor instance includes the rich text editor instance when the page is created and the editor instance when the page is destroyed. Compatibility processing: Perform compatibility tests on mainstream browsers and older versions to ensure that the rich text editor Wangeditor functions normally.

9. An electronic device, characterized in that: include: memory and at least one processor; Wherein, the memory stores a computer program; The at least one processor executes the computer program stored in the memory, so that the at least one processor performs the method for SSE streaming output of editing data according to any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, which can be executed by a processor to implement the method for SSE streaming output of edited data according to any one of claims 1 to 8.

Images