Visual editing system and method

Abstract

The invention provides a visual editing system and method, and the system comprises an editing configuration module which is configured to define a pendant editing parameter and process a pendant editing logic relation; the visual editing module is configured to perform rendering according to the pendant editing parameters and the pendant editing logic relationship so as to generate form data; the visual transmission module is configured to transmit the form data; the pendant data processing module is configured to perform format definition on the form data to generate rendering data; the pendant display processing module is configured to render the pendants according to the rendering data and display the rendered pendants; and the visual transmission module and the display processing module are located at a client.

Description

Technical Field

[0001] The present application mainly relates to the field of electronic technology, and in particular to a visual editing system and method. Background Art

[0002] The visual web page editing solution is to automatically present the corresponding page on the real display end by performing visual editing and maintenance in the background system. Generally, the visual editing solution will implement a set of display content with the same UI effect as the display end in the background system to present it to the user to achieve the visual editing effect. The visual web page editing solution usually requires the maintenance of a set of display components on both the editing end and the display end to present the editing effect, which has the disadvantage of high maintenance cost.

[0003] The existing technical solution for visual editing requires an additional set of maintenance on the editing platform and the client display UI. The display effect is limited by various resources, including style files such as font packages, UI frameworks, and the technical stacks of the client and backend, which results in many shortcomings in that the styles on both ends cannot be completely consistent.

[0004] Furthermore, while maintaining two sets of display UIs, each end also needs to maintain two sets of widget interaction solutions, as well as data communication and state logic between widgets. These contents are often highly coupled in visualization and more complex widget modules. They are also limited by the differences between the ends, and the implementation methods cannot be completely unified. In this case, the difficulty of logic reuse at both ends will increase rapidly, and with the iteration of the project, these highly coupled modules will gradually make the project sink into the mud, making the entire visual editing module more and more unstable. Since two sets of display solutions need to be maintained, the maintenance cost will naturally rise. In the process of project iteration, there will often be a burden of 1+1>2. In large projects, the communication cost between the backend and the client is also an important link that cannot be ignored. Summary of the invention

[0005] The technical problem to be solved by the present application is to provide a visual editing system and method, so that the visual editing system only needs to maintain one set of display UI, which can reduce maintenance costs and improve the stability of the visual editing system.

[0006] To solve the above technical problems, the present application provides a visual editing system, including: an editing configuration module, which is configured to define widget editing parameters and process widget editing logical relationships; a visual editing module, which is configured to render according to the widget editing parameters and the widget editing logical relationships to generate form data; a visual transmission module, which is configured to transmit the form data; a widget data processing module, which is configured to define the format of the form data to generate rendering data; a widget display processing module, which is configured to render the widget according to the rendering data and display the rendered widget; and the display processing module is located on the client.

[0007] Optionally, the visual editing system further comprises a visual data processing module, wherein the visual data processing module is configured to store the form data after format definition and upload the form data after format definition to a server.

[0008] Optionally, the visual editing system further includes a widget editing permission management module, and the widget editing permission management module is configured to control the editing permission of the widget.

[0009] Optionally, the widget data processing module is configured to define the format of the form data according to display requirements, wherein the display requirements include widget data format requirements, widget color requirements, widget button hot zone requirements, widget border type requirements, and widget module list presentation method requirements.

[0010] Optionally, the manner in which the visual transmission module transmits the form data includes Postmessage communication.

[0011] Optionally, the visual transmission module and the display processing module are embedded in the client via iframe.

[0012] Optionally, the widget display processing module is further configured to process the interaction logic of the widget.

[0013] To solve the above technical problems, the present application provides a visual editing method, which is applicable to the visual editing module as described above, and includes the following steps: defining widget editing parameters and processing widget editing logical relationships; rendering according to the widget editing parameters and the widget editing logical relationships to generate form data; formatting the form data to generate rendering data; rendering the widget according to the rendering data and displaying the rendered widget.

[0014] Optionally, rendering according to the widget editing parameters and the widget editing logical relationship includes presenting a form.

[0015] In order to solve the above technical problem, the present application provides a computer-readable medium storing a computer program code, and the computer program code implements the above method when executed by a processor.

[0016] Compared with the prior art, the present application can integrate the client and the backend in the visual editing system by setting a display processing module on the client of the visual editing system, so that the backend can focus on visual editing. At the same time, the visual editing system only needs to maintain one set of display UI to realize visual editing and display functions, which can reduce maintenance costs and further improve the stability of the visual editing system. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The accompanying drawings are included to provide a further understanding of the present application. They are included and constitute a part of the present application. The accompanying drawings illustrate embodiments of the present application and together with the present specification serve to explain the principles of the present application. In the accompanying drawings:

[0018] Figure 1 It is a schematic diagram of the module structure of a visual editing system in one embodiment of the present application;

[0019] Figure 2 It is a flowchart of a visual editing method in one embodiment of the present application. DETAILED DESCRIPTION

[0020] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following is a brief introduction to the drawings required for the description of the embodiments. Obviously, the drawings described below are only some examples or embodiments of the present application. For ordinary technicians in this field, the present application can also be applied to other similar scenarios based on these drawings without creative work. Unless it is obvious from the language environment or otherwise explained, the same reference numerals in the figures represent the same structure or operation.

[0021] As shown in this application and claims, unless the context clearly indicates an exception, the words "a", "an", "an" and / or "the" do not refer to the singular and may also include the plural. Generally speaking, the terms "include" and "comprise" only indicate the inclusion of the steps and elements that have been clearly identified, and these steps and elements do not constitute an exclusive list. The method or device may also include other steps or elements.

[0022] Unless otherwise specifically stated, the relative arrangement, numerical expressions and numerical values ​​of the parts and steps set forth in these embodiments do not limit the scope of the present application. At the same time, it should be understood that, for ease of description, the sizes of the various parts shown in the accompanying drawings are not drawn according to the actual proportional relationship. The technology, method and equipment known to those of ordinary skill in the relevant field may not be discussed in detail, but in appropriate cases, the technology, method and equipment should be considered as a part of the authorization specification. In all examples shown and discussed here, any specific value should be interpreted as being merely exemplary, rather than as a limitation. Therefore, other examples of exemplary embodiments may have different values. It should be noted that similar reference numerals and letters represent similar items in the following drawings, so that once a certain item is defined in an accompanying drawing, it does not need to be further discussed in subsequent drawings.

[0023] In the description of the present application, it should be understood that the directions or positional relationships indicated by directional words such as "front, back, up, down, left, right", "lateral, vertical, perpendicular, horizontal" and "top, bottom" are usually based on the directions or positional relationships shown in the drawings, and are only for the convenience of describing the present application and simplifying the description. Unless otherwise specified, these directional words do not indicate or imply that the device or element referred to must have a specific direction or be constructed and operated in a specific direction, and therefore cannot be understood as limiting the scope of protection of the present application; the directional words "inside and outside" refer to the inside and outside relative to the contours of each component itself.

[0024] For ease of description, spatially relative terms such as "above", "above", "on the upper surface of", "above", etc. may be used here to describe the spatial positional relationship between a device or feature and other devices or features as shown in the figure. It should be understood that spatially relative terms are intended to include different orientations of the device in use or operation in addition to the orientation described in the figure. For example, if the device in the accompanying drawings is inverted, the device described as "above other devices or structures" or "above other devices or structures" will be positioned as "below other devices or structures" or "below other devices or structures". Thus, the exemplary term "above" can include both "above" and "below". The device can also be positioned in other different ways (rotated 90 degrees or in other orientations), and the spatially relative descriptions used here are interpreted accordingly.

[0025] In addition, it should be noted that the use of words such as "first" and "second" to define components is only for the convenience of distinguishing the corresponding components. If not otherwise stated, the above words have no special meaning and cannot be understood as limiting the scope of protection of this application. In addition, although the terms used in this application are selected from well-known and commonly used terms, some terms mentioned in the specification of this application may be selected by the applicant at his or her discretion, and their detailed meanings are explained in the relevant parts of the description of this article. In addition, it is required to understand this application not only by the actual terms used, but also by the meaning implied by each term.

[0026] This application refers to Figure 1 A visual editing system 10 (hereinafter referred to as "editing system 10") is provided, such as Figure 1 As shown, the editing system 10 mainly includes an editing configuration module, a visual editing module, a visual transmission module, a widget data processing module, and a widget display processing module. Among them, the display processing module is located on the client. Exemplarily, the display processing module is embedded in the client through an iframe. In other embodiments of the present application, the display processing module can also be embedded in the client through other methods, and the present application does not limit this.

[0027] By setting the display processing module on the client, the present application enables the visual editing system to only maintain one set of display UI. That is, during the editing process in the background, the client can be completely suppressed without worrying about technical difficulties caused by technical differences between the background and the client. At the same time, only one set of display UI needs to be maintained, which can reduce maintenance costs and difficulty and improve the stability of the visual editing system.

[0028] Specifically, the editing configuration module is configured to define widget editing parameters and process widget editing logical relationships; the visual editing module is configured to render according to widget editing parameters and widget editing logical relationships to generate form data; the visual transmission module is configured to transmit form data to the widget data processing module, and exemplarily, the visual transmission module transmits form data in a manner including Postmessage communication. In other embodiments of the present application, the visual transmission module also transmits form data in other manners, which are not limited by the present application.

[0029] Furthermore, the widget data processing module is configured to define the format of the form data to generate rendering data, wherein the widget data processing module is configured to define the format of the form data according to the display requirements, and the display requirements include widget data format requirements, widget color requirements, widget button hot zone requirements, widget border type requirements, and widget module list presentation method requirements. On the other hand, the widget display module is configured to render the widget according to the rendering data and display the rendered widget, wherein the widget display processing module is also configured to process the interactive logic of the widget.

[0030] In this embodiment, the editing system 10 also includes a visual data processing module, wherein the visual data processing module is configured to store the form data after format definition, and upload the form data after format definition to the server, for example, reporting the form data as a whole. At the same time, the visual data processing module can also verify the form data, and save the form data to the server as a reserve resource, so that when the same situation is edited later, the stored form data can be directly called, thereby improving the efficiency of visual editing.

[0031] Furthermore, the editing system 10 also includes a widget editing permission management module, which is configured to control the editing permissions of the widgets. That is, the editing system 10 configures the editing permissions of each widget in the widget editing permission management module, which can be flexibly provided for use in different editing scenarios.

[0032] On the other hand, the present application also refers to Figure 2 A visual editing method 20 is shown, which is applicable to the visual editing method proposed in any embodiment of the present application, such as the above-mentioned visual editing method 10. A flow chart is used in the present application to illustrate the operations performed by the system according to the embodiment of the present application. It should be understood that the previous or following operations are not necessarily performed precisely in order. On the contrary, various steps can be processed in reverse order or simultaneously. At the same time, other operations may be added to these processes, or one or more operations may be removed from these processes.

[0033] Specifically, the visual editing method 20 includes steps S1 to S4. Among them, step S1 includes defining widget editing parameters and processing widget editing logical relationships; step S2 includes rendering according to the widget editing parameters and the widget editing logical relationships to generate form data; step S3 includes formatting the form data to generate rendering data; step S4 includes rendering the widget according to the rendering data and displaying the rendered widget. Among them, rendering according to the widget editing parameters and the widget editing logical relationships includes presenting a form form.

[0034] The visual editing method 20 will now be described in detail. First, the visual editing method 20 defines the widget editing parameters and processes the widget editing logical relationship through the editing configuration module. Then, the visual editing module renders according to the widget editing parameters and the widget editing logical relationship to present the form form, and provides the form editing capability to generate form data. When receiving the customer's instructions, the form data is transferred to the widget data processing module through the visual transmission module for data processing. In this embodiment, the data processed in the visual transmission module can be uploaded to the database through the visual data processing module. At the same time, the data processed in the visual transmission module can also be further formatted to generate rendering data. Finally, the widget is rendered and displayed according to the rendering data through the widget display processing module to present it to the customer.

[0035] By setting a visualization transmission module and a display processing module on the client of the visualization editing system, the present application can integrate the client and the backend in the visualization editing system, so that the backend can focus on visualization editing. At the same time, the visualization editing system only needs to maintain one set of display UI to realize visualization editing and display functions, which can reduce maintenance costs and further improve the stability of the visualization editing system.

[0036] In addition, the present application also proposes a computer-readable medium storing computer program codes, and the computer program codes implement the above-mentioned visual editing method when executed by a processor.

[0037] The basic concepts have been described above. Obviously, for those skilled in the art, the above application disclosure is only an example and does not constitute a limitation of the present application. Although not explicitly stated herein, those skilled in the art may make various modifications, improvements and amendments to the present application. Such modifications, improvements and amendments are suggested in the present application, so such modifications, improvements and amendments still belong to the spirit and scope of the exemplary embodiments of the present application.

[0038] At the same time, the present application uses specific words to describe the embodiments of the present application. For example, "one embodiment", "an embodiment", and / or "some embodiments" refer to a certain feature, structure or characteristic related to at least one embodiment of the present application. Therefore, it should be emphasized and noted that "one embodiment" or "an embodiment" or "an alternative embodiment" mentioned twice or more in different positions in this specification does not necessarily refer to the same embodiment. In addition, some features, structures or characteristics in one or more embodiments of the present application can be appropriately combined.

[0039] Some aspects of the present application may be performed entirely by hardware, entirely by software (including firmware, resident software, microcode, etc.), or by a combination of hardware and software. The above hardware or software may be referred to as "data blocks", "modules", "engines", "units", "components" or "systems". The processor may be one or more application specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DAPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), processors, controllers, microcontrollers, microprocessors, or combinations thereof. In addition, various aspects of the present application may be expressed as computer products located in one or more computer-readable media, which include computer-readable program codes. For example, computer-readable media may include, but are not limited to, magnetic storage devices (e.g., hard disks, floppy disks, tapes ...), optical disks (e.g., compact disks CDs, digital versatile disks DVDs ...), smart cards, and flash memory devices (e.g., cards, sticks, key drives ...).

[0040] A computer-readable medium may include a propagated data signal containing computer program code, such as in baseband or as part of a carrier wave. The propagated signal may have a variety of manifestations, including electromagnetic, optical, etc., or a suitable combination. A computer-readable medium may be any computer-readable medium other than a computer-readable storage medium, which may be connected to an instruction execution system, device or apparatus to communicate, propagate or transmit a program for use. The program code on the computer-readable medium may be propagated via any suitable medium, including radio, cable, fiber optic cable, radio frequency signal, or similar medium, or any combination of the above mediums.

[0041] Similarly, it should be noted that in order to simplify the description of the disclosure of this application and thus help understand one or more application embodiments, in the above description of the embodiments of this application, multiple features are sometimes merged into one embodiment, figure or description thereof. However, this disclosure method does not mean that the features required by the object of this application are more than the features mentioned in the claims. In fact, the features of the embodiments are less than all the features of the single embodiment disclosed above.

[0042] In some embodiments, numbers describing the number of components and attributes are used. It should be understood that such numbers used in the description of the embodiments are modified by the modifiers "about", "approximately" or "substantially" in some examples. Unless otherwise specified, "about", "approximately" or "substantially" indicate that the numbers are allowed to vary by ±20%. Accordingly, in some embodiments, the numerical parameters used in the specification and claims are approximate values, which may change according to the required features of individual embodiments. In some embodiments, the numerical parameters should take into account the specified significant digits and adopt the general method of retaining digits. Although the numerical domains and parameters used to confirm the breadth of their range in some embodiments of the present application are approximate values, in specific embodiments, the setting of such numerical values ​​is as accurate as possible within the feasible range.

[0043] Although the present application has been described with reference to the current specific embodiments, ordinary technicians in this technical field should recognize that the above embodiments are only used to illustrate the present application, and various equivalent changes or substitutions may be made without departing from the spirit of the present application. Therefore, as long as the changes and modifications to the above embodiments are within the essential spirit of the present application, they will fall within the scope of the claims of the present application.

Claims

1. A visual editing system, characterized in that: include: An editing configuration module, wherein the editing configuration module is configured to define widget editing parameters and process widget editing logical relationships; A visual editing module, wherein the visual editing module is configured to render according to the widget editing parameters and the widget editing logical relationship to generate form data; A visual transmission module, wherein the visual transmission module is configured to transmit the form data; A widget data processing module, wherein the widget data processing module is configured to perform format definition on the form data to generate rendering data; a widget display processing module, the widget display module being configured to render the widget according to the rendering data and display the rendered widget; and The display processing module is located at the client.

2. The visual editing system according to claim 1, characterized in that: It also includes a visual data processing module, which is configured to store the form data after format definition and upload the form data after format definition to a server.

3. The visual editing system according to claim 1, characterized in that: It also includes a widget editing authority management module, which is configured to control the editing authority of the widget.

4. The visual editing system according to claim 1, wherein: The widget data processing module is configured to define the format of the form data according to display requirements, including widget data format requirements, widget color requirements, widget button hot zone requirements, widget border type requirements, and widget module list presentation method requirements.

5. The visual editing system according to claim 1, wherein: The manner in which the visual transmission module transmits the form data includes Postmessage communication.

6. The visual editing system according to claim 1, characterized in that: The visual transmission module and the display processing module are embedded in the client through iframe.

7. The visual editing system according to claim 1, wherein: The widget display processing module is also configured to process the interaction logic of the widget.

8. A visual editing method, applicable to the visual editing module as claimed in claims 1 to 7, characterized in that: The steps include: Define widget editing parameters and handle widget editing logic; Rendering is performed according to the widget editing parameters and the widget editing logical relationship to generate form data; Performing format definition on the form data to generate rendering data; The widget is rendered according to the rendering data and the rendered widget is displayed.

9. The visual editing method according to claim 8, characterized in that: Rendering according to the widget editing parameters and the widget editing logical relationship includes presenting a form.

10. A computer readable medium storing computer program code, wherein the computer program code implements the method according to claims 8 to 9 when executed by a processor.

Images