Page editing method and device, equipment and storage medium

Abstract

The invention provides a page editing method and device, equipment and a storage medium, and relates to the technical field of computers. The method comprises the steps that a page editing area for a to-be-edited target page is displayed, in response to a preset code instruction, a component editing result corresponding to the preset code instruction is displayed in the page editing area, the preset code instruction is generated according to text information input operation acting on preset input equipment, and the preset code instruction is generated according to the text information input operation acting on the preset input equipment. The component corresponding to the component editing result is the component in the target page. By the adoption of the technical scheme, in the process of editing the target page, a user can input the preset code instruction through the preset input device supporting the text information input operation, the components in the target page can be edited conveniently through the text information input operation, and the user experience is improved. And the component editing result corresponding to the preset code instruction is visually checked in the page editing area, so that the page editing efficiency can be effectively improved.

Description

Technical Field

[0001] The embodiments of the present disclosure relate to the field of computer technology, and in particular to a page editing method, apparatus, device, and storage medium. Background Art

[0002] The User Interface (UI) is a medium for interaction and information exchange between the system and the user. The development of many application products involves UI page development. Among them, low-code development is currently the most commonly used development method by developers. Low-code development usually refers to the development method of visual pages provided to developers. In the UI page development scenario, the low-code editor has rich UI page editing capabilities. Developers can use the mouse to click and drag to edit components and complete the configuration of related properties of components in the user interface provided by the low-code editor. Compared with directly writing code, it can improve page development efficiency to a certain extent.

[0003] However, the current operation of the editor for page development scenarios still has the problem of low efficiency and needs to be improved. Summary of the invention

[0004] The embodiments of the present disclosure provide a page editing method, apparatus, device, and storage medium, which can optimize existing page editing solutions.

[0005] In a first aspect, an embodiment of the present disclosure provides a page editing method, comprising:

[0006] Displaying a page editing area for a target page, wherein the target page is a page to be edited;

[0007] In response to a preset code instruction, a component editing result corresponding to the preset code instruction is displayed in the page editing area, wherein the preset code instruction is generated based on a text information input operation acting on a preset input device, and the component corresponding to the component editing result is a component in the target page.

[0008] In a second aspect, the embodiment of the present disclosure further provides a page editing device, including:

[0009] A page editing area display module, used to display the page editing area of ​​a target page, wherein the target page is a page to be edited;

[0010] A component editing result display module is used to respond to preset code instructions and display the component editing results corresponding to the preset code instructions in the page editing area, wherein the preset code instructions are generated based on the text information input operation acting on a preset input device, and the component corresponding to the component editing result is the component in the target page.

[0011] In a third aspect, an embodiment of the present disclosure further provides an electronic device, the electronic device comprising:

[0012] one or more processors;

[0013] a storage device for storing one or more programs,

[0014] When the one or more programs are executed by the one or more processors, the one or more processors implement the page editing method provided by the embodiment of the present disclosure.

[0015] In a fourth aspect, an embodiment of the present disclosure further provides a storage medium comprising computer executable instructions, which, when executed by a computer processor, are used to execute the page editing method provided by an embodiment of the present disclosure.

[0016] The page editing solution provided by the embodiment of the present disclosure displays a page editing area for a target page to be edited, and in response to a preset code instruction, displays a component editing result corresponding to the preset code instruction in the page editing area, wherein the preset code instruction is generated according to a text information input operation acting on a preset input device, and the component corresponding to the component editing result is a component in the target page. By adopting the above technical solution, during the editing process of the target page, the user can input the preset code instruction through a preset input device that supports text information input operations, and conveniently edit the components in the target page by using the text information input operation, and intuitively view the component editing result corresponding to the preset code instruction in the page editing area, which can effectively improve the efficiency of page editing. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The above and other features, advantages and aspects of the embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. Throughout the accompanying drawings, the same or similar reference numerals represent the same or similar elements. It should be understood that the drawings are schematic and the originals and elements are not necessarily drawn to scale.

[0018] Figure 1 A schematic diagram of a page editing process provided by an embodiment of the present disclosure;

[0019] Figure 2 A schematic diagram of an interface interaction provided by an embodiment of the present disclosure;

[0020] Figure 3 A schematic diagram of an interface provided by an embodiment of the present disclosure;

[0021] Figure 4 An interactive schematic diagram provided by an embodiment of the present disclosure;

[0022] Figure 5A flow chart of a page editing method provided by an embodiment of the present disclosure;

[0023] Figure 6 A schematic diagram of the structure of a page editing device provided by an embodiment of the present disclosure;

[0024] Figure 7 A schematic diagram of the structure of an electronic device provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0025] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0026] It should be understood that the various steps described in the method embodiments of the present disclosure may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this respect.

[0027] The term "including" and its variations used herein are open inclusions, i.e., "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the following description.

[0028] It should be noted that the concepts such as "first" and "second" mentioned in the present disclosure are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0029] It should be noted that the modifications of "one" and "plurality" mentioned in the present disclosure are illustrative rather than restrictive, and those skilled in the art should understand that unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0030] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0031] It is understandable that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, scope of use, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.

[0032] For example, in response to receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested to be performed will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, application, server, or storage medium that performs the operation of the technical solution of the present disclosure according to the prompt message.

[0033] As an optional but non-limiting implementation, in response to receiving an active request from the user, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. In addition, the pop-up window may also carry a selection control for the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0034] It is understandable that the above notification and the process of obtaining user authorization are merely illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that meet the relevant laws and regulations may also be applied to the implementation of the present disclosure.

[0035] It is understandable that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and relevant provisions.

[0036] Figure 1 A page editing process diagram is provided for an embodiment of the present disclosure. The embodiment of the present disclosure is applicable to the situation of page editing. The method can be executed by a page editing device, and the device can be implemented in the form of software and / or hardware. Optionally, it can be implemented by an electronic device. The electronic device can be a mobile terminal such as a mobile phone, a smart watch, a tablet computer, and a personal digital assistant, or it can be a personal computer (PC) or a server. The electronic device can establish a connection with a preset input device, which can be a wired connection or a wireless connection.

[0037] like Figure 1 As shown, the method includes:

[0038] Step 101: display a page editing area for a target page, wherein the target page is a page to be edited.

[0039] Exemplarily, the page editing area may be an area in a preset interactive interface, which may specifically be a design interface. The design interface may be understood as a human-computer interactive interface for editing the UI page to be edited. The page editing area may specifically be a canvas area in the design interface for editing and visually displaying the page in the design. Users (such as page developers) may input editing operations through the page editing area and may intuitively view the page editing effect. The preset interactive interface may be an interface in a page design application product, which may be a software product that provides page design functions, which may be installed in an electronic device in the form of an installation package, and the application product may be started by triggering the corresponding application product icon; or it may be in the form of a web page version, and the application product may be accessed through a browser based on the input URL. The page design application product may be recorded as a preset editor, which may specifically be a code editor, wherein a preset component set is configured in the preset editor, and the preset components in the preset component set are associated with pre-written component codes. The preset editor may also be referred to as a low-code editor. The preset interactive interface may also include areas outside the page editing area such as a toolbar, which are not specifically limited.

[0040] Exemplarily, the target page is the page to be edited, that is, the editing operation currently input by the user is for the target page, and specifically the components in the target page can be edited. The current state of the target page can be a new state or an editing state. For the new state, the components may not be displayed in the page editing area. For the editing state, at least one component may be displayed in the page editing area.

[0041] Step 102, in response to a preset code instruction, displaying a component editing result corresponding to the preset code instruction in the page editing area, wherein the preset code instruction is generated based on a text information input operation acting on a preset input device, wherein the component corresponding to the component editing result is a component in the target page.

[0042] In the embodiments of the present disclosure, the preset input device may be an input device that supports receiving text information input operations, such as a keyboard (which may include a physical keyboard and / or a virtual keyboard), or a writing board, etc. For example, when the text cursor is not displayed in the preset interactive interface, the text information input operation is reused as an editing operation.

[0043] Exemplarily, editing components in the target page may include adding components, selecting components, moving components, and setting component properties, etc. In the prior art, the editing operation of the above editing method is input through the mouse, however, the mouse operation relies on manual positioning, which is inconvenient to operate, and for editing operations related to the layout of UI components, the mouse operation is difficult to quickly and accurately position, and the mouse often needs to be dragged repeatedly, which is inefficient.

[0044] In the disclosed embodiment, a text information input operation can be input through a preset input device, and a corresponding preset code instruction can be generated according to the text information input operation. The editing operations corresponding to different preset code instructions can be preset. After receiving the preset code instruction, the component in the target page can be edited according to the editing operation corresponding to the preset code instruction, and the corresponding component editing result can be displayed in the page editing area to respond to the preset code instruction. Displaying the component editing result can be understood as displaying the changes of the component as the editing object in a visual manner. Taking the creation of a new component as an example, the newly created component can be displayed in the page editing area. Taking the preset input device as a keyboard as an example, the text information input operation corresponding to the preset code instruction can include a key pressing operation, which can specifically include the triggering of a single key, or can also include the combined triggering of at least two keys, etc. The triggering method can include pressing or long pressing, etc. Which key or keys need to be triggered specifically can be pre-configured according to actual needs.

[0045] Optionally, the component corresponding to the component editing result is obtained by visually displaying the component code associated with the corresponding preset component.

[0046] The page editing method provided by the embodiment of the present disclosure displays a page editing area for a target page to be edited, and in response to a preset code instruction, displays a component editing result corresponding to the preset code instruction in the page editing area, wherein the preset code instruction is generated according to a text information input operation acting on a preset input device, and the component corresponding to the component editing result is a component in the target page. By adopting the above technical solution, during the editing process of the target page, the user can input the preset code instruction through a preset input device that supports text information input operations, and conveniently edit the components in the target page by using the text information input operation, and intuitively view the component editing result corresponding to the preset code instruction in the page editing area, which can effectively improve the efficiency of page editing.

[0047] In some embodiments, in response to a preset code instruction, displaying the component editing result corresponding to the preset code instruction in the page editing area includes: displaying a component creation window in response to a first preset code instruction; receiving first text information and second text information input by a user based on the preset input device based on the component creation window, and determining a first component identifier based on the first text information, and determining a first component name based on the second text information; in response to a second preset code instruction, displaying a newly created first component in the page editing area, wherein the type of the first component is determined according to the first component identifier, and the name of the first component is the first component name. In this way, the efficiency of creating new components can be improved.

[0048] In the prior art, when a new component needs to be created, the user needs to first move the mouse away from the page editing area, move it to the toolbar and other areas, and click to expand the component identification list. The component identification list may include component identifications of various types of preset components. The component identification may be, for example, a component type name, such as a button, a single-line text, a multi-line text, a switch, a slider, a radio button group, a time selector, etc. The user needs to find the component identification corresponding to the component type that he wants to create among the numerous component identifications, select the component identification by clicking the mouse, enter the component name, and then click to confirm the control to create a new component. The operation process is cumbersome and time-consuming.

[0049] In the embodiment of the present disclosure, the user can display the component creation window by inputting a first preset code instruction, and enter the first component identifier and the first component name in the form of text information in the component creation window. Subsequently, the user can trigger the creation and display of the first component by inputting a second preset code instruction.

[0050] Exemplarily, when the editor is initialized, a preset component set may be initialized, and the preset component set includes the component identifier of the preset component, and the component code and component configuration corresponding to the component identifier. Before displaying the first component, it may be determined whether the name of the first component is repeated with the existing component name in the target component list (the list may include the component name of the component already existing in the target page). If repeated, a prompt may be given that the name is repeated. If not repeated, the first component name may be matched from the preset component set. If the match is successful, the corresponding component code and component configuration may be read, and the first component may be rendered and displayed in the page editing area according to the reading result. If the match is not successful, a prompt message may be displayed to prompt that the input first component identifier is undefined and cannot be created. Optionally, after displaying the first component in the page editing area, the component creation window may be closed. Further, displaying the first component in the page editing area may also include: displaying the first component in a selected state in the page editing area, so that the user can further edit the first component. Among them, the component in the selected state may be specifically displayed as a highlighted component, for example, the color of the component in the selected state is different from the color of the component in the unselected state.

[0051] Figure 2 A schematic diagram of an interface interaction provided by an embodiment of the present disclosure is shown in FIG. Figure 2As shown, a page editing area 201 for a target page is displayed, wherein the target page is currently assumed to contain a component, such as button a in the figure. In response to a first preset code instruction, a component creation window 202 is displayed. The component creation window 202 receives a first component identifier (Button) and a first component name (Button b) input by a user. In response to a second preset code instruction, a newly created first component 203 is displayed in the page editing area. Optionally, the first component 203 is in a selected state. Assuming that the user enters button a, the user will be prompted that the name is repeated, and the user can re-enter the component name.

[0052] In some embodiments, in response to a preset code instruction, displaying the component editing result corresponding to the preset code instruction in the page editing area includes: displaying a component search window in response to a third preset code instruction; receiving a third text message input by a user based on the preset input device based on the component search window, and determining a second component name based on the third text message; and displaying the second component in a selected state in the page editing area, wherein the name of the second component is the second component name. Thus, the user can quickly and accurately select a component by inputting a text message input operation, thereby improving accuracy and efficiency.

[0053] In the prior art, it is necessary to select components by clicking the mouse. However, as the page becomes more and more complex, many components may be nested, that is, multiple components are displayed overlapping in the page editing area. It is difficult to quickly and accurately select components in the page editing area by clicking the mouse. Figure 3 A schematic diagram of an interface provided by an embodiment of the present disclosure, such as Figure 3 As shown, two components are nested in the component that serves as the parent container, and there is also a nested relationship between the two components. Due to their similar sizes and close display areas, it is difficult to select the components quickly and accurately with the mouse.

[0054] In the disclosed embodiment, the user can trigger the display of the component search window by inputting the text information input operation corresponding to the third preset code instruction, and enter the component name of the component to be selected in the component search window (such as the second component name), so as to quickly select the second component and display the selected result in the page editing area. Optionally, after receiving the second component name, the second component in the selected state can be displayed, or after receiving the user's preset code instruction (such as a confirmation operation based on keyboard input), the second component in the selected state can be displayed.

[0055] In some embodiments, in response to a preset code instruction, displaying the component editing result corresponding to the preset code instruction in the page editing area includes: when the third component displayed in the page editing area is in a selected state, in response to a fourth preset code instruction, displaying the moved third component in the page editing area; wherein the movement includes at least one of the following: layout position movement within a parent container, component level movement within a parent container, and movement across parent containers. Thus, the editing efficiency of component movement can be improved. Wherein, different movement operations can correspond to different fourth preset code instructions.

[0056] Exemplarily, the layout position movement in the parent container can be understood as the movement of the component in the parent container parallel to the plane where the page editing area is located, and the movement direction may include up, down, left, right, etc. If the component currently in the selected state is not contained in a certain component, then its parent container can be understood as the target page. If the mouse is used for movement operation, it is not easy to control the movement distance, and it is difficult to accurately locate the movement position. By inputting the text information input operation corresponding to the fourth preset code instruction, the movement distance can be controlled more accurately, thereby achieving accurate positioning of the movement position.

[0057] Exemplarily, the hierarchical movement of components within a parent container can be understood as the movement of components within the parent container in a direction perpendicular to the plane where the page editing area is located. The parent container includes at least two components. For example, if a third component is located at the lower layer of another component, the third component can be moved to the upper layer of the other component by inputting a text information input operation corresponding to a fourth preset code instruction. If a mouse is used for hierarchical movement operations, it is generally necessary to drag the component to be moved to a specific position in the hierarchical structure tree of each component, and the mouse needs to leave the page editing area, resulting in low editing efficiency. However, by inputting a text information input operation corresponding to the fourth preset code instruction, fast hierarchical movement of components can be achieved, thereby improving editing efficiency.

[0058] Exemplarily, moving across parent containers can be understood as moving a component from the current parent container (which can be recorded as the current parent container) to another parent container (which can be recorded as the target parent container), such as moving from parent container A to parent container B. If the mouse is used to perform the cross-parent container moving operation, it is generally necessary to drag the component to be moved to the node corresponding to the target parent container in the hierarchical structure tree of each component, and wait for the node to expand the child node (components contained in the parent container) list, and then drag the component to the expanded child node list. Not only does the mouse need to leave the page editing area, but it also needs to wait for the child node list to expand (which may take about 1 second), which is time-consuming and has low editing efficiency. When there is an intermediate-level parent container nested between the target parent container and the current parent container, the time waiting for the child node to expand will increase exponentially, seriously affecting the editing efficiency. However, by inputting the text information input operation corresponding to the fourth preset code instruction, fast cross-parent container movement can be achieved, improving editing efficiency.

[0059] Figure 4 An interactive schematic diagram provided by an embodiment of the present disclosure, such as Figure 4 As shown, it is assumed that there are parent containers A and B. Parent container A is located above parent container B. Parent container A includes three components, namely text a, button a and text b. Parent container B contains one component, text c. The currently selected component is button a. It should be noted that for the sake of convenience, Figure 4 The parent containers and components shown are different from those in the page editing area. In the page editing area, the parent containers and components are nested. Figure 4 In order to facilitate the description of the hierarchical relationship, the schematic diagram is obtained by separating the page editing area in the vertical direction of the plane where the page editing area is located. Assume that the fourth preset code instruction includes the first code instruction, the second code instruction, the third code instruction and the fourth code instruction, the first code instruction is used to move button a one level up in the parent container A, the second code instruction is used to move button a one level down in the parent container A, the third code instruction is used to move button a from the parent container A across the parent container to the parent container B, and the fourth code instruction is used to move button a from the parent container A across the parent container to the upper parent container of the parent container A, which may be the target page.

[0060] In some embodiments, the method further includes: when the fourth component displayed in the page editing area is in a selected state, in response to a fifth preset code instruction, displaying a property setting area corresponding to the fourth component; receiving a sixth preset code instruction based on the property setting area to locate a target property setting item; and in response to a seventh preset code instruction, modifying a property value corresponding to the target property setting item. Thus, the setting item that needs to be modified in property value can be quickly located through the code instruction, thereby improving the efficiency of property editing.

[0061] Exemplarily, the properties of a component may include, for example, border style, background color, transparency, and size, and may also include some property switches, such as whether to include an underline switch. If the mouse is used to set properties, it is necessary to first open the property setting area with the mouse, then move the mouse to the property setting area, and select the property setting item that needs to be modified. By entering the text information input operation corresponding to the preset code instruction, the property setting area can be quickly displayed, and the preset code instruction can be used to quickly locate the property setting item that needs to be modified (recorded as the target property setting item), and the preset code instruction can be used to quickly modify the property value.

[0062] For example, for the property setting items of the switch type, the text information input operation corresponding to the preset code instruction can be input, such as pressing a key on the keyboard to quickly switch the switch state, which can effectively improve the operating efficiency compared to the mouse operation.

[0063] In some embodiments, the method further includes: when the fifth component displayed in the page editing area is in a selected state, in response to an eighth preset code instruction, displaying a code editing area corresponding to the fifth component; and receiving code editing information corresponding to the fifth component based on the code editing area. In this way, the code editing area can be displayed quickly, improving code editing efficiency.

[0064] In some embodiments, in response to a preset code instruction, displaying the component editing result corresponding to the preset code instruction in the page editing area may further include: when the sixth component displayed in the page editing area is in a selected state, in response to a ninth preset code instruction, canceling the display of the sixth component in the page editing area. In this way, component deletion can be quickly achieved.

[0065] Figure 5 The following is a flow chart of a page editing method provided by an embodiment of the present disclosure. The present disclosure embodiment is optimized based on the various optional solutions in the above embodiments. Specifically, the method includes the following steps:

[0066] Step 501: Display a page editing area for a target page, wherein the target page is a page to be edited.

[0067] Exemplarily, the page editing area is included in the design page of the low-code editor. When the low-code editor is initialized, a preset component set (referred to as CmpMap) can be initialized. CmpMap contains a key name (key) and a corresponding key value (value). The key value may include a component code and a component configuration.

[0068] Step 502, in response to the first preset code instruction, display a component creation window, receive first text information and second text information input by the user based on the component creation window, determine a first component identifier according to the first text information, and determine a first component name according to the second text information.

[0069] Exemplarily, the text information input operation corresponding to the first preset code instruction can be pressing a window key (such as a win key or a command key, etc.) and the enter key. After pressing the key, a component creation pop-up window pops up, and a text cursor is displayed in the input box in the component creation pop-up window, and the component identifier and component name in the form of text information are entered.

[0070] Step 503: In response to the second preset code instruction, display the newly created first component in the page editing area, wherein the type of the first component is determined according to the first component identifier, and the name of the first component is the first component name.

[0071] Exemplarily, the text information input operation corresponding to the second preset code instruction can be pressing the Enter key. When the first component name does not exist in the target component list (CmpList), the key corresponding to the first component identifier is matched in CmpMap. If the match is successful, the value corresponding to the matched key is obtained, rendered and displayed, and the first component name is inserted into CmpList.

[0072] Step 504: In response to the third preset code instruction, display a component search window, and receive a second component name input by the user based on the component search window.

[0073] Exemplarily, the text information input operation corresponding to the third preset code instruction can be pressing the window button and the F key. After pressing the button, a component search pop-up window pops up, and the name of the component to be searched, that is, the second component name, is entered in the component search pop-up window.

[0074] Step 505: Display the second component in a selected state in the page editing area, wherein the name of the second component is the second component name.

[0075] Exemplarily, if a component named as the second component name, that is, the second component, is found, the second component is displayed in the page editing area and the second component is set to be selected; if not found, a prompt "Component not found" may be displayed.

[0076] Optionally, if a component is in a selected state, the component can be deleted by entering a text message input operation corresponding to a preset code instruction, such as pressing a delete button or a backspace button to cancel the display of the component in the page editing area and delete the component from CmpList.

[0077] Step 506: When the third component displayed in the page editing area is in a selected state, in response to a fourth preset code instruction, the moved third component is displayed in the page editing area.

[0078] The movement includes at least one of the following: layout position movement within a parent container, component level movement within a parent container, and movement across parent containers.

[0079] Exemplarily, by pressing the up, down, left, and right arrow keys, the position of the third component relative to its parent container can be adjusted. For example, by pressing the up arrow key, the third component moves upward. By continuously pressing the up arrow key, the third component can continue to move upward.

[0080] For example, by pressing and holding the window button and the arrow keys, you can adjust the component hierarchy, that is, to move the component hierarchy within its parent container. For example, by pressing and holding Command+Left, the component moves to the front at the same level, and by pressing and holding Command+Right, the component moves to the front at the same level. By pressing and holding the window button and the arrow keys, you can also move across parent containers. For example, by pressing and holding Command+Up, the component moves to the upper parent container, and by pressing and holding Command+Down, the component drills down to the lower parent container.

[0081] Step 507: When the fourth component displayed in the page editing area is in a selected state, in response to the fifth preset code instruction, a property setting area corresponding to the fourth component is displayed.

[0082] Exemplarily, the property panel pop-up window (property setting area) can be opened by pressing the window button. By default, the first property setting item is selected. The property setting items may include an input box or a switch.

[0083] Step 508: Receive a sixth preset code instruction based on the attribute setting area and locate the target attribute setting item.

[0084] For example, you can hold down the tab key to select the property setting item downward; you can hold down the tab key + the shift key to select the property setting item upward, so as to quickly locate the target property setting item you want to set.

[0085] Step 509: In response to the seventh preset code instruction, modify the property value corresponding to the target property setting item.

[0086] Exemplarily, if the target property setting item is an input box, a specific property value can be input through the keyboard.

[0087] For example, if the target property setting item is a selector, you can press the Enter key to open the selection list, select an option by pressing the up and down arrow keys, and then press the Enter key to select the option and close the selection list.

[0088] Exemplarily, after the properties are set, the property setting area can be closed by pressing the Command key.

[0089] Step 510: When the fifth component displayed in the page editing area is in a selected state, in response to an eighth preset code instruction, a code editing area corresponding to the fifth component is displayed, and code editing information corresponding to the fifth component is received based on the code editing area.

[0090] For example, you can use the Command key + L key to open the logic panel input pop-up window, automatically select the code input box (code editing area), and you can encode in the code input box. During the input process, set the input content to the fifth component. After editing, close the logic panel input pop-up window by pressing the Command key.

[0091] The page editing method provided by the embodiment of the present disclosure can, during the development process of a target page, allow a user to input a key trigger operation corresponding to the editing requirement through the keyboard to generate a corresponding preset code instruction, and conveniently implement operations such as creating, selecting, moving, setting properties, and editing codes for components in the target page by reasonably setting the keys and triggering methods corresponding to the preset code instructions, and intuitively view the component editing results corresponding to the key trigger operation in the page editing area, thereby effectively improving page editing efficiency.

[0092] Figure 6 A schematic diagram of the structure of a page editing device provided by an embodiment of the present disclosure is shown in FIG. Figure 6 As shown, the device comprises:

[0093] The page editing area display module 601 is used to display the page editing area of ​​the target page, wherein the target page is the page to be edited;

[0094] The component editing result display module 602 is used to respond to preset code instructions and display the component editing results corresponding to the preset code instructions in the page editing area, wherein the preset code instructions are generated based on the text information input operation acting on the preset input device, wherein the component corresponding to the component editing result is the component in the target page.

[0095] The page editing device provided by the embodiment of the present disclosure displays a page editing area for a target page to be edited, and in response to a preset code instruction, displays a component editing result corresponding to the preset code instruction in the page editing area, wherein the preset code instruction is generated according to a text information input operation acting on a preset input device, and the component corresponding to the component editing result is a component in the target page. By adopting the above technical solution, during the process of editing the target page, the user can input the preset code instruction through a preset input device that supports text information input operations, and conveniently edit the components in the target page by using the text information input operation, and intuitively view the component editing result corresponding to the preset code instruction in the page editing area, which can effectively improve the efficiency of page editing.

[0096] Optionally, the component editing result display module includes:

[0097] A first display unit, configured to display a component creation window in response to a first preset code instruction;

[0098] A first receiving unit, configured to receive, based on the component creation window, first text information and second text information input by a user based on the preset input device;

[0099] a first determining unit, configured to determine a first component identifier according to the first text information, and to determine a first component name according to the second text information;

[0100] A second display unit is used to display a newly created first component in the page editing area in response to a second preset code instruction, wherein the type of the first component is determined according to the first component identifier, and the name of the first component is the first component name.

[0101] Optionally, the component editing result display module includes:

[0102] A third display unit, configured to display a component search window in response to a third preset code instruction;

[0103] A second receiving unit, configured to receive, based on the component search window, third text information input by the user based on the preset input device;

[0104] A second determining unit, configured to determine a second component name according to the third text information;

[0105] A fourth display unit is used to display the second component in a selected state in the page editing area, wherein the name of the second component is the second component name.

[0106] Optionally, the component editing result display module includes:

[0107] A fifth display unit is used to display the moved third component in the page editing area in response to a fourth preset code instruction when the third component displayed in the page editing area is in a selected state; wherein the movement includes at least one of the following: layout position movement within the parent container, component hierarchy movement within the parent container, and movement across parent containers.

[0108] Optionally, the device further comprises:

[0109] A first display module, configured to display a property setting area corresponding to the fourth component in response to a fifth preset code instruction when the fourth component displayed in the page editing area is in a selected state;

[0110] A setting item locating module, configured to receive a sixth preset code instruction based on the property setting area and locate a target property setting item;

[0111] The property modification module is used to modify the property value corresponding to the target property setting item in response to the seventh preset code instruction.

[0112] Optionally, the device further comprises:

[0113] A second display module, configured to display a code editing area corresponding to the fifth component in response to an eighth preset code instruction when the fifth component displayed in the page editing area is in a selected state;

[0114] The editing information receiving module is used to receive the code editing information corresponding to the fifth component based on the code editing area.

[0115] Optionally, the page editing area is an area in a preset interactive interface of a preset editor, the preset editor is configured with a preset component set, the preset components in the preset component set are associated with pre-written component codes, and the component corresponding to the component editing result is obtained after visual display according to the component code associated with the corresponding preset component.

[0116] Optionally, the preset input device includes a physical keyboard and / or a virtual keyboard.

[0117] Optionally, the text information input operation includes a key trigger operation.

[0118] The page editing device provided in the embodiments of the present disclosure can execute the page editing method provided in any embodiment of the present disclosure, and has the corresponding functional modules and beneficial effects of the execution method.

[0119] It is worth noting that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above-mentioned division, as long as the corresponding functions can be achieved; in addition, the specific names of the functional units are only for the convenience of distinguishing each other, and are not used to limit the protection scope of the embodiments of the present disclosure.

[0120] Figure 7 This is a schematic diagram of the structure of an electronic device provided by an embodiment of the present disclosure. Figure 7 , which shows an electronic device (eg, Figure 7 The terminal device in the embodiment of the present disclosure may include but is not limited to mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 7 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0121] like Figure 7 As shown, the electronic device 700 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 701, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 702 or a program loaded from a storage device 708 into a random access memory (RAM) 703. In the RAM 703, various programs and data required for the operation of the electronic device 700 are also stored. The processing device 701, the ROM 702, and the RAM 703 are connected to each other via a bus 704. An edit / output (I / O) interface 705 is also connected to the bus 704.

[0122] Typically, the following devices may be connected to the I / O interface 705: an input device 706 including, for example, a touch screen, a touch pad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 707 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 708 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 709. The communication device 709 may allow the electronic device 700 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 7 The electronic device 700 is shown with various devices, but it should be understood that it is not required to implement or possess all the devices shown. More or fewer devices may be implemented or possessed instead.

[0123] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program contains program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device 709, or installed from a storage device 708, or installed from a ROM 702. When the computer program is executed by the processing device 701, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.

[0124] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0125] The electronic device provided by the embodiment of the present disclosure and the page editing method provided by the above embodiment belong to the same inventive concept. The technical details not fully described in this embodiment can be referred to the above embodiment, and this embodiment has the same beneficial effects as the above embodiment.

[0126] The embodiment of the present disclosure provides a computer storage medium on which a computer program is stored. When the program is executed by a processor, the page editing method provided by the above embodiment is implemented.

[0127] An embodiment of the present disclosure provides a computer program product, including a computer program, which implements the page editing method provided by the above embodiment when executed by a processor.

[0128] It should be noted that the computer-readable medium disclosed above may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in combination with an instruction execution system, device or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, in which a computer-readable program code is carried. This propagated data signal may take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. The computer readable signal medium may also be any computer readable medium other than a computer readable storage medium, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer readable medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

[0129] In some embodiments, the client and the server may communicate using any currently known or future developed network protocol such as HTTP (HyperText Transfer Protocol), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), an internet (e.g., the Internet), and a peer-to-peer network (e.g., an ad hoc peer-to-peer network), as well as any currently known or future developed network.

[0130] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0131] The above-mentioned computer-readable medium carries one or more programs. When the above-mentioned one or more programs are executed by the electronic device, the electronic device: displays a page editing area for a target page, wherein the target page is a page to be edited; in response to a preset code instruction, displays a component editing result corresponding to the preset code instruction in the page editing area, wherein the preset code instruction is generated based on a text information input operation acting on a preset input device, and the component corresponding to the component editing result is a component in the target page.

[0132] Computer program code for performing the operations of the present disclosure may be written in one or more programming languages ​​or a combination thereof, including, but not limited to, object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0133] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0134] The units involved in the embodiments described in the present disclosure may be implemented by software or hardware. The name of a module does not limit the module itself in some cases. For example, a page editing area display module may also be described as a "module for displaying a page editing area of ​​a target page, wherein the target page is a page to be edited".

[0135] The functions described above herein may be performed at least in part by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.

[0136] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0137] The above description is only a preferred embodiment of the present disclosure and an explanation of the technical principles used. Those skilled in the art should understand that the scope of disclosure involved in the present disclosure is not limited to the technical solutions formed by a specific combination of the above technical features, but should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above disclosed concept. For example, the above features are replaced with the technical features with similar functions disclosed in the present disclosure (but not limited to) by each other to form a technical solution.

[0138] In addition, although each operation is described in a specific order, this should not be understood as requiring these operations to be performed in the specific order shown or in a sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Similarly, although some specific implementation details are included in the above discussion, these should not be interpreted as limiting the scope of the present disclosure. Some features described in the context of a separate embodiment can also be implemented in a single embodiment in combination. On the contrary, the various features described in the context of a single embodiment can also be implemented in multiple embodiments individually or in any suitable sub-combination mode.

[0139] Although the subject matter has been described in language specific to structural features and / or methodological logical actions, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. On the contrary, the specific features and actions described above are merely example forms of implementing the claims.

Claims

1. A page editing method, characterized in that: include: Displaying a page editing area for a target page, wherein the target page is a page to be edited; In response to a preset code instruction, a component editing result corresponding to the preset code instruction is displayed in the page editing area, wherein the preset code instruction is generated based on a text information input operation acting on a preset input device, and the component corresponding to the component editing result is a component in the target page.

2. The method according to claim 1, characterized in that In response to the preset code instruction, displaying the component editing result corresponding to the preset code instruction in the page editing area includes: In response to the first preset code instruction, display a component creation window; Receiving, based on the component creation window, first text information and second text information input by a user based on the preset input device, and determining a first component identifier based on the first text information, and determining a first component name based on the second text information; In response to the second preset code instruction, a newly created first component is displayed in the page editing area, wherein the type of the first component is determined according to the first component identifier, and the name of the first component is the first component name.

3. The method according to claim 1, characterized in that In response to the preset code instruction, displaying the component editing result corresponding to the preset code instruction in the page editing area includes: In response to the third preset code instruction, displaying a component search window; receiving, based on the component search window, third text information input by the user based on the preset input device, and determining a second component name according to the third text information; A second component in a selected state is displayed in the page editing area, wherein the name of the second component is the second component name.

4. The method according to claim 1, characterized in that: In response to the preset code instruction, displaying the component editing result corresponding to the preset code instruction in the page editing area includes: When the third component displayed in the page editing area is in a selected state, in response to a fourth preset code instruction, displaying the moved third component in the page editing area; The movement includes at least one of the following: layout position movement within a parent container, component level movement within a parent container, and movement across parent containers.

5. The method according to claim 1, characterized in that Also includes: When the fourth component displayed in the page editing area is in a selected state, in response to a fifth preset code instruction, a property setting area corresponding to the fourth component is displayed; receiving a sixth preset code instruction based on the attribute setting area to locate a target attribute setting item; In response to the seventh preset code instruction, the property value corresponding to the target property setting item is modified.

6. The method according to claim 1, characterized in that Also includes: When the fifth component displayed in the page editing area is in a selected state, in response to an eighth preset code instruction, displaying a code editing area corresponding to the fifth component; Code editing information corresponding to the fifth component is received based on the code editing area.

7. The method according to any one of claims 1 to 6, characterized in that: The page editing area is an area in a preset interactive interface of a preset editor, a preset component set is configured in the preset editor, a preset component in the preset component set is associated with a pre-written component code, and a component corresponding to the component editing result is obtained by visually displaying the component code associated with the corresponding preset component; the preset input device includes a physical keyboard and / or a virtual keyboard; The text information input operation includes a key trigger operation.

8. A page editing device, characterized in that: include: A page editing area display module, used to display the page editing area of ​​a target page, wherein the target page is a page to be edited; A component editing result display module is used to respond to preset code instructions and display the component editing results corresponding to the preset code instructions in the page editing area, wherein the preset code instructions are generated based on the text information input operation acting on a preset input device, and the component corresponding to the component editing result is the component in the target page.

9. An electronic device, characterized in that: The electronic device comprises: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the page editing method as described in any one of claims 1-7.

10. A storage medium containing computer executable instructions, characterized in that: The computer executable instructions are used to execute the page editing method as described in any one of claims 1-7 when executed by a computer processor.

Images