Page element editing method, device and equipment and readable storage medium

Abstract

The embodiment of the invention provides a page element editing method and device, equipment and a readable storage medium. Relates to the technical field of computers. The method comprises the following steps: determining at least one element with editable attributes in a browser page; under the condition that a first event is triggered for a target element in the at least one element, adding a style class to the target element; wherein a corresponding relation exists between the style class and the editing mode; and under the condition that a second event is triggered for the target element, editing the target element based on an editing mode corresponding to the style class and a user editing operation. According to the method, the page element editing flexibility can be improved.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and specifically relates to a page element editing method, device, electronic device and readable storage medium. Background Art

[0002] Elements are the basic blocks used to build browser page content and layout. Elements have attributes that can customize the behavior and appearance of elements. Different attributes will cause elements to have different performance and functions. The contenteditable attribute is developed based on the Internet Explorer (IE) browser. When an element has the contenteditable attribute, it means that the element can be edited and adjusted.

[0003] Currently, in most mainstream browsers (Chrome, Edge, etc.), most elements in browser pages also have the contenteditable attribute. In these browsers, the content of elements with the contenteditable attribute can be edited.

[0004] However, due to browser kernel issues, only the content of elements can be edited in these mainstream browsers, and further adjustments cannot be made to the elements, so the flexibility of element editing is relatively poor. Summary of the invention

[0005] The present application aims to provide a page element editing method, device, electronic device and readable storage medium, which at least solve the problem of poor flexibility of element editing due to browser kernel reasons in the prior art.

[0006] In order to solve the above technical problems, this application is implemented as follows: In a first aspect, an embodiment of the present application provides a method for editing page elements, the method comprising: Determining at least one element in the browser page that has an editable attribute; When the first event is triggered for a target element among the at least one element, a style class is added to the target element; wherein there is a corresponding relationship between the style class and the editing mode; When the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation.

[0007] In a second aspect, an embodiment of the present application further provides a device for editing page elements, the device comprising: An element attribute module, for determining at least one element having editable attributes in a browser page; A style adding module, used for adding a style class to a target element in the at least one element when a first event is triggered; wherein there is a corresponding relationship between the style class and the editing mode; The element editing module is used to edit the target element based on the editing mode corresponding to the style class and the user editing operation when the second event is triggered for the target element.

[0008] In a third aspect, an embodiment of the present application further provides an electronic device comprising a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein the program or instruction, when executed by the processor, implements the steps of the method described in the first aspect.

[0009] In a fourth aspect, an embodiment of the present application further provides a readable storage medium, on which a program or instruction is stored, and when the program or instruction is executed by a processor, the steps of the method described in the first aspect are implemented.

[0010] In an embodiment of the present application, by determining at least one element with editable attributes in a browser page, when a first event is triggered for a target element in the at least one element, a style class is added to the target element, wherein there is a corresponding relationship between the style class and the editing mode, and when a second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation. This allows different types of browsers to avoid the problem of low element editability caused by kernel reasons, and to edit the element in combination with the added style class and the user editing operation, thereby improving the flexibility of element editing in the browser page. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] Figure 1 It is a step diagram of a page element editing method provided by an embodiment of the present application; Figure 2 It is a step diagram of another method for editing page elements provided by an embodiment of the present application; Figure 3 It is a schematic diagram of the element editing interface provided in the embodiment of the present application; Figure 4 is a flowchart of the process of monitoring and adding style classes provided by an embodiment of the present application; Figure 5 is a flow chart of an element size editing process provided by an embodiment of the present application; Figure 6 is a block diagram of a page element editing device provided in an embodiment of the present application; Figure 7 It is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0012] The technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application.

[0013] Figure 1 is a flowchart of a method for editing page elements provided by an embodiment of the present application. Figure 1 As shown, the method may include: Step 101: Determine at least one element with editable attributes in a browser page.

[0014] In the disclosed embodiments, the Document Object Model (DOM) is a programming interface for representing and manipulating Hyper Text Mark-up Language (HTML) or Extensible Markup Language (XML) documents. The DOM can represent a document as a structured tree structure, and each node represents an object in the document, such as an element, attribute, or text. Based on the DOM, programming languages ​​such as JavaScript can be used to dynamically access, modify, add, or delete parts of a document. A browser page can be implemented based on an HTML or XML document.

[0015] The attributes of an element can include an attribute name and an attribute value. The attribute name and the attribute value can be connected by an equal sign. Some attributes are Boolean attributes, that is, the attribute value is a Boolean value, and there are only two conditions: "on" and "off". In this case, the attribute value can be omitted. As long as the attribute name is added, it means that the attribute is turned on. As for the contenteditable attribute, when contenteditable=true is set, the editing mode of the element can be turned on, that is, the contenteditable attribute is in an activated state.

[0016] It is understandable that, to determine at least one element with an editable attribute in the browser page, the at least one element is in the state of "contenteditable=true". The determination of the element with an editable attribute can be implemented by a function, such as a function in JavaScript: "conteditableElements = document.querySelectorAll('[contenteditable]')". in, document.querySelectorAll: A method in JavaScript that finds all elements in a document that match the specified CSS selector. It returns a static NodeList containing all matching elements. If there are no matching elements, an empty NodeList is returned.

[0017] '[contenteditable]': A CSS selector that selects all elements that have the contenteditable attribute. contenteditable is an HTML attribute that specifies whether an element's content is editable.

[0018] Step 102: when a first event is triggered for a target element among the at least one element, add a style class to the target element; wherein there is a corresponding relationship between the style class and the editing mode.

[0019] In an embodiment of the present disclosure, when at least one element with an editable attribute is displayed on a page, a user may trigger a first event for any element. For example, the first event may be a focus event (focus) triggered when a mouse moves to a display position of the element.

[0020] A style class is a selector used in Cascading Style Sheets (CSS) to define specific styles for elements. You can set styles for these elements by adding specific property values ​​to them and then using the corresponding class selector in the CSS style sheet.

[0021] In this embodiment, the style class can be added by creating a new element: Create an element and assign its reference to a variable. Set the contenteditable property of the element to non-editable (false) through the variable, add a style class name to the element by setting the className property, and set the width, height, border, background color of the element and the pointer style when the mouse hovers over it; add the created element as a child node to the element with editable properties. For example, to adjust the size of an editable element, you can use a general container element as a child node of the editable element; to crop an editable element of any complex curve, you can use a scalable vector graphics element as a child node of the editable element.

[0022] The style class can also be used to implement more complex editing methods, such as a shape adjustment style class and a color adjustment style class, wherein the shape of the element can be adjusted based on the shape adjustment style class (editing method), and the various types and functions of the style class are not specifically limited here.

[0023] Step 103: When the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation.

[0024] In the embodiments of the present disclosure, similar to triggering the first event, the second event may be a mouse click, double-click, long press, and other events. When the user triggers the second event for the target element, the corresponding editing method is determined based on the style class added for the target element, and on the basis of the corresponding editing method, the target element is edited in response to the user's editing operation. For example, when the style class is a stretch node style class, the user's editing operation may be a mouse drag operation, and the target element is stretched and edited based on the mouse drag operation. When the style class is a shape adjustment style class, the user's editing operation may be a specific key operation on the keyboard, and the target element is adjusted in shape based on the specific key operation.

[0025] It is understandable that for the same user editing operation, under different style classes, the element editing effects produced by the same user editing operation are also different. Therefore, it is necessary to combine the editing method corresponding to the style class and the user editing operation to accurately complete the editing of the target element.

[0026] Each step in the embodiment of the method of the present application can be implemented by script, plug-in or other methods. Among them, the scope of the script can be the page currently loaded with the script. If the same script function is to be used on multiple pages, the corresponding script can be introduced on each page.

[0027] Plug-ins are additional components of browsers that can add extra functions without changing the core functions of the browser. Plug-ins extend functionality by injecting specific HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and JavaScript code into the browser environment. Plug-ins usually run at the browser level and their scope of action is the entire browser environment. Plug-ins can operate on multiple web pages opened in the browser or page elements of different websites. The operations are global and cross-page.

[0028] In summary, in the embodiment of the present application, by determining at least one element with editable attributes in the browser page, when the first event is triggered for the target element in the at least one element, a style class is added to the target element, wherein there is a corresponding relationship between the style class and the editing mode, and when the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation. This allows different types of browsers to avoid the problem of low element editability caused by kernel reasons, and to edit the element in combination with the added style class and the user editing operation, thereby improving the flexibility of element editing in the browser page.

[0029] Figure 2 This is a page element editing method provided in an embodiment of the present application. Figure 2 include: Step 201, determining at least one element having an editable attribute in a browser page; Step 202, when the first event is triggered for a target element among the at least one element, adding a style class to the target element; wherein there is a corresponding relationship between the style class and the editing mode; Step 203: When the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation.

[0030] For details of the above steps 201-203, please refer to Figure 1 The contents of the embodiments will not be repeated here.

[0031] Optionally, when the second event is triggered for the target element, step 203 of editing the target element based on the editing mode corresponding to the style class and the user editing operation includes: Sub-step 2031, when the second event is triggered for the target element, determining that the editing mode corresponding to the style class is editing size; Sub-step 2032, in the editing mode, determining the operation direction and operation distance of the user's editing operation; Sub-step 2033: Editing the size of the target element based on the operation direction and the operation distance.

[0032] In the disclosed embodiment, since the element needs to be edited based on the editing mode and the user editing operation, when the second event is triggered for the target element, the editing mode corresponding to the style class added to the target element can be determined first. The editing mode can be editing the size, thereby avoiding the problem that in non-IE browsers (such as Chrome, FireFox, Edge), only the content of elements with the contenteditable attribute can be edited, and the element size cannot be edited.

[0033] When the editing mode is to edit the size, determine the operation direction and operation distance of the user's editing operation. The user editing operation can be a mouse drag operation, keyboard operation, etc. When the user performs the user editing operation, the operation direction and operation distance can be obtained. For example, the operation direction is to move right from the target element as the starting point, and the operation distance is 200 pixels. The following code can be used to monitor the mouse movement event (mousemove): document.onmousemove = function (e) { self.addMoveContentControl(ele, e); The above code sets a mouse move (mousemove) event listener (document.onmousemove) for the entire document (document). When the user moves the mouse in the document, the onmousemove event is triggered, and the self.addMoveContentControl (ele, e) function is called to determine the operation direction and operation distance. Based on the operation direction and operation distance, when editing the size of the target element, the target element can be extended by the operation distance in the operation direction, so that the display range of the target element is expanded. It can be understood that in addition to the operation direction and operation distance, in order to make the editing more accurate, the position of the user's editing operation can also be determined. In this embodiment, there are further beneficial effects for web applications or web systems developed based on IE browsers. Since the size editing of non-IE browsers is realized, the web applications or web systems developed based on IE browsers will not compromise the user experience after migrating to non-IE browsers, so that the web applications or web systems developed based on IE browsers can achieve browser compatibility without affecting the user experience.

[0034] Figure 31 is a schematic diagram of an element editing interface provided by an embodiment of the present disclosure; in scenario 1, the initial display range of the target element 301 is a square, the size of which may be 1000×1000 pixels, the position of the user's editing operation may be the right edge of the square, the operation direction is from the right edge to the right, and the operation distance is 2000 pixels. Referring to scenario 2, the display range of the edited target element 301 is 3000×1000 pixels.

[0035] By implementing the embodiments of the present disclosure, by determining that the editing mode corresponding to the style class is size editing, and determining the operation direction and operation distance of the user's editing operation, the size of the target element can be accurately edited, thereby improving the flexibility and accuracy of element editing in non-IE browser scenarios.

[0036] In addition, for IE browser, since the page elements in IE browser have editable attributes, it supports direct content editing and size editing of page elements in IE browser. Therefore, in the IE browser scenario, you can add style classes corresponding to other editing methods (such as content editing and size editing) for page elements in IE browser, such as shape editing (for editing the shape of element display), color editing (for editing the color of element display), and others, which are not limited here.

[0037] For example, whether it is IE browser or non-IE browser, it does not support the clipping effect of any complex curve for elements. In this case, you can create a scalable vector graphics SVG element to accommodate the clipping path. Specifically, use JavaScript to dynamically generate attribute values ​​in the SVG path to describe the start point, end point, line, curve, etc. of the path. For example, by using the corresponding API interface of HTML5, a Bezier curve that defines the shape of the curve with two control points and an end point is implemented; Spline or Catmull-Rom algorithm is used to generate a smooth curve; mathematical functions (such as sin(), cos()) are used to generate parametric equation curves.

[0038] The attribute values ​​of the generated SVG path are set to the corresponding attributes in the style class element and the style class element is structured as a child node and applied to the editable element. When the second event is triggered for the target element, the target element (i.e., the selected editable element) can be edited accordingly based on the editing method corresponding to the style class and the user operation.

[0039] Optionally, the step of editing the size of the target element based on the operation direction and the operation distance includes: Based on the operation direction, determining a target processing function corresponding to the operation direction; different operation directions correspond to different processing functions; Based on the operation distance, executing the target processing function to determine a characteristic parameter corresponding to the operation distance; the characteristic parameter is used to define the size of the target element; Based on the characteristic parameters, the size of the target element is edited.

[0040] In the disclosed embodiment, different processing functions may correspond to different operation directions (e.target). When the operation distance is determined, the target processing function corresponding to the operation direction may be executed. The target processing function corresponding to a specific operation direction may calculate the characteristic parameters corresponding to the operation distance based on the operation distance under the operation direction, and the characteristic parameters may limit the size of the target element. The characteristic parameters may be parameters such as the area, side length, and key point position of the element display range, and the size of the target element may be accurately edited according to the characteristic parameters.

[0041] Optionally, the step of executing the target processing function based on the operation distance to determine a characteristic parameter corresponding to the operation distance includes: Based on the operation distance, executing the target processing function; The element coordinates output by the target processing function and corresponding to the operation distance are obtained; the element coordinates are used to define at least one of the top, bottom, left, right, height and width of the target element.

[0042] In the embodiment of the present disclosure, based on the operation distance, after executing the target processing function, the target processing function may output element coordinates. The element coordinates are used to define at least one of the top, bottom, left, right, height, and width of the target element. When the display range of the target element is a rectangle, the top, bottom, left, and right are points on the four sides of the rectangle, respectively, and the height and width are the lengths of the sides of the rectangle.

[0043] The specific content of the element coordinates can be determined according to the specific operation direction. The operation direction can be up, down, left, right, upper right, lower right, upper left and lower left, a total of 8 directions, and there can also be 8 corresponding processing functions. The following code can be used to implement operation processing in different directions: switch (moveTarget) { case upward: this.addMoveContentTop(ele, e, direction[0]); break; case upper right: this.addMoveContentRightTop(ele, e, direction[1]); break; case right: this.addMoveContentRight(ele, e, direction[2]); break; case lower right: this.addMoveContentRightButtom(ele, e, direction[3]); break; case down: this.addMoveContentButtom(ele, e, direction[4]); break; case lower left: this.addMoveContentLeftButtom(ele, e, direction[5]); break; case left: this.addMoveContentLeft(ele, e, direction[6]); break; case top left: this.addMoveContentLeftTop(ele, e, direction[7]); break; default: break; For example, when the operation direction is rightward, the right side of the display range of the target element can be stretched to the right, and the corresponding target processing function needs to calculate the coordinates of the right end according to the operation distance; similarly, when the operation direction is downward, the coordinates of the bottom end are calculated. Correspondingly, when any one of the top, bottom, left, and right ends changes, the corresponding height or width will also change accordingly.

[0044] It is understandable that when the operation direction is the upper right, lower right, upper left and lower left directions, the two ends will change. For example, if the operation direction is the upper right, the coordinates of the top and right ends will change.

[0045] Optionally, after the step of determining at least one element having an editable attribute in the browser page, the method further includes: Step A: adding a monitoring attribute to the at least one element; the monitoring attribute indicates that the first event triggered for the target element is in a monitorable state.

[0046] In the embodiment of the present disclosure, after obtaining at least one element with an editable attribute in the browser page, it is necessary to add a monitoring attribute (tableIndex) to each element in the at least one element so that the focus event and the focus loss event triggered for the element can be monitored. The tabindex attribute can be added to the element (item) with the contenteditable attribute for event monitoring through "item.setAttribute('tabindex', '0')".

[0047] Optionally, before the step of editing the target element based on the editing mode corresponding to the style class and the user editing operation, the method further includes: Step B, adding a positioning attribute to the target element; the positioning attribute is used to keep the position of the target element fixed when a user edits the element.

[0048] In the disclosed embodiment, since the element may also have some movable attributes, when the user performs an editing operation, the position of the entire target element may be changed instead of performing the corresponding size editing. Therefore, it is necessary to add a positioning attribute to the target element so that the position of the target element can be kept fixed when the user performs the editing operation. For example, the element ele can be relatively positioned by "ele.style.position = 'relative'" to add a positioning attribute.

[0049] By implementing the embodiments of the present disclosure, by adding positioning attributes to the target element, the position of the target element can be kept fixed during user editing operations, thereby avoiding the problem of erroneous changes in the element position and improving the accuracy and success rate of element editing.

[0050] Optionally, when the first event is triggered for a target element among the at least one element, after the step of adding a style class to the target element, the method further includes: When a third event is triggered for the target element, the style class of the target element is deleted; there is a corresponding relationship between the first event and the third event.

[0051] In the disclosed embodiment, after the first event is triggered and the style class is added to the target element, the target element is not necessarily edited. In the case where the second event is not triggered, a third event corresponding to the first event will be triggered, and the third event may be a focus loss event. In the case where the third event is triggered for the target element, it means that the user's mouse has left the display range of the target element, and also means that the user will no longer edit the current target element. At this time, the style class of the target element can be deleted. The class attribute "s-show" may be added to the element to which the style class is added. In the case where the third event is triggered for the target element, the style class can be deleted based on the class attribute "s-show": Get the corresponding target element through $(ele), and remove the style class on the target element when the third event (blur) occurs.

[0052] By implementing the embodiments of the present disclosure, when the third event is triggered for a target element, unnecessary style classes can be deleted in time by deleting the style class of the target element, thereby ensuring the simplicity of the page code and the stability of the element display.

[0053] Optionally, when the first event is triggered for a target element among the at least one element, the step of adding a style class to the target element includes: When the first event is triggered for a target element in the at least one element, obtaining a user configuration; the user configuration is used to represent an editing mode specified by a user; According to the target editing mode indicated by the user configuration, a target style class corresponding to the target editing mode is added to the target element.

[0054] In the disclosed embodiment, the user may pre-build a user configuration, which indicates the editing mode specified by the user. According to the correspondence between the style class and the editing mode, the target editing mode is determined, and then the corresponding target style class is determined, and the target style class is added to the target element.

[0055] Figure 4 is a flowchart of a process of monitoring and adding a style class provided by an embodiment of the present disclosure; Step 401, start; step 402, add a monitoring attribute to the editable element when the page is loaded; step 403, monitor the focus and loss of focus events of all editable elements; step 404, a focus event occurs; step 405, the target element obtains focus; step 406, add a style class to the target element; step 407, add a positioning attribute to the target element; step 408, a loss of focus event occurs; step 409, remove the style class for the target element.

[0056] Figure 5It is a flowchart of the element size editing process provided by the embodiment of the present disclosure; step 501, monitor the document flow mouse movement event; step 502, whether the second event is triggered (for example, mouse press); step 503, if the second event does not occur, return; step 504, determine the style class and judge the operation direction; step 505, call different processing functions according to the operation direction; step 506, calculate the element coordinates.

[0057] In summary, in the embodiment of the present application, by determining at least one element with editable attributes in the browser page, when the first event is triggered for the target element in the at least one element, a style class is added to the target element, wherein there is a corresponding relationship between the style class and the editing mode, and when the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation. This allows different types of browsers to avoid the problem of low element editability caused by kernel reasons, and to edit the element in combination with the added style class and the user editing operation, thereby improving the flexibility of element editing in the browser page.

[0058] Figure 6 is a block diagram of a page element editing device provided by an embodiment of the present application, such as Figure 6 As shown, the device 600 includes: The element attribute module 601 is used to determine at least one element with editable attributes in the browser page; A style adding module 602, configured to add a style class to a target element in the at least one element when a first event is triggered; wherein the style class and the editing mode have a corresponding relationship; The element editing module 603 is used to edit the target element based on the editing mode corresponding to the style class and the user editing operation when the second event is triggered for the target element.

[0059] Optional, element editing module, including: An editing size submodule, used for determining that the editing mode corresponding to the style class is editing size when a second event is triggered for the target element; An operation parameter submodule, used to determine the operation direction and operation distance of the user's editing operation in the editing mode; The parameter editing submodule is used to edit the size of the target element based on the operation direction and the operation distance.

[0060] Optional, parameter editing submodule, including: An objective function unit, configured to determine, based on the operation direction, an objective processing function corresponding to the operation direction; different operation directions correspond to different processing functions; A characteristic parameter unit, configured to execute the target processing function based on the operation distance to determine a characteristic parameter corresponding to the operation distance; the characteristic parameter is used to define the size of the target element; A feature editing unit is used to edit the size of the target element based on the feature parameter.

[0061] Optional, characteristic parameter unit, including: A function execution subunit, configured to execute the target processing function based on the operation distance; The element coordinate subunit is used to obtain the element coordinates corresponding to the operation distance output by the target processing function; the element coordinates are used to limit at least one of the top, bottom, left, right, height and width of the target element.

[0062] Optionally, the device further comprises: The monitoring module is used to add a monitoring attribute to the at least one element; the monitoring attribute indicates that the first event triggered for the target element is in a monitorable state.

[0063] Optionally, the device further comprises: The positioning module is used to add positioning attributes to the target element; the positioning attributes are used to keep the position of the target element fixed when the user performs editing operations.

[0064] Optionally, the device further comprises: The style deletion module is used to delete the style class of the target element when a third event is triggered for the target element; there is a corresponding relationship between the first event and the third event.

[0065] Optional, style adding modules, including: A style configuration submodule, used for acquiring a user configuration when a first event is triggered for a target element in the at least one element; the user configuration is used for indicating an editing mode specified by a user; The user specified submodule is used to add a target style class corresponding to the target editing mode to the target element according to the target editing mode indicated by the user configuration.

[0066] In summary, in the embodiment of the present application, by determining at least one element with editable attributes in the browser page, when the first event is triggered for the target element in the at least one element, a style class is added to the target element, wherein there is a corresponding relationship between the style class and the editing mode, and when the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation. This allows different types of browsers to avoid the problem of low element editability caused by kernel reasons, and to edit the element in combination with the added style class and the user editing operation, thereby improving the flexibility of element editing in the browser page.

[0067] The page element editing device in the embodiment of the present application can be a device, or a component, integrated circuit, or chip in a terminal. The device can be a mobile electronic device or a non-mobile electronic device. Exemplarily, the mobile electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, an in-vehicle electronic device, a wearable device, an ultra-mobile personal computer (UMPC), a netbook, or a personal digital assistant (PDA), etc. The non-mobile electronic device can be a server, a network attached storage (NAS), a personal computer (PC), a television (TV), a teller machine or a self-service machine, etc., which is not specifically limited in the embodiment of the present application.

[0068] The page element editing device in the embodiment of the present application may be a device having an operating system. The operating system may be an Android operating system, an iOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.

[0069] The page element editing device provided in the embodiment of the present application can achieve Figure 1 In order to avoid repetition, the various processes implemented by the page element editing device in the method embodiment will not be described here.

[0070] Optionally, an embodiment of the present application also provides an electronic device, including a processor, a memory, and a program or instruction stored in the memory and executable on the processor. When the program or instruction is executed by the processor, each process of the above-mentioned page element editing method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0071] It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic devices and non-mobile electronic devices mentioned above.

[0072] Figure 7 A schematic diagram of the hardware structure of an electronic device 1000 for implementing an embodiment of the present application.

[0073] The electronic device 1000 includes but is not limited to: a radio frequency unit 1001, a network module 1002, an audio output unit 1003, an input unit 1004, a sensor 1005, a display unit 1006, a user input unit 1007, an interface unit 1008, a memory 1009, and a processor 1010 and other components.

[0074] Those skilled in the art will appreciate that the electronic device 1000 may also include a power source (such as a battery) for supplying power to various components, and the power source may be logically connected to the processor 1010 through a power management system, thereby implementing functions such as managing charging, discharging, and power consumption management through the power management system. Figure 7 The electronic device structure shown in the figure does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently, which will not be described in detail here.

[0075] The processor 1010 is used to determine at least one element having an editable attribute in the browser page; When the first event is triggered for a target element among the at least one element, a style class is added to the target element; wherein there is a corresponding relationship between the style class and the editing mode; When the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation.

[0076] Optionally, the processor 1010 is used to In the case where the second event is triggered for the target element, determining that the editing mode corresponding to the style class is editing size; In the editing mode, determining the operation direction and operation distance of the user's editing operation; The size of the target element is edited based on the operation direction and the operation distance.

[0077] Optionally, the processor 1010 is used to Based on the operation direction, determining a target processing function corresponding to the operation direction; different operation directions correspond to different processing functions; Based on the operation distance, executing the target processing function to determine a characteristic parameter corresponding to the operation distance; the characteristic parameter is used to define the size of the target element; Based on the characteristic parameters, the size of the target element is edited.

[0078] Optionally, the processor 1010 is used to Based on the operation distance, executing the target processing function; The element coordinates output by the target processing function and corresponding to the operation distance are obtained; the element coordinates are used to define at least one of the top, bottom, left, right, height and width of the target element.

[0079] Optionally, the processor 1010 is further configured to: A monitoring attribute is added to the at least one element; the monitoring attribute indicates that the first event triggered for the target element is in a monitorable state.

[0080] Optionally, the processor 1010 is further configured to: A positioning attribute is added to the target element; the positioning attribute is used to keep the position of the target element fixed when a user edits the element.

[0081] Optionally, the processor 1010 is further configured to: When a third event is triggered for the target element, the style class of the target element is deleted; there is a corresponding relationship between the first event and the third event.

[0082] Optionally, the processor 1010 is used to When the first event is triggered for a target element in the at least one element, obtaining a user configuration; the user configuration is used to represent an editing mode specified by a user; According to the target editing mode indicated by the user configuration, a target style class corresponding to the target editing mode is added to the target element.

[0083] In an embodiment of the present application, by determining at least one element with editable attributes in a browser page, when a first event is triggered for a target element in the at least one element, a style class is added to the target element, wherein there is a corresponding relationship between the style class and the editing mode, and when a second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation. This allows different types of browsers to avoid the problem of low element editability caused by kernel reasons, and to edit the element in combination with the added style class and the user editing operation, thereby improving the flexibility of element editing in the browser page.

[0084] It should be understood that in the embodiment of the present application, the input unit 1004 may include a graphics processor (GPU) 10041 and a microphone 10042, and the graphics processor 10041 processes the image data of the static picture or video obtained by the image capture device (such as a camera) in the video capture mode or the image capture mode. The display unit 1006 may include a display panel 10061, and the display panel 10061 may be configured in the form of a liquid crystal display, an organic light emitting diode, etc. The user input unit 1007 includes a touch panel 10071 and at least one of other input devices 10072. The touch panel 10071 is also called a touch screen. The touch panel 10071 may include two parts: a touch detection device and a touch controller. Other input devices 10072 may include, but are not limited to, a physical keyboard, function keys (such as a volume control key, a switch key, etc.), a trackball, a mouse, and a joystick, which will not be repeated here.

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

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

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

[0088] The processor is a processor in the electronic device described in the above embodiment. The readable storage medium includes a readable storage medium, such as a computer read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0089] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned page element editing method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

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

[0091] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present application.

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

Claims

1. A page element editing method, characterized in that: The method comprises: Determining at least one element in the browser page that has an editable attribute; When the first event is triggered for a target element among the at least one element, a style class is added to the target element; wherein there is a corresponding relationship between the style class and the editing mode; When the second event is triggered for the target element, the target element is edited based on the editing mode corresponding to the style class and the user editing operation.

2. The method according to claim 1, characterized in that The step of editing the target element based on the editing mode corresponding to the style class and the user editing operation when the second event is triggered for the target element includes: In the case where the second event is triggered for the target element, determining that the editing mode corresponding to the style class is editing size; In the editing mode, determining the operation direction and operation distance of the user's editing operation; The size of the target element is edited based on the operation direction and the operation distance.

3. The method according to claim 2, characterized in that The step of editing the size of the target element based on the operation direction and the operation distance includes: Based on the operation direction, determining a target processing function corresponding to the operation direction; different operation directions correspond to different processing functions; Based on the operation distance, executing the target processing function to determine a characteristic parameter corresponding to the operation distance; the characteristic parameter is used to define the size of the target element; Based on the characteristic parameters, the size of the target element is edited.

4. The method according to claim 3, characterized in that The step of executing the target processing function based on the operation distance to determine the characteristic parameter corresponding to the operation distance includes: Based on the operation distance, executing the target processing function; The element coordinates output by the target processing function and corresponding to the operation distance are obtained; the element coordinates are used to define at least one of the top, bottom, left, right, height and width of the target element.

5. The method according to claim 1, characterized in that After the step of determining at least one element having an editable attribute in the browser page, the method further comprises: A monitoring attribute is added to the at least one element; the monitoring attribute indicates that the first event triggered for the target element is in a monitorable state.

6. The method according to claim 1, characterized in that Before the step of editing the target element based on the editing mode corresponding to the style class and the user editing operation, the method further includes: A positioning attribute is added to the target element; the positioning attribute is used to keep the position of the target element fixed when a user edits the element.

7. The method according to claim 1, characterized in that In the case where the first event is triggered for a target element among the at least one element, after the step of adding a style class to the target element, the method further includes: When a third event is triggered for the target element, the style class of the target element is deleted; there is a corresponding relationship between the first event and the third event.

8. The method according to claim 1, characterized in that The step of adding a style class to a target element in the at least one element when the first event is triggered includes: When a first event is triggered for a target element in the at least one element, obtaining a user configuration; the user configuration is used to represent an editing mode specified by a user; According to the target editing mode indicated by the user configuration, a target style class corresponding to the target editing mode is added to the target element.

9. A page element editing device, characterized in that: The device comprises: An element attribute module, for determining at least one element having editable attributes in a browser page; A style adding module, used for adding a style class to a target element in the at least one element when a first event is triggered; wherein there is a corresponding relationship between the style class and the editing mode; The element editing module is used to edit the target element based on the editing mode corresponding to the style class and the user editing operation when the second event is triggered for the target element.

10. An electronic device, characterized in that: The method comprises a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein the program or instruction, when executed by the processor, implements the steps of the page element editing method as claimed in any one of claims 1 to 8.

11. A readable storage medium, characterized in that: The readable storage medium stores a program or instruction, and when the program or instruction is executed by a processor, the steps of the page element editing method according to any one of claims 1 to 8 are implemented.

Images