Webpage editing method and device, electronic equipment and storage medium

Abstract

The invention provides a webpage editing method and device, electronic equipment and a storage medium. The method comprises the following steps: in response to an editing instruction for a target webpage, analyzing the target webpage, and respectively displaying a current state, a component attribute and a component tree of the target webpage on a canvas renderer, an attribute panel and a component tree view layer according to an analysis result; in response to an editing operation for the canvas renderer, the attribute panel or the component tree view layer, converting the editing operation into a target action object in a preset format; sending the target action object to a state container of the target webpage, and updating state data of a current view layer of the target webpage to obtain latest state data of the state container; and publishing the latest state data to a subscriber through the state container, and performing at least local state updating by the subscriber according to the received latest state data to obtain the latest editing state of the target webpage. According to the method and the device, the state synchronism and the display performance of a visual webpage editing technology can be improved.

Description

Technical Field

[0001] This disclosure relates to the field of visual web page editing technology, and in particular to a web page editing method, apparatus, electronic device, and storage medium. Background Technology

[0002] Current visual web page editors typically contain multiple view layers, such as a canvas, component tree, and property panel. To achieve real-time synchronization of editing effects, existing technologies mostly employ direct event communication or two-way data binding between view layers. However, as the number of components increases and the hierarchy becomes more complex, this technology is prone to issues such as asynchronous state updates, and frequent state updates and DOM manipulations can lead to page lag, severely impacting editing efficiency and user experience. Summary of the Invention

[0003] In view of this, the purpose of this disclosure is to provide a method, apparatus, electronic device, and storage medium for editing web pages, so as to improve the state synchronization and display performance of visual web page editing technology.

[0004] In a first aspect, embodiments of this disclosure provide a method for editing a webpage. The method is applied to a display terminal, which provides a graphical user interface (GUI) displaying multiple editable view layers. Each view layer includes a canvas renderer, an attribute panel, and a component tree view layer. The method includes: responding to an editing instruction for a target webpage, parsing the target webpage; displaying the current state, component attributes, and component tree of the target webpage in the canvas renderer, the attribute panel, and the component tree view layer, respectively, based on the parsing result; responding to an editing operation for the canvas renderer, the attribute panel, or the component tree view layer, converting the editing operation into a target action object in a preset format; sending the target action object to a state container of the target webpage; updating the current state data of the view layers of the target webpage based on the target action object to obtain the latest state data of the state container; and publishing the latest state data to its subscribers through the state container, whereby the subscribers perform at least partial state updates based on the received latest state data to obtain the latest edited state of the target webpage, wherein the subscribers of the state container include at least the view layers.

[0005] Optionally, in response to an editing instruction for a target webpage, the steps of parsing the target webpage and displaying its current state, component attributes, and component tree in the canvas renderer, the attribute panel, and the component tree view layer, respectively, based on the parsing result, include: in response to an editing instruction for the target webpage, creating or loading a state container for the target webpage from a cache, wherein the state container includes the current state data of the view layer of the target webpage, the state data including at least: component tree structure data for identifying components and hierarchical relationships between components in the target webpage, component attribute configuration data, and data indicating that the currently operated component is selected in the component tree; rendering the component tree structure data and attribute configuration data in the state data through the canvas renderer, and displaying the rendering result as the current state of the target webpage in the canvas renderer; generating a hierarchical view based on the component tree structure data and the selected state data, and displaying it as the component tree view layer; loading the attribute configuration data of the corresponding component based on the selected state data, and displaying it as the component attribute of the target webpage in the attribute panel.

[0006] Optionally, the step of converting an editing operation into a target action object in a preset format in response to an editing operation on the canvas renderer, the property panel, or the component tree view layer includes: obtaining the action type corresponding to the editing operation from a preset relationship table in response to the editing operation on the canvas renderer, the property panel, or the component tree view layer; generating a serializable data object with a preset format corresponding to the editing operation according to the action type to obtain a target action object; wherein the target action object includes an identifier of the action type and at least one payload field, the payload field including necessary data describing the editing operation.

[0007] Optionally, the step of generating a serializable data object with a preset format corresponding to the editing operation, based on the action type, to obtain the target action object includes: if the editing operation is: clicking a component in the canvas renderer or the component tree view layer, then converting the editing operation into a serializable data object of the component selection action type to obtain the target action object, wherein the target action object includes an identifier of the component selection action type and an identifier of the clicked component; if the editing operation is: modifying any attribute value of a component in the attribute panel, then converting the editing operation into a serializable data object of the attribute update action type to obtain the target action object, wherein the target action object includes an identifier of the component whose attribute was modified, the name of the modified attribute, and the modified attribute value; if the editing operation is: adjusting the position or level of a component by dragging and dropping in the canvas renderer or the component tree, then converting the editing operation into a serializable data object of the structure update action type to obtain the target action object, wherein the target action object includes an identifier of the component that was adjusted, and an identifier of the parent component or sibling node order information of the adjusted component.

[0008] Optionally, the step of sending the target action object to the state container of the target webpage and updating the current state data of the view layer of the target webpage according to the target action object includes: executing corresponding state update logic on the state data currently stored in the state container and the action type of the target action object through the state update function corresponding to the state container to obtain target state data; wherein, the state container serves as the single trusted source of the editing state of the target webpage, and the state update function is a pure function; replacing the current state data stored in the state container with the target state data to obtain the latest state data of the state container.

[0009] Optionally, the step of publishing the latest state data to its subscribers through the state container, and the subscribers performing at least partial state updates based on the received latest state data to obtain the latest edit state of the target webpage, includes: publishing a state update notification to its subscribers through the state container; the subscribers of the state container responding to the state update notification and extracting a specified data segment from the latest state data of the state container through a state selector corresponding to the subscriber; comparing the specified data segment extracted by the subscriber with the corresponding data segment in the previous state data of the state container to obtain a comparison result; if the comparison result indicates that the specified data segment has changed, the corresponding subscriber executes the update logic of the internal view or state based on the extracted specified data segment to obtain the latest edit state of the target webpage.

[0010] Optionally, after the steps of sending the target action object to the state container of the target webpage, updating the current state data of the view layer of the target webpage according to the target action object, and obtaining the latest state data of the state container, the method further includes: storing the state of the state container before the update and / or the target action object into a history stack; in response to an undo or redo instruction for the target webpage in the editing state, extracting the corresponding historical state data and / or historical action object from the history stack; updating the current state data of the view layer of the target webpage through the historical state data and / or the historical action object, and obtaining the latest state data of the state container, so as to trace and roll back the editing state of the target webpage.

[0011] Secondly, embodiments of this disclosure provide a webpage editing device applied to a display terminal. The display terminal provides a graphical user interface (GUI) displaying multiple editable view layers, each view layer including a canvas renderer, an attribute panel, and a component tree view layer. The device includes: a parsing module, configured to parse the target webpage in response to an editing instruction for the target webpage, and display the current state, component attributes, and component tree of the target webpage in the canvas renderer, the attribute panel, and the component tree view layer, respectively, based on the parsing result; a conversion module, configured to convert the editing operation into a target action object of a preset format in response to an editing operation for the canvas renderer, the attribute panel, or the component tree view layer; an update module, configured to send the target action object to the state container of the target webpage, and update the current state data of the view layer of the target webpage based on the target action object to obtain the latest state data of the state container; and a publishing module, configured to publish the latest state data to its subscribers through the state container, wherein the subscribers perform at least partial state updates based on the received latest state data to obtain the latest edited state of the target webpage, wherein the subscribers of the state container include at least the view layers.

[0012] Thirdly, embodiments of this disclosure provide an electronic device, including a processor and a memory, wherein the memory stores machine-executable instructions that can be executed by the processor, and the processor executes the machine-executable instructions to implement the above-described webpage editing method.

[0013] Fourthly, embodiments of this disclosure provide a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are invoked and executed by a processor, the computer-executable instructions cause the processor to implement the aforementioned webpage editing method.

[0014] The embodiments disclosed herein bring the following beneficial effects: The aforementioned webpage editing methods, devices, electronic devices, and storage media use a state container as the single trusted source of state for all view layers. They employ a unidirectional data flow paradigm of "editing operation - action object - state update - publish / subscribe," firstly resolving the issue of state asynchrony because all views derive from the same state container. Any editing operation atomically updates the global state through centralized computation, ensuring consistency in the display of the canvas, component tree, and property panel. Secondly, they significantly improve editing performance and smoothness. The unidirectional data flow avoids redundant updates caused by complex event loops and bidirectional binding. Combined with the subscriber-side local update strategy, it greatly reduces unnecessary DOM operations and re-rendering, thereby eliminating page lag.

[0015] Other features and advantages of this disclosure will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the disclosure. The objects and other advantages of this disclosure are realized and obtained through the structures particularly pointed out in the description, claims and drawings.

[0016] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in the specific embodiments of this disclosure or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0018] Figure 1 This is a flowchart of one embodiment of the webpage editing method in this disclosure; Figure 2 A schematic diagram of a webpage editing device provided in an embodiment of this disclosure; Figure 3 This is a schematic diagram of an electronic device provided in an embodiment of the present disclosure. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0020] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in this disclosure, claims, and accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” or “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0021] The webpage editing method in this embodiment is applied to a display terminal, which provides a graphical user interface (GUI) displaying multiple editable view layers. These view layers include a canvas renderer, an attribute panel, and a component tree view layer. The canvas renderer presents the visual layout and effect of the webpage in a WYSIWYG manner; the attribute panel is an interface for configuring component attributes; and the component tree view layer displays the component relationships of the webpage in a hierarchical and structured manner. The GUI may also include other editable view layers, which are not specifically limited here.

[0022] For ease of understanding, the specific process of the embodiments of this disclosure is described below. Please refer to [link / reference]. Figure 1 One embodiment of the webpage editing method in this disclosure includes: Step S10: In response to the editing instructions for the target webpage, parse the target webpage, and display the current state, component properties, and component tree of the target webpage in the canvas renderer, property panel, and component tree view layer respectively based on the parsing results; The web page editing method provided in this disclosure can be applied to a web page editing system. This step can be performed during the initialization and state modeling stage of the web page editing system. The user can open the web page editing system through a display terminal. The display terminal displays the graphical user interface of the web page editing system. Multiple editable view layers of the web page editing system can be displayed through the graphical user interface. The view layers include a canvas renderer, an attribute panel, and a component tree view layer.

[0023] The target webpage can refer to page content defined by a structured description language, including but not limited to the Document Object Model (DOM) described by HyperText Markup Language (HTML). It can be a webpage output by the webpage editing method or webpage editing system provided in this disclosure, or a webpage generated or developed in other ways, such as an external page developed by a third-party tool or written in standard HTML. This disclosure supports editing webpages that are not natively output by the entity itself. By supporting non-natively output webpages, it has stronger industry universality.

[0024] Editing commands for the target webpage can be triggered when any information is entered into a blank view layer, when the webpage to be edited is entered / confirmed, or when the view layer has finished loading; the specific triggering method is not limited here. For triggering methods other than entering / confirming the webpage to be edited, a webpage address can be generated first as the target webpage, and then the editing command for the target webpage can be triggered. The target webpage can be a blank webpage; the specific triggering method is not limited here.

[0025] When parsing a target webpage, the original description of the target webpage can be transformed and normalized into a standardized state model that is uniformly managed in memory. The state model is used to indicate all entities (components) of the target webpage, the structural relationships (hierarchical tree) between entities, and the editable features (attributes) of each entity. Through the state model, which is the logical blueprint of the state container, it is used to define the mapping specifications of all component entities, structural relationships and editable features within the target webpage, so that any webpage can be converted into structured data that conforms to the specifications, and thus is easy to edit.

[0026] The aforementioned state model can also be used to indicate the state data for parsing a target webpage into a tree structure, where each node represents a component. The description fields corresponding to each node may include: a globally unique identifier (ID), a component type identifier (Type), a parent node reference identifier (parentId), an ordered list of child node identifiers (childrenIds), a property collection object (Props), and a metadata object (Meta, used to record editor-specific runtime states such as selected state, locked state, and visibility). When parsing a target webpage, the corresponding parser can be invoked based on the input format of the target webpage. For example, for HTML input, the DOM parser is launched. The DOM parser traverses the browser's DOM tree, identifies element tags, styles, content, and nesting relationships, and maps the components of the target webpage to nodes that conform to the above specifications based on the identification results, thereby obtaining the parsing results.

[0027] When displayed separately, the data required by the canvas renderer, property panel and component tree view layer can be extracted from the parsing results. Then, the current state of the target webpage, component properties and component tree are presented respectively through the rendering logic of the canvas renderer, property panel and component tree view layer.

[0028] Step S20: In response to an editing operation targeting the canvas renderer, property panel, or component tree view layer, convert the editing operation into a target action object in a preset format; Editing operations can be any interactive event displayed in the graphical user interface, such as clicking, typing, or dragging. For example, editing operations could be: in the properties panel, the user changes the fill color of a rectangle from red to blue using the color picker; in the canvas renderer, the user drags component A from container X and places it into container Y; or in the component tree view, the user clicks the "Login Button" node. Specific actions are not limited here.

[0029] A target action object is a structured data object used to describe interactive events that occur on a target page, rather than an object used to indicate how the view is updated. In this embodiment, by converting editing operations into target action objects in a preset format, a clear and stable interface layer is established between the messy, low-level event flow and the high-level, deterministic state change logic, providing a solid foundation for realizing the unidirectional data flow of web page editing.

[0030] The target action object may include an action type (Type) and at least one payload field. The action type is used to indicate the intent type of the editing operation. The payload field includes an object containing necessary data related to the intent of the editing operation (such as target component identifier, new value, location information, etc.). The target action object may also include metadata of the editing operation, such as the timestamp of the editing operation, operator identifier, asynchronous operation identifier, etc., which are not limited here.

[0031] Different editing operations can be pre-configured with corresponding action object templates. When responding to editing operations targeting the canvas renderer, property panel, or component tree view layer, the editing operation can be converted into a target action object using the pre-configured action object template. For example, different editing operations such as component dragging, node selection in the component tree, and property modification in the property panel can all be converted into target action objects using different action object templates.

[0032] In this implementation, user intentions that cause state changes are transformed into independent, self-describing "action" data. Changes in system state are driven by action sequences, enabling the state at any given moment to be accurately reconstructed by sequentially applying all the action objects that have occurred from the initial state. This provides a fundamental possibility for time travel debugging, operation history recording and playback. As serializable pure data, action objects can be easily persisted locally, sent to a server, or broadcast to other collaborative editing clients. This naturally provides a foundation for implementing advanced features such as undo / redo stacks, operation logs, real-time collaborative editing, and disaster recovery.

[0033] In addition, different view layers (such as the canvas renderer, component tree, and property panel) do not need to communicate directly when generating editing intents. A view layer can be replaced or modified as long as it continues to dispatch action objects in the agreed format, without affecting other parts of the system. This greatly improves the independence of the view layer and the maintainability of the system.

[0034] Step S30: Send the target action object to the state container of the target webpage. Based on the target action object, update the current view layer state data of the target webpage to obtain the latest state data of the state container. The state container is the sole and authoritative data storage center that holds the full editing state of the target webpage and is the only source of data displayed in all view layers. In this step, the state container receives and processes the target action object representing the user's intent. Through a preset calculation process, it transforms the current state into the next new state. This update process strictly adheres to the immutable data principle, meaning it does not modify any existing state data. Instead, based on the current state and the action object, it generates a completely new and complete copy of the next state data, making it the latest authoritative data held by the state container—that is, the latest state data of the state container. In this step, the state container receives the standardized target action object representing the user's intent and transforms it into a deterministic state change.

[0035] The target action object is sent to the state container of the target webpage through a global and unique dispatch function. The state container receives the target action object dispatched by the dispatch function, calls one or more predefined reduction functions, and uses the current view layer state data of the target webpage and the target action object as input parameters to calculate the latest state data of the state container.

[0036] A reduction function, also known as a state update function, is a pure function. A pure function is a function that always returns the same output under the same input and does not produce any side effects. During the update of the state container, no storage space for the current state data is directly modified. Instead, the latest state data is generated by creating new copies. To optimize performance, the system only rebuilds the reference paths affected by the action object when creating the latest state data.

[0037] For example, if the target action object intends to update the color attribute of a terminal node in the component tree, copies of that node and all its parent nodes are created from the bottom up. For other unaffected component branches, the new state data will directly reference (share) the memory objects in the old state, rather than making a full copy. This differential referencing strategy greatly reduces memory overhead while ensuring state immutability.

[0038] In one implementation, the latest state data of the target action object or state container can also be sent to the collaboration server, which then broadcasts the latest state data of the target action object or state container to other display terminals. After receiving the data, the other display terminals replay the operation using the same reduction logic, thereby enabling real-time collaborative editing by multiple users and across terminals.

[0039] Step S40: Publish the latest state data to its subscribers through the state container. The subscribers perform at least partial state updates based on the received latest state data to obtain the latest edit state of the target webpage. The subscribers of the state container include at least the view layer.

[0040] After responding to editing instructions for the target webpage, parsing the target webpage, and displaying the current state, component properties, and component tree of the target webpage in the canvas renderer, property panel, and component tree view layer respectively based on the parsing results, the canvas renderer, property panel, and component tree view layer can register with the state container and become subscribers of the state container.

[0041] When the state container updates its state data, a pre-built publish-subscribe mechanism publishes the latest state data to all subscribers. Subscribers only update their state based on the data they subscribe to, thus forming a unidirectional flow of data and improving the controllability and state synchronization of web page editing. Subscribers can include all modules that rely on state data for UI presentation or logic processing. After initialization and display are completed in step S10, the canvas renderer, property panel, and component tree view layer, as subscribers, register their listening interfaces with the state container. This registration mechanism ensures that the state container can trigger the perception logic of each view layer through a preset callback sequence or message bus at the very first moment of state evolution.

[0042] After receiving the latest status data, subscribers can extract data related to their own status update from the latest status data, and then perform at least a partial status update based on the extracted data. After extracting the data related to their own status update, they can also perform difference detection. Only when the difference detection result indicates that the corresponding view layer has changed its state will the status update be performed, thereby obtaining the latest editing state of the target webpage.

[0043] The latest edit state of the target webpage, including the latest edit state of the aforementioned view layers (i.e., the latest edit states of the canvas renderer, property panel, and component tree view layers), represents the latest state of the target webpage while it is editable, and is the result of multi-dimensional view synchronization. Specifically: the canvas renderer displays component style changes, position shifts, or structural additions / removals in real time, mapping them to the latest visual effects; the property panel updates control values ​​in real time, ensuring that input boxes and sliders within the panel strictly correspond to the actual attributes of the components; and the component tree view layer synchronously updates the highlight status, hierarchical collapsing relationships, or sorting positions of nodes. These three elements together constitute the final consistent appearance of the target webpage at the current timestamp.

[0044] In this implementation, the publish-subscribe pattern completely decouples the state container from subscribers, as well as subscribers from each other. The state container doesn't need to know which subscribers are there or how they work; subscribers only need to know how to extract the data they need from the state. This loosely coupled architecture allows each view layer (canvas, tree, panel) to be developed, tested, optimized, and even replaced independently, as long as they adhere to the subscription protocol. They can be seamlessly integrated into the system, greatly improving team collaboration efficiency and system maintainability in large projects.

[0045] The webpage editing method provided by the above implementation uses the state container as the single trusted source of all view layer states and adopts a unidirectional data flow paradigm of "editing operation - action object - state update - publish / subscribe". First, it solves the problem of state asynchrony because all views are derived from the same state container. Any editing operation atomically updates the global state through centralized computation, ensuring the display consistency of the canvas, component tree, and property panel. Second, it significantly improves editing performance and smoothness. The unidirectional data flow avoids redundant updates caused by complex event loops and bidirectional binding. Combined with the local update strategy on the subscriber side, it greatly reduces unnecessary DOM operations and re-rendering, thereby eliminating page lag.

[0046] Next, we will explain the specific methods for editing web pages.

[0047] In one implementation, the steps of parsing the target webpage in response to an editing instruction for the target webpage, and displaying the current state, component attributes, and component tree of the target webpage in a canvas renderer, an attribute panel, and a component tree view layer respectively based on the parsing result, include: creating or loading a state container of the target webpage from a cache in response to an editing instruction for the target webpage, wherein the state container includes state data of the current view layer of the target webpage, and the state data includes at least: component tree structure data for identifying components in the target webpage and the hierarchical relationship between components, component attribute configuration data, and data indicating that the currently operated component is in a selected state in the component tree; rendering the component tree structure data and attribute configuration data in the state data through a canvas renderer, and displaying the rendering result as the current state of the target webpage in the canvas renderer; generating a hierarchical view based on the component tree structure data and the selected state data, and displaying it as the component tree in the component tree view layer; loading the attribute configuration data of the corresponding component based on the selected state data, and displaying it as the component attributes of the target webpage in the attribute panel.

[0048] After the editing process starts, space can be dynamically allocated in memory to build a brand new state management instance based on the editing instruction context, in order to create the state container of the target webpage, or to retrieve historical state snapshots from non-volatile storage (such as Local Storage, IndexedDB) and restore them to memory, in order to load the overall container of the target webpage from the cache.

[0049] For example, when a user clicks "New Page", the system calls the constructor to initialize a State object containing an empty root node as a state container; or, if a user opens the editor after disconnecting from the network and restarts, and detects "unsaved draft" data in the local cache, the system loads and restores the previous editing progress through the cache.

[0050] Based on the parsing results, when displaying the current state of the target webpage in the canvas renderer, a lightweight JavaScript object tree (virtual DOM) can be generated first based on the component tree structure data in the state data. Style parameters are extracted from the attribute configuration data in the state data and injected into the corresponding nodes. Then, the virtual DOM is mapped to the physical display terminal through a unified patching algorithm, so that the canvas renderer can display the current state of the target webpage.

[0051] When displaying the component tree of the target webpage in the component tree view based on the parsing results, the component tree structure data can be scanned. For each nested layer discovered, a tree node with collapse / expand functionality is generated in the graphical user interface. This view layer monitors the selected state data in real time. Once the data changes, the tree node corresponding to the manipulated component is highlighted (e.g., the background color changes to blue) through CSS pseudo-classes or state-driven style switching, thus achieving structural-level positioning.

[0052] When displaying the component properties of the target webpage in the property panel based on the parsing results, you can select the component ID in the status data as the index and match it in the global dictionary of the property configuration data. After a successful match, the panel calls the corresponding property editor template based on the component type (Type) (such as loading a filter adjuster for image components and a font adjuster for text components) and presents the corresponding component properties.

[0053] In this implementation, the content displayed in the view layer is also loaded from the state container, representing a unidirectional data flow. By encapsulating the component structure, component attributes, and interactive selection states within the same state container, the three originally independent view layers (canvas, attributes, and tree) share a common logical baseline, avoiding the common logical desynchronization issues in traditional development, such as "canvas A is selected, but the attribute panel still displays B." Furthermore, by using the state container as a single data source, the system can perform batch rendering during initialization, avoiding the performance overhead caused by parsing webpage content multiple times, and ensuring the responsiveness of large and complex webpages during loading.

[0054] In one implementation, the step of converting an editing operation into a target action object of a preset format in response to an editing operation on a canvas renderer, property panel, or component tree view layer includes: obtaining the action type corresponding to the editing operation from a preset relationship table in response to the editing operation on the canvas renderer, property panel, or component tree view layer; generating a serializable data object of a preset format corresponding to the editing operation according to the action type to obtain the target action object; wherein the target action object includes an identifier of the action type and at least one payload field, the payload field including necessary data describing the editing operation.

[0055] A set of mapping rules is pre-maintained in memory to convert discrete low-level interaction events into abstract instructions (Action Types) with business semantics; this is the preset relationship mapping table. The preset relationship table can be a configuration mapping in JSON format, such as mapping the "onDragStop" event on the canvas to the "MOVE_COMPONENT" action type; mapping the "onChange" event entered in the property panel to the "SET_PROP" action type, and so on. The specific mapping is not limited here.

[0056] Based on different action types, the data to be extracted from the editing operation can be determined. This extracted data is used as a payload field, merged with the action type identifier, and encapsulated into a serializable data object with a preset format, thus obtaining the target action object. The preset-formatted serializable data object can be a data structure that does not contain circular references, functions, or non-copyable memory references, and can be directly converted into a string stream (such as a JSON string) for transmission or storage. Specifically, preset action creators can be called to generate serializable data objects with preset formats corresponding to the editing operation.

[0057] Because the generated target action object is serializable, it can be synchronized to the browser's persistent storage space (such as LocalStorage) before being sent to the state container via middleware. This allows the user to restore their current editing state by replaying these serializable action objects when the page is unexpectedly refreshed.

[0058] In one implementation, the step of generating a serializable data object with a preset format corresponding to an editing operation, based on the action type, to obtain a target action object includes: if the editing operation is: clicking a component in the canvas renderer or component tree view layer, then the editing operation is converted into a serializable data object of the component selection action type to obtain the target action object, wherein the target action object includes an identifier of the component selection action type and an identifier of the clicked component; if the editing operation is: modifying any attribute value of a component in the attribute panel, then the editing operation is converted into a serializable data object of the attribute update action type to obtain the target action object, wherein the target action object includes an identifier of the component whose attribute was modified, the name of the modified attribute, and the modified attribute value; if the editing operation is: adjusting the position or level of a component by dragging in the canvas renderer or component tree, then the editing operation is converted into a serializable data object of the structure update action type to obtain the target action object, wherein the target action object includes an identifier of the component that was adjusted, and an identifier of the parent component or sibling node order information of the adjusted component.

[0059] If the editing operation involves a user clicking on a component across different view layers (canvas or component tree), it can be uniformly mapped to a target action object representing a state change intent, used to synchronously update the identifier of the "currently active object" in the system. Upon receiving this target action object, the state container only needs to update the selected component field (selectedId) in the global state.

[0060] If the editing operation involves the user modifying the component's property value in the property panel, then the numerical changes generated by various UI controls (such as input boxes, switches, and sliders) in the property panel can be converted into update instructions for specific properties of specific components, which can then be used as target action objects.

[0061] If the editing operation involves the user dragging and dropping within the canvas renderer or component tree to adjust the position or hierarchy of a component, then for the drag operation, the real-time coordinates or DOM index at the time of component release can be calculated, converted into hierarchical information in the state model, and then a target action object can be generated. This action object contains not only the identifier of the moved component but also the identifier of the target parent component and the index of sibling nodes used to determine the order. Based on this target action object, the state container can reconstruct the local tree structure reference in memory.

[0062] In one implementation, the step of sending a target action object to the state container of the target webpage and updating the current view layer state data of the target webpage based on the target action object includes: executing corresponding state update logic on the state data currently stored in the state container and the action type of the target action object through the state update function corresponding to the state container to obtain target state data; wherein, the state container serves as the single trusted source of the editing state of the target webpage, and the state update function is a pure function; and replacing the current state data stored in the state container with the target state data to obtain the latest state data of the state container.

[0063] The state container serves as the single trusted source of the target webpage's editing state, meaning that all view layers must read data from the state container. Each view layer cannot run and maintain independent business logic states, thus physically eliminating the possibility of synchronization errors between multiple copies. View layers no longer need to communicate with each other; they only need to follow the update logic of the state container, greatly simplifying the logical topology of complex front-end applications.

[0064] A state update function is a pure function that follows strict deterministic logic during execution: given the same input (current state data and target action object), it only produces the same output (target state data) and does not produce side effects such as modification of external variables, network requests, or random number generation.

[0065] As a pure function, the state update function only needs to store the latest state data generated each time into a linear stack. When the user clicks to undo, the state container only needs to replace the current reference with the previously stored state object in the stack. Since there are no side effects, the page can be completely restored to the state at a historical moment.

[0066] After the state update logic has finished executing and the target state data has been obtained, the state container does not modify the original data object. Instead, it can directly replace the current internal reference of the state container with the newly generated target state data through pointer operations. This replacement operation is atomic in a single-threaded JavaScript environment, ensuring that the state captured by all view layers is complete and consistent at the moment of replacement.

[0067] In one implementation, the step of publishing the latest state data to its subscribers through a state container, and the subscribers performing at least partial state updates based on the received latest state data to obtain the latest edit state of the target webpage includes: publishing a state update notification to its subscribers through the state container; the subscribers of the state container responding to the state update notification and extracting a specified data fragment from the latest state data of the state container through a state selector corresponding to the subscriber; comparing the specified data fragment extracted by the subscriber with the corresponding data fragment in the previous state data of the state container to obtain a comparison result; if the comparison result indicates that the specified data fragment has changed, the corresponding subscriber executes the update logic of the internal view or state based on the extracted specified data fragment to obtain the latest edit state of the target webpage.

[0068] Subscribers (such as view layers) do not directly process all state data. Instead, they extract local data related to their rendering logic from the latest state data through specific filtering logic (such as state selectors), and then perform reference comparison or value comparison on the corresponding data fragments in the old and new state snapshots to obtain the comparison results.

[0069] The comparison result can be a Boolean value. For example, if a user changes the color of component A, for the component tree view layer that subscribes to the component tree structure, the extracted data fragment (structure tree) reference remains unchanged, so the comparison result for this view layer is "no change"; for the canvas renderer, the extracted component A style fragment reference has changed, so the comparison result for this view layer is "changed".

[0070] In this implementation, for subscribers whose status has changed, the update logic of their internal view or state can be invoked based on the specified extracted data fragment. This enables local state updates, with different subscribers updating synchronously to obtain the latest edit status of the target webpage. This on-demand update mode not only reduces the computational burden on the browser but also avoids memory usage fluctuations caused by frequent execution of useless logic, thus improving the overall stability of the system.

[0071] In one implementation, after sending the target action object to the state container of the target webpage, updating the current view layer state data of the target webpage based on the target action object, and obtaining the latest state data of the state container, the method further includes: storing the state of the state container before the update and / or the target action object into a history stack; in response to an undo or redo instruction for the target webpage in the editing state, retrieving the corresponding historical state data and / or historical action object from the history stack; updating the current view layer state data of the target webpage using the historical state data and / or historical action object, and obtaining the latest state data of the state container, so as to trace and roll back the editing state of the target webpage.

[0072] The history stack is a linear data structure maintained in memory to sequentially store each atomic change step in the page editing process. It saves the page's timeline state by recording snapshots or change command streams before the change. The history stack can include two inverse stacks: the Undo Stack and the Redo Stack. For example, when a user performs a "move component" operation, a snapshot of the state before the operation is stored on the Undo Stack, while the Redo Stack is cleared.

[0073] After the state container has been updated (i.e., the latest state data is obtained), the state data before the update can be stored in the undo stack as historical state data. When an undo command is received, the historical state data is popped from the top of the undo stack, and the replacement logic is directly called to set it as the latest data of the current state container. This reference-based replacement operation is extremely fast and can instantly restore the view state of the entire page.

[0074] When a user triggers a redo command, the corresponding historical action object can be retrieved from the redo stack. This historical action object is then resent to the state update function via a state container, and the target state is recalculated as the latest state data for the state container. Since this process does not involve direct manipulation of the underlying UI, but only data flow and calculation, the redo operation can maintain pixel-level consistency with the user's previous manual operations.

[0075] In this implementation, by capturing the editing state in real time through the history stack, users can freely try different layout adjustments or styles, and return to any historical point at any time through the traceback and rollback functions, greatly improving creative freedom.

[0076] For the corresponding method embodiments described above, see [link to relevant documentation]. Figure 2 The diagram illustrates a webpage editing device applied to a display terminal. The display terminal provides a graphical user interface (GUI) displaying multiple editable view layers, including a canvas renderer, an attribute panel, and a component tree view layer. The device includes: a parsing module 22, configured to parse the target webpage in response to editing instructions, and display the current state, component attributes, and component tree of the target webpage in the canvas renderer, attribute panel, and component tree view layer, respectively, based on the parsing results; and a conversion module 24, configured to convert the target webpage in response to editing instructions in the canvas renderer, attribute panel, or component tree view layer. The editing operation of the tree view layer is converted into a target action object in a preset format; the update module 26 is used to send the target action object to the state container of the target webpage, and update the current state data of the view layer of the target webpage according to the target action object to obtain the latest state data of the state container; the publishing module 28 is used to publish the latest state data to its subscribers through the state container, and the subscribers perform at least partial state updates according to the received latest state data to obtain the latest editing state of the target webpage, wherein the subscribers of the state container include at least the view layer.

[0077] The aforementioned webpage editing mechanism uses the state container as the single trusted source of all view layer states and adopts a unidirectional data flow paradigm of "editing operation - action object - state update - publish / subscribe". This first solves the problem of state asynchrony because all views are derived from the same state container, and any editing operation atomically updates the global state through centralized computation, ensuring the consistency of display across the canvas, component tree, and property panel. Second, it significantly improves editing performance and smoothness. The unidirectional data flow avoids redundant updates caused by complex event loops and bidirectional binding. Combined with the local update strategy on the subscriber side, it greatly reduces unnecessary DOM operations and re-rendering, thereby eliminating page lag.

[0078] Optionally, the parsing module 22 is specifically used to: in response to an editing instruction for the target webpage, create or load a state container for the target webpage from a cache, wherein the state container includes state data of the current view layer of the target webpage, and the state data includes at least: component tree structure data for identifying components and hierarchical relationships between components in the target webpage, component attribute configuration data, and data indicating that the currently operated component is selected in the component tree; render the component tree structure data and attribute configuration data in the state data through the canvas renderer, and display the rendering result as the current state of the target webpage in the canvas renderer; generate a hierarchical view based on the component tree structure data and the selected state data, and display it as the component tree in the component tree view layer; load the attribute configuration data of the corresponding component based on the selected state data, and display it as the component attribute of the target webpage in the attribute panel.

[0079] Optionally, the conversion module 24 includes: an acquisition unit, configured to acquire the action type corresponding to the editing operation from a preset relationship table in response to an editing operation on the canvas renderer, the attribute panel, or the component tree view layer; and a generation unit, configured to generate a serializable data object with a preset format corresponding to the editing operation based on the action type, thereby obtaining a target action object; wherein the target action object includes an identifier of the action type and at least one payload field, and the payload field includes necessary data describing the editing operation.

[0080] Optionally, the above-mentioned generation unit is specifically used for: if the editing operation is: clicking a component in the canvas renderer or the component tree view layer, then converting the editing operation into a serializable data object of the component selection action type to obtain a target action object, wherein the target action object includes an identifier of the component selection action type and an identifier of the clicked component; if the editing operation is: modifying any attribute value of a component in the attribute panel, then converting the editing operation into a serializable data object of the attribute update action type to obtain a target action object, wherein the target action object includes an identifier of the component whose attribute was modified, the name of the modified attribute, and the modified attribute value; if the editing operation is: adjusting the position or level of a component by dragging in the canvas renderer or the component tree, then converting the editing operation into a serializable data object of the structure update action type to obtain a target action object, wherein the target action object includes an identifier of the component that was adjusted, and the identifier of the parent component or the sibling node order information of the adjusted component.

[0081] Optionally, the update module 26 is specifically used to: execute the corresponding state update logic on the state data currently stored in the state container and the action type of the target action object through the state update function corresponding to the state container to obtain target state data; wherein, the state container serves as the single trusted source of the target webpage editing state, and the state update function is a pure function; and replace the state data currently stored in the state container with the target state data to obtain the latest state data of the state container.

[0082] Optionally, the publishing module 28 is specifically used for: publishing a status update notification to its subscribers through the status container; the subscribers of the status container respond to the status update notification and extract a specified data segment from the latest status data of the status container through the status selector corresponding to the subscriber; comparing the specified data segment extracted by the subscriber with the corresponding data segment in the previous status data of the status container to obtain a comparison result; if the comparison result indicates that the specified data segment has changed, the corresponding subscriber executes the update logic of the internal view or status according to the extracted specified data segment to obtain the latest editing status of the target webpage.

[0083] Optionally, the above apparatus further includes: a storage module, used to store the state of the state container before the update and / or the target action object into a history stack; an extraction module, used to extract the corresponding historical state data and / or historical action object from the history stack in response to an undo or redo instruction for the target webpage in the editing state; and a retracing module, used to update the current state data of the view layer of the target webpage using the historical state data and / or the historical action object, to obtain the latest state data of the state container, so as to trace and roll back the editing state of the target webpage.

[0084] This embodiment also provides an electronic device, including a processor and a memory. The memory stores machine-executable instructions that can be executed by the processor. The processor executes the machine-executable instructions to implement the above-described webpage editing method. This electronic device can be a server or a terminal device.

[0085] See Figure 3 As shown, the electronic device includes a processor 100 and a memory 101. The memory 101 stores machine-executable instructions that can be executed by the processor 100. The processor 100 executes the machine-executable instructions to implement the above-mentioned webpage editing method.

[0086] Furthermore, Figure 3 The electronic device shown also includes a bus 102 and a communication interface 103, with the processor 100, the communication interface 103 and the memory 101 connected via the bus 102.

[0087] The memory 101 may include high-speed random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 103 (which can be wired or wireless), such as the Internet, wide area network, local area network, metropolitan area network, etc. The bus 102 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 3 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0088] The processor 100 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of the processor 100 or by instructions in software form. The processor 100 may be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this disclosure. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this disclosure can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a readily available storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 101, and the processor 100 reads the information from memory 101 and, in conjunction with its hardware, completes the steps of the method described in the foregoing embodiments.

[0089] This embodiment also provides a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are invoked and executed by a processor, the computer-executable instructions cause the processor to implement the above-described webpage editing method.

[0090] The computer program products of the web page editing method, apparatus, electronic device and storage medium provided in the embodiments of this disclosure include a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the methods described in the preceding method embodiments. For specific implementation, please refer to the method embodiments, which will not be repeated here.

[0091] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system and apparatus described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0092] Furthermore, in the description of the embodiments of this disclosure, unless otherwise expressly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this disclosure based on the specific circumstances.

[0093] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0094] In the description of this disclosure, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings, and are only for the convenience of describing this disclosure and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this disclosure. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0095] Finally, it should be noted that the above embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A method for editing a webpage, characterized in that, The method is applied to a display terminal, which provides a graphical user interface (GUI) displaying multiple editable view layers, including a canvas renderer, an attribute panel, and a component tree view layer. The method includes: In response to an editing command for a target webpage, the target webpage is parsed, and the current state, component properties, and component tree of the target webpage are displayed in the canvas renderer, the attribute panel, and the component tree view layer, respectively, based on the parsing results. In response to an editing operation on the canvas renderer, the properties panel, or the component tree view layer, the editing operation is converted into a target action object in a preset format; The target action object is sent to the state container of the target webpage, and the current state data of the view layer of the target webpage is updated according to the target action object to obtain the latest state data of the state container; The latest state data is published to its subscribers through the state container. The subscribers perform at least partial state updates based on the received latest state data to obtain the latest edit state of the target webpage. The subscribers of the state container include at least the view layer.

2. The method according to claim 1, characterized in that, The steps of responding to editing instructions for a target webpage, parsing the target webpage, and displaying the current state, component properties, and component tree of the target webpage in the canvas renderer, the attribute panel, and the component tree view layer, respectively, based on the parsing results, include: In response to an editing instruction for a target webpage, a state container for the target webpage is created or loaded from a cache, wherein the state container includes state data of the current view layer of the target webpage, and the state data includes at least: component tree structure data for identifying components in the target webpage and the hierarchical relationship between components, component attribute configuration data, and data indicating that the currently operated component is selected in the component tree; The canvas renderer renders the component tree structure data and attribute configuration data in the state data, and displays the rendering result as the current state of the target webpage in the canvas renderer. A hierarchical view is generated based on the component tree structure data and the selected state data, and displayed as a component tree in the component tree view layer; The corresponding component's attribute configuration data is loaded based on the selected state data and displayed as a component attribute of the target webpage in the attribute panel.

3. The method according to claim 1, characterized in that, The step of converting an editing operation into a target action object of a preset format in response to an editing operation on the canvas renderer, the properties panel, or the component tree view layer includes: In response to an editing operation on the canvas renderer, the property panel, or the component tree view layer, the action type corresponding to the editing operation is obtained from a preset relationship table; Based on the action type, a serializable data object with a preset format corresponding to the editing operation is generated to obtain a target action object; wherein, the target action object includes an identifier of the action type and at least one payload field, and the payload field includes necessary data describing the editing operation.

4. The method according to claim 3, characterized in that, The step of generating a serializable data object with a preset format corresponding to the editing operation, based on the action type, to obtain the target action object includes: If the editing operation is: clicking a component in the canvas renderer or the component tree view layer, then the editing operation is converted into a serializable data object of the component selection action type to obtain a target action object, wherein the target action object includes an identifier of the component selection action type and an identifier of the clicked component; If the editing operation is to modify any attribute value of a component in the attribute panel, then the editing operation is converted into a serializable data object of the attribute update action type to obtain a target action object, wherein the target action object includes the identifier of the modified attribute component, the modified attribute name, and the modified attribute value. If the editing operation is to adjust the position or hierarchy of a component by dragging and dropping in the canvas renderer or component tree, then the editing operation is converted into a serializable data object of the structure update action type to obtain the target action object, wherein the target action object includes the identifier of the component being adjusted, and the identifier of the parent component or the sibling node order information of the adjusted component.

5. The method according to claim 1, characterized in that, The steps of sending the target action object to the state container of the target webpage and updating the current state data of the view layer of the target webpage according to the target action object include: By using the state update function corresponding to the state container, the corresponding state update logic is executed on the state data currently stored in the state container and the action type of the target action object to obtain the target state data; wherein, the state container serves as the single trusted source of the target webpage editing state, and the state update function is a pure function; The target state data is used to replace the current state data stored in the state container to obtain the latest state data of the state container.

6. The method according to claim 1, characterized in that, The step of publishing the latest state data to its subscribers through the state container, and the subscribers performing at least partial state updates based on the received latest state data to obtain the latest edit state of the target webpage includes: The state container publishes state update notifications to its subscribers, and the subscribers of the state container respond to the state update notifications by extracting a specified data fragment from the latest state data of the state container through the state selector corresponding to the subscriber. The specified data segment extracted by the subscriber is compared with the corresponding data segment in the previous state data of the state container to obtain the comparison result. If the comparison result indicates that a specified data segment has changed, the corresponding subscriber executes the update logic of the internal view or state based on the specified data segment extracted to obtain the latest editing state of the target webpage.

7. The method according to claim 1, characterized in that, After the steps of sending the target action object to the state container of the target webpage, updating the current state data of the view layer of the target webpage according to the target action object, and obtaining the latest state data of the state container, the method further includes: Store the state of the state container and / or the target action object before the update into the history stack; In response to an undo or redo command for the target webpage in edit mode, the corresponding historical state data and / or historical action object are extracted from the history stack. By using the historical state data and / or the historical action object, the current state data of the view layer of the target webpage is updated to obtain the latest state data of the state container, so as to trace and roll back the editing state of the target webpage.

8. A webpage editing device, characterized in that, An apparatus for use in a display terminal, the display terminal providing a graphical user interface (GUI) displaying multiple editable view layers, the view layers including a canvas renderer, an attribute panel, and a component tree view layer, the apparatus comprising: The parsing module is used to respond to editing instructions for the target webpage, parse the target webpage, and display the current state, component attributes, and component tree of the target webpage in the canvas renderer, the attribute panel, and the component tree view layer, respectively, based on the parsing results. A conversion module is used to convert editing operations into target action objects of a preset format in response to editing operations on the canvas renderer, the property panel, or the component tree view layer. The update module is used to send the target action object to the state container of the target webpage, update the current state data of the view layer of the target webpage according to the target action object, and obtain the latest state data of the state container. The publishing module is used to publish the latest state data to its subscribers through the state container. The subscribers perform at least partial state updates based on the received latest state data to obtain the latest edit state of the target webpage. The subscribers of the state container include at least the view layer.

9. An electronic device, characterized in that, It includes a processor and a memory, the memory storing machine-executable instructions that can be executed by the processor, the processor executing the machine-executable instructions to implement the webpage editing method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when invoked and executed by a processor, cause the processor to implement the webpage editing method according to any one of claims 1-7.

Images