CN109740096B - Method, device and system for realizing real-time preview and storage medium - Google Patents
Method, device and system for realizing real-time preview and storage medium Download PDFInfo
- Publication number
- CN109740096B CN109740096B CN201811626812.1A CN201811626812A CN109740096B CN 109740096 B CN109740096 B CN 109740096B CN 201811626812 A CN201811626812 A CN 201811626812A CN 109740096 B CN109740096 B CN 109740096B
- Authority
- CN
- China
- Prior art keywords
- webpage
- terminal
- editing
- preview
- connection
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000004891 communication Methods 0.000 claims description 13
- 230000005856 abnormality Effects 0.000 claims description 3
- 230000002159 abnormal effect Effects 0.000 description 15
- 230000002085 persistent effect Effects 0.000 description 5
- 230000002457 bidirectional effect Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000000126 substance Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a method for realizing real-time preview, which comprises the following steps: establishing connection between a webpage editing terminal and a server; establishing connection between a webpage preview terminal and the server; and the server receives the editing information sent by the webpage editing terminal and sends the editing information to the webpage preview terminal so as to realize the real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal. According to the invention, the webpage editing terminal and the webpage preview terminal are respectively connected with the server through the Websocket protocol, the webpage editing terminal sends the information of the edited webpage to the webpage preview terminal through the server in real time, and the webpage preview terminal can preview the editing state of the webpage editing terminal on the webpage in real time.
Description
Technical Field
The present disclosure relates to the field of computer communications, and in particular, to a method, an apparatus, a system, and a storage medium for implementing real-time preview.
Background
Along with the improvement of the current living standard of people, the living demand degree is higher and higher, and the appearance of the Internet meets the living demand of people to a certain extent. In the aspect of web page editing in the internet, currently, the main editing work is to edit a web page through a computer editing terminal, and release the edited web page after the editing is completed. The web page issued by the computer editing terminal can be applied to a computer terminal and a mobile terminal (a mobile phone terminal), and because the computer terminal and the mobile terminal have difference to a certain extent, problems may occur in editing the part with the difference. And the problem is usually discovered when the mobile terminal accesses the webpage published by the computer editing terminal.
Disclosure of Invention
In order to solve the above technical problems, a main object of the present invention is to provide a method, an apparatus, a system and a storage medium for implementing real-time preview, so as to solve the technical problem in the prior art that whether an edited web page cannot be previewed in real time when a computer editing terminal edits the web page is adapted to a mobile terminal.
The technical scheme of the invention is realized by the following modes:
a method for realizing real-time preview comprises the following steps:
establishing connection between a webpage editing terminal and a server;
establishing connection between a webpage preview terminal and the server;
and the server receives the editing information sent by the webpage editing terminal and sends the webpage editing information to the webpage preview terminal so as to realize the real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal.
Preferably, after the establishing of the connection between the web page editing terminal and the server, the method further includes:
and generating connection information for establishing connection between the webpage preview terminal and the server, wherein the connection information comprises a two-dimensional code and a link address.
Preferably, the establishing of the connection between the web page preview terminal and the server specifically includes:
and establishing connection between the webpage preview terminal and the server according to the connection information.
Preferably, the establishing of the connection between the web page editing terminal and the server specifically includes: establishing a Websocket connection between the webpage editing terminal and the server;
the establishing of the connection between the web page preview terminal and the server according to the connection information specifically comprises the following steps: and establishing Websocket connection between the webpage preview terminal and the server according to the connection information.
Preferably, before the step of implementing the real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal, the method further includes:
and judging whether the preview terminal is in a preview state, and executing the real-time preview step when the preview terminal is in the preview state.
Preferably, after the step of implementing the real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal, the method further includes:
and when the content display abnormality occurs in the preview webpage of the webpage preview terminal, feeding back the webpage editing state in the webpage editing terminal through the webpage preview terminal.
Preferably, the step of feeding back the webpage editing state in the webpage editing terminal through the webpage preview terminal specifically includes:
and generating feedback information by clicking a component which is displayed abnormally in the preview webpage, sending the feedback information to the server by the webpage preview terminal, receiving the feedback information by the server and sending the feedback information to the webpage editing terminal so as to realize the feedback of the webpage preview terminal to the webpage editing terminal.
Preferably, the webpage editing terminal responds to the feedback information after receiving the feedback information, and the responding includes highlighting the component or popping up a setting window.
Preferably, before the establishing of the connection between the web page editing terminal and the server, the method further includes:
the webpage editing terminal loads a first control file and a second control file from a network, wherein:
the first control file is used for editing a webpage;
and the second control file is used for controlling an area for previewing by the preview terminal in the editing webpage.
Preferably, before establishing the connection between the web page preview terminal and the server according to the connection information, the method further includes:
and the webpage preview terminal loads a third control file and a second control file from a network according to the connection information, wherein:
the third control file is used for controlling and editing the information of the area for previewing by the terminal in the webpage;
and the second control file is used for controlling the area previewed by the preview terminal.
Preferably, the web page editing terminal is a computer editing terminal, and the preview terminal is a mobile preview terminal.
An apparatus for implementing real-time preview, comprising:
the webpage editing terminal is used for editing a webpage;
the webpage preview terminal is used for previewing the webpage edited by the webpage editing terminal;
the server is used for storing and transmitting information sent by the webpage editing terminal and the webpage preview terminal;
the first connection module is used for establishing connection between the webpage editing terminal and the server;
the second connection module is used for establishing the connection between the webpage preview terminal and the server;
the server receives the editing information sent by the webpage editing terminal through the first communication module and sends the webpage editing information to the webpage preview terminal through the second communication module so as to realize real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal.
A system for implementing real-time preview comprises:
a memory for storing program instructions;
and the processor is used for executing the program instructions to realize the real-time preview realization method. A storage medium storing readable instructions, which can be executed by a processor to implement the above-mentioned implementation method for implementing preview.
Compared with the prior art, the method, the device, the system and the storage medium for realizing the real-time preview have the following beneficial effects:
1) according to the invention, the webpage editing terminal and the webpage preview terminal are respectively connected with the server through the Websocket protocol, the webpage editing terminal sends the information of the edited webpage to the webpage preview terminal through the server in real time, and the webpage preview terminal can preview the editing state of the webpage editing terminal on the webpage in real time.
2) When the webpage preview terminal previews the webpage edited by the webpage editing terminal in real time, the webpage is found to have a problematic component, and the problematic component in the currently previewed webpage can be clicked through the webpage preview terminal. And then the webpage preview terminal sends the clicked feedback information to an editing webpage of the webpage editing terminal through a Websocket protocol and a server, and the component with the problem is displayed in a special mode (such as highlight and the like) so as to prompt an editor of the webpage editing terminal that the component has the problem at the preview terminal, so that the modification is convenient, and the problem of the user terminal in use after the webpage is released is avoided.
3) The webpage editing terminal, the webpage preview terminal and the user use terminal use the same preview webpage display file which is a common file in the network, so that the preview webpage display file is prevented from being developed for many times, and the development cost is reduced.
Drawings
In order to more clearly illustrate the embodiments of the present specification or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only some embodiments described in the present specification, and for those skilled in the art, other drawings can be obtained according to the drawings without any creative effort.
Fig. 1 is a schematic flowchart of a method for implementing real-time preview according to an embodiment of the present invention;
fig. 2 is a schematic flowchart of a method for implementing real-time preview according to another embodiment of the present invention;
fig. 3 is a schematic structural diagram of a real-time preview device according to an embodiment of the present invention;
fig. 4 is a schematic structural diagram of a real-time preview device according to another embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It is to be understood that the embodiments described are only a few embodiments of the present application and not all embodiments. All other embodiments, which can be obtained by a person skilled in the art without making any inventive step based on the embodiments of the present disclosure, shall fall within the scope of protection of the present application.
The invention is further explained with reference to the drawings.
Example one
As shown in fig. 1, a schematic flow chart of a method for implementing real-time preview according to an embodiment of the present invention is provided, where the method mainly includes the following steps:
step S100: establishing connection between a webpage editing terminal and a server, wherein the steps specifically comprise: the method comprises the steps that connection between a webpage editing terminal and a server is established through a Websocket protocol, after the webpage editing terminal and the server complete one-time handshake through the Websocket protocol, persistent connection can be directly established between the webpage editing terminal and the server, and bidirectional data transmission is conducted.
The web page editing terminal is a computer editing terminal, and a developer/editor edits the edited web page through a computer.
Step S200: establishing a connection between the webpage preview terminal and the server, wherein the steps specifically comprise: the connection between the mobile preview terminal and the server is established through the Websocket protocol, and after the mobile preview terminal and the server complete one-time handshake through the Websocket protocol, persistent connection can be directly established between the mobile preview terminal and the server, and bidirectional data transmission is carried out. The mobile preview terminal can be a mobile phone terminal.
Step S300: and when the computer editing terminal is successfully connected with the server through the Websocket protocol, transmitting editing information of an editing webpage to the server through the Websocket protocol, wherein the editing webpage comprises a preview area and an area containing editing function keys, and the editing information refers to the editing information of the preview area. Some components in the editing webpage of the computer editing terminal are provided with different editing windows for adapting the browser of the computer terminal and the browser of the preview terminal. Only files corresponding to the browser of the computer terminal or the browser of the preview terminal are uploaded in the editing windows corresponding to the components, and can be normally displayed and previewed on the browser of the computer terminal or the browser of the preview terminal.
Because the communication can be carried out through the Websocket protocol, the server resources and the bandwidth can be better saved, and the communication can be carried out in real time, after the computer editing terminal sends the webpage editing information to the server, the server sends the editing information to the mobile phone terminal, and the webpage editing information transmitted to the server from the computer editing terminal can be previewed in real time directly through a browser in the mobile phone.
By the technical scheme, an editor can edit the webpage by using the computer editing terminal and preview the edited webpage in real time by moving the preview terminal. When the webpage is edited by the computer editing terminal, the abnormal display of the components in the previewed webpage can be found in time when the webpage is previewed by the mobile phone terminal, and then the modification is carried out. The technical scheme avoids the problem that when the webpage is edited by the computer editing terminal, the situation that the preview webpage in the mobile webpage preview terminal is abnormally displayed by the component can not be found in time, so that the webpage with the abnormally displayed component can be directly used by a user when the mobile terminal is used.
Example two
As shown in fig. 2, a schematic flow chart of a method for implementing real-time preview according to another embodiment of the present invention is provided, where the method mainly includes the following steps:
step S400: establishing connection between a webpage editing terminal and a server, wherein the steps specifically comprise: the method comprises the steps that connection between a webpage editing terminal and a server is established through a Websocket protocol, after the webpage editing terminal and the server complete one-time handshake through the Websocket protocol, persistent connection can be directly established between the webpage editing terminal and the server, and bidirectional data transmission is conducted. The web page editing terminal is a computer editing terminal, and a developer/editor edits the edited web page through a computer.
After the connection between the web page editing terminal and the server is established, the method further comprises the following steps: and the computer editing terminal generates connection information for establishing connection between the webpage preview terminal and the server, and the connection information is displayed in an editing webpage of the computer editing terminal. The connection information may include a two-dimensional code and/or a link address. The connection information is generated for establishing connection between the webpage preview terminal and the server so as to realize real-time preview of the webpage preview terminal on the edited webpage in the computer editing terminal.
Step S500: establishing a connection between the webpage preview terminal and the server, wherein the steps specifically comprise: and the webpage preview terminal establishes connection with the server through the connection information generated by the webpage editing terminal. The connection can be established between the webpage preview terminal and the server through a Websocket protocol, and after the webpage preview terminal and the server complete one-time handshake through the Websocket protocol, persistent connection can be directly established between the webpage preview terminal and the server, and bidirectional data transmission is carried out. The webpage preview terminal can be a mobile phone terminal.
S600: and after the computer editing terminal is successfully connected with the server through the Websocket protocol, the editing information of the editing webpage is transmitted to the server through the Websocket protocol, and different editing windows are matched with the browser of the computer terminal and the browser of the preview terminal by some components in the editing webpage of the computer editing terminal. Only files corresponding to the browser of the computer terminal or the browser of the preview terminal are uploaded in the editing windows corresponding to the components and can be normally displayed in the browser of the computer terminal or the browser of the preview terminal.
Because the communication can be carried out through the Websocket protocol, the server resources and the bandwidth can be better saved, and the communication can be carried out in real time, after the computer editing terminal sends the webpage editing information to the server, the server sends the editing information to the mobile phone terminal, and the webpage editing information transmitted to the server from the computer editing terminal can be previewed in real time directly through a browser in the mobile phone. Before the step of previewing the webpage editing state in the webpage editing terminal in real time by the webpage previewing terminal is realized, judging whether the previewing terminal is in a previewing state, and executing the step of previewing in real time when the previewing terminal is in the previewing state. The judgment is that the mobile phone automatically judges according to the connection information. When the preview terminal is in a preview state, the preview webpage in the preview terminal can not be edited, so that the webpage is prevented from being edited by the preview terminal, and confusion in a computer editing terminal is prevented.
By the technical scheme, an editor can edit the webpage by using the computer editing terminal and preview the edited webpage in real time by using the mobile terminal webpage preview terminal. When the webpage is edited by the computer editing terminal, the abnormal display of the components in the previewed webpage can be found in time when the webpage is previewed by the mobile phone terminal, and then the modification is carried out. The technical scheme avoids the problem that when the webpage is edited by the computer editing terminal, the situation that the preview webpage in the mobile webpage preview terminal is abnormally displayed by the component can not be found in time, so that the webpage with the abnormally displayed component can be directly used by a user when the mobile terminal is used.
Step S700: after the step of implementing the real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal, the method further comprises the following steps: and when the content display abnormality occurs in the preview webpage of the webpage preview terminal, feeding back the webpage editing state in the webpage editing terminal through the webpage preview terminal.
The method comprises the following steps: when a webpage being edited by a computer editing terminal is previewed through a mobile phone browser and when a certain component in a previewed webpage displayed in the mobile phone browser is displayed abnormally, feedback information is generated by clicking the component displayed abnormally in the previewed webpage, the webpage previewing terminal sends the feedback information to the server through a Websocket protocol, and the server receives the feedback information and sends the feedback information to the webpage editing terminal through the Websocket protocol so as to realize the feedback of the webpage previewing terminal to the webpage editing terminal.
The abnormal condition displayed by the component may include the color of the component, the position of the component, the picture loaded by the component, and the like. The reason for the abnormal display of the component may be that the editing port adapted to the browser at the computer end is incorrectly operated as the editing port adapted to the browser at the mobile phone end, or the content edited from the editing port adapted to the browser at the computer end is edited into the editing port adapted to the browser at the mobile phone end. Therefore, the abnormal condition of the component display can occur, and an editor can find the abnormal condition when previewing in real time on a browser at the mobile phone end.
Clicking actions can comprise clicking and double clicking, clicking a component with abnormal display can highlight the component on a preview webpage of a mobile phone end, and double clicking can pop the component with abnormal display out of a setting window.
Step S800: after receiving the feedback information of the webpage preview terminal, the webpage editing terminal responds to the feedback information, and the response is the same as the webpage preview terminal in processing. When a preview webpage of the preview terminal clicks a component with abnormal display, the component highlights the preview webpage of the mobile phone terminal, and meanwhile, the webpage editing terminal can highlight the component with abnormal display on an editing webpage of the webpage editing terminal. When the abnormal component is displayed on the preview webpage of the preview terminal in a double-click mode, the component pops up a setting window on the preview webpage of the mobile phone end, and meanwhile, the webpage editing terminal can pop up the component on the setting window of the editing webpage of the webpage editing terminal. The setup window may include edit information for the length, width, height, color, etc. of the component.
After the webpage editing terminal receives the feedback information, the components which are displayed abnormally are highlighted or popped up to a setting window and the like, so that an editor/developer can easily find the components which are displayed abnormally at the webpage preview terminal at the webpage editing terminal, and the modification is convenient. And the situation that the specific position of the component on the webpage editing terminal for editing the webpage is carefully searched after the webpage preview terminal finds the component with abnormal display is avoided.
EXAMPLE III
With reference to the methods in the first and second embodiments, before establishing the Websocket connection between the web page editing terminal and the server, the method further includes: and the webpage editing terminal loads the first control file and the second control file from the network, and the first control file and the second control file are uploaded to the network in advance. Wherein:
the first control file is used for controlling the editing webpage and comprises a first data editing subfile and a first data display subfile. The first data editing file is an edit. cs file, and is mainly used for controlling layout, format and the like of an editing webpage. The first data presentation subfile is an editor. js file, and is mainly used for creating an outer layer Vue instance a of the web page editing terminal in the vue.js environment to present the contents of the edited web page. The outer layer Vue instance A is used to receive send edit information or feedback information. The combination of the two can completely display the editing webpage. The editing webpage comprises an area for previewing by the previewing terminal and an area containing editing function keys, and when only the first control file edits the webpage, the area for previewing by the previewing terminal does not have content display. The first data editing subfile and the first data display subfile are files used by a webpage editing terminal in a network.
The second control file is used for controlling an area for previewing by the preview terminal in the editing webpage and comprises a second data editing subfile and a second data display subfile. The second data editing subfile is a preview, css file and is mainly used for controlling the layout, format and the like of an area for previewing by a preview terminal in an editing webpage. Js file, which is mainly used for creating an inner layer Vue instance B of a web page editing terminal, displaying contents of a preview area in an edited web page, and the like. The inner layer Vue instance B is also used to receive and transmit information. And the second data editing subfile and the second data display subfile are files which are public in the network.
Before establishing the connection between the web page preview terminal and the server according to the connection information generated by the web page editing terminal, the method further comprises the following steps: and the webpage preview terminal loads the third control file and the second control file from the network according to the connection information generated by the webpage editing terminal, and similarly, the third control file is also uploaded to the network in advance. Wherein:
the third control file comprises a third data editing sub-file and a third data display sub-file, wherein the third data display sub-file is an editor. The first data editing subfile and the first data display subfile are files used by a webpage preview terminal in a network.
The second control file is used for controlling an area for previewing by the preview terminal in the editing webpage and comprises a data editing subfile and a second data display subfile. The second data editing sub-file is a preview. Js file, which is mainly used for creating an inner layer Vue instance B of a webpage preview terminal, displaying contents of a preview area in an edited webpage, and the like. The inner layer Vue instance B is also used to receive and send editing information or feedback information. And the second data editing subfile and the second data display subfile are files which are public in the network.
The outer layer Vue instance A of the webpage editing terminal transmits the information of the preview area displayed by the inner layer Vue instance B of the webpage editing terminal to the server through a Websocket protocol, and the server transmits the information to the outer layer Vue instance C of the webpage preview terminal. The outer layer Vue instance C of the Web preview terminal then passes this information to the inner layer Vue instance B of the Web preview terminal for a preview of the presentation. When the real-time preview is carried out on the webpage preview terminal, the abnormal display of the components is found, the feedback information is generated by clicking the components with the abnormal display, and the feedback information is transmitted to the outer layer Vue instance C of the webpage preview terminal by the inner layer Vue instance B of the webpage preview terminal. Then, the outer layer Vue instance C of the webpage preview terminal transmits the feedback information to the server through the Websocket protocol, the server transmits the feedback information to the outer layer Vue instance A of the webpage editing terminal through the Websocket protocol, and the outer layer Vue instance A of the webpage editing terminal transmits the feedback information to the inner layer Vue instance B of the webpage editing terminal for synchronous display so as to remind an editor/developer.
The webpage editing terminal and the webpage preview terminal are used for displaying a preview area in an edited webpage to be the same file, and the file can be compatible in the webpage editing terminal and the webpage preview terminal. Sharing the same file for both saves the cost of developing a second set of files because the files are implemented in a programming language.
When the editor/developer does not find the abnormal display condition of the preview webpage of the webpage preview terminal after editing the webpage by the method, the editor/developer can issue the webpage at the webpage edit terminal. The published web pages are web pages which are normally browsed and used by the user, the web page editing terminal firstly sends the published web page information to the database, and the terminal used by the user accesses the web pages through the database.
And when the terminal used by the user accesses the published webpage, the second data editing subfile and the second data display subfile are loaded through the webpage. The second data editing sub-file is a preview. Js file, which is mainly used for creating an inner layer Vue instance B of a user terminal, displaying contents in a published web page, and the like. The inner layer Vue instance B is also used to receive information about published web pages. The second data editing subfile and the second data display subfile are public files in the network, and are the same as files corresponding to the instance B of the inner layer Vue of the webpage editing terminal and files corresponding to the instance B of the inner layer Vue of the webpage preview terminal. Therefore, the step of independently developing the file for displaying the webpage by using the terminal again is omitted, and the development cost is saved.
The present invention also discloses a real-time preview apparatus, as shown in fig. 3, the apparatus mainly includes:
and the webpage editing terminal is used for editing the webpage.
And the webpage preview terminal is used for previewing the webpage edited by the webpage editing terminal.
And the server is used for storing and transmitting the information sent by the webpage editing terminal and the webpage previewing terminal.
The first connection module 1 is used for establishing a connection between the web page editing terminal and the server, and the connection is a Websocket protocol connection.
And the second connection module 2 is used for establishing connection between the webpage preview terminal and the server, and the connection is Websocket protocol connection.
The first communication module 101 and the second communication module 201 are respectively arranged in the first connection module 1 and the second connection module 2, and the server receives editing information sent by the web page editing terminal through the first communication module 101. Then, the server sends the received webpage editing information sent by the webpage editing terminal to the webpage preview terminal through the second communication module 201, so that the webpage preview terminal can preview the webpage editing state in the webpage editing terminal in real time. The specific implementation method of the implementation device is the same as that of the first embodiment, the second embodiment and the third embodiment. Similarly, the device can also realize the feedback function of the web page preview terminal to the web page editing terminal, and the specific method is the same as that in the second embodiment.
Fig. 4 is a schematic structural diagram of a real-time preview device according to another embodiment of the present invention. The apparatus is a further improvement of the apparatus shown in fig. 3 (please refer to the description of the live preview apparatus in fig. 3 at the same time):
an outer layer Vue instance A and an inner layer Vue instance B are created in a webpage editing terminal, and an outer layer Vue instance C and an inner layer Vue instance B are created in a webpage preview terminal. The device also comprises a database and a user terminal, when the webpage editing terminal finishes editing the webpage, the webpage information is sent to the database, and the user terminal accesses the published webpage through the database.
The working principle of the device is the same as that of the method in the third embodiment.
The invention also provides a system for realizing real-time preview, which comprises: more than one memory and more than one processor. Wherein the content of the first and second substances,
a memory (not shown) for storing program instructions, the memory may be transient or persistent.
And the processor (not shown in the figure) is used for executing the program instructions to realize the method for realizing the real-time preview of the computer editing terminal by the mobile preview terminal and the information feedback of the computer editing terminal by the preview terminal in the technical scheme. The invention also provides a storage medium, wherein the storage medium stores readable instructions, and the readable instructions can be executed by a processor to realize the method for realizing the real-time preview of the mobile webpage preview terminal to the computer webpage editing terminal in the technical scheme and the information feedback of the preview terminal to the computer editing terminal.
The above description is only for the preferred embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are also included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (10)
1. A method for implementing real-time preview is characterized by comprising the following steps:
establishing connection between a webpage editing terminal and a server;
establishing connection between a webpage preview terminal and the server according to connection information, wherein the connection information is generated by a webpage editing terminal and comprises a two-dimensional code and a link address;
the server receives editing information sent by the webpage editing terminal and sends the editing information to the webpage preview terminal so as to realize real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal;
the webpage editing terminal is a computer editing terminal, and the webpage preview terminal is a mobile preview terminal;
before the establishing of the connection between the web page editing terminal and the server, the method further comprises the following steps:
the webpage editing terminal loads a first control file and a second control file from a network, wherein:
the first control file is used for editing a webpage;
the second control file is used for controlling an area for previewing by the preview terminal in the editing webpage;
before establishing the connection between the web page preview terminal and the server according to the connection information, the method further comprises the following steps:
and the webpage preview terminal loads a third control file and a second control file from a network according to the connection information, wherein:
the third control file is used for controlling and editing the information of the area for previewing by the terminal in the webpage;
the second control file is used for controlling the area previewed by the preview terminal, wherein the webpage editing terminal adopts the second control file to control the area for previewing by the preview terminal in the edited webpage.
2. The method according to claim 1, further comprising, after the establishing a connection between the web page editing terminal and the server:
and generating connection information for establishing the connection between the webpage preview terminal and the server.
3. The implementation method of claim 2, wherein the establishing of the connection between the web page editing terminal and the server specifically includes: establishing a Websocket connection between the webpage editing terminal and the server;
the establishing of the connection between the web page preview terminal and the server according to the connection information specifically comprises the following steps: and establishing the Websocket connection between the webpage preview terminal and the server according to the connection information.
4. The method according to claim 3, wherein before the step of implementing the real-time preview of the editing status of the web page in the web page editing terminal by the web page preview terminal, the method further comprises:
and judging whether the preview terminal is in a preview state, and executing the real-time preview step when the preview terminal is in the preview state.
5. The method according to claim 4, wherein after the step of implementing the real-time preview of the editing status of the web page in the web page editing terminal by the web page preview terminal, the method further comprises:
and when the content display abnormality occurs in the preview webpage of the webpage preview terminal, feeding back the webpage editing state in the webpage editing terminal through the webpage preview terminal.
6. The implementation method of claim 5, wherein the step of feeding back the webpage editing state in the webpage editing terminal through the webpage preview terminal specifically includes:
and generating feedback information by clicking a component which is displayed abnormally in the preview webpage, sending the feedback information to the server by the webpage preview terminal, receiving the feedback information by the server and sending the feedback information to the webpage editing terminal so as to realize the feedback of the webpage preview terminal to the webpage editing terminal.
7. The implementation method of claim 6, wherein the webpage editing terminal responds to the feedback information after receiving the feedback information, and the responding includes highlighting or popping up a setting window for the component.
8. An apparatus for implementing real-time preview, comprising:
the webpage editing terminal is used for editing a webpage;
the webpage preview terminal is used for previewing the webpage edited by the webpage editing terminal;
the server is used for storing and transmitting information sent by the webpage editing terminal and the webpage preview terminal;
the first connection module is used for establishing connection between the webpage editing terminal and the server;
the second connection module is used for establishing connection between the webpage preview terminal and the server according to connection information, wherein the connection information is generated by a webpage editing terminal and comprises a two-dimensional code and a link address;
the server receives editing information sent by the webpage editing terminal through the first communication module and sends the webpage editing information to the webpage preview terminal through the second communication module so as to realize real-time preview of the webpage editing state in the webpage editing terminal by the webpage preview terminal;
the webpage editing terminal is a computer editing terminal, and the webpage preview terminal is a mobile preview terminal;
before the establishing of the connection between the web page editing terminal and the server, the method further comprises the following steps:
the webpage editing terminal loads a first control file and a second control file from a network, wherein:
the first control file is used for editing a webpage;
the second control file is used for controlling an area for previewing by the preview terminal in the editing webpage;
before establishing the connection between the web page preview terminal and the server according to the connection information, the method further comprises the following steps:
and the webpage preview terminal loads a third control file and a second control file from a network according to the connection information, wherein:
the third control file is used for controlling and editing the information of the area for previewing by the terminal in the webpage;
the second control file is used for controlling the area previewed by the preview terminal, wherein the webpage editing terminal adopts the second control file to control the area for previewing by the preview terminal in the edited webpage.
9. A system for implementing real-time preview, comprising:
a memory for storing program instructions;
a processor for executing the program instructions to implement the method of any one of claims 1 to 8.
10. A storage medium storing readable instructions which, when executed by a processor, implement the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811626812.1A CN109740096B (en) | 2018-12-28 | 2018-12-28 | Method, device and system for realizing real-time preview and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811626812.1A CN109740096B (en) | 2018-12-28 | 2018-12-28 | Method, device and system for realizing real-time preview and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109740096A CN109740096A (en) | 2019-05-10 |
| CN109740096B true CN109740096B (en) | 2021-04-20 |
Family
ID=66361866
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811626812.1A Active CN109740096B (en) | 2018-12-28 | 2018-12-28 | Method, device and system for realizing real-time preview and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109740096B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111949256A (en) * | 2020-08-12 | 2020-11-17 | 广州华多网络科技有限公司 | Webpage real-time preview editing method, device, equipment and storage medium |
| CN112584250A (en) * | 2020-12-10 | 2021-03-30 | 彩讯科技股份有限公司 | Video preview method and device, terminal equipment and storage medium |
| CN115187700A (en) * | 2021-04-07 | 2022-10-14 | 北京字跳网络技术有限公司 | Dynamic graph editing method and device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105608078A (en) * | 2014-10-28 | 2016-05-25 | 阿里巴巴集团控股有限公司 | Method and apparatus for previewing webpage in real time |
| CN107092634A (en) * | 2017-02-13 | 2017-08-25 | 口碑控股有限公司 | The implementation method and device of page preview |
| CN107436841A (en) * | 2016-05-25 | 2017-12-05 | 阿里巴巴集团控股有限公司 | The method for previewing and device of the page |
| CN107678937A (en) * | 2017-07-26 | 2018-02-09 | 上海壹账通金融科技有限公司 | Page compatibility detection method, device, server and medium |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103955366B (en) * | 2014-04-18 | 2017-04-19 | 南威软件股份有限公司 | Producing method of visualized website template |
| CN106952114A (en) * | 2017-03-17 | 2017-07-14 | 微梦创科网络科技（中国）有限公司 | A kind of advertisement editing customized method, device and advertisement editing machine |
-
2018
- 2018-12-28 CN CN201811626812.1A patent/CN109740096B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105608078A (en) * | 2014-10-28 | 2016-05-25 | 阿里巴巴集团控股有限公司 | Method and apparatus for previewing webpage in real time |
| CN107436841A (en) * | 2016-05-25 | 2017-12-05 | 阿里巴巴集团控股有限公司 | The method for previewing and device of the page |
| CN107092634A (en) * | 2017-02-13 | 2017-08-25 | 口碑控股有限公司 | The implementation method and device of page preview |
| CN107678937A (en) * | 2017-07-26 | 2018-02-09 | 上海壹账通金融科技有限公司 | Page compatibility detection method, device, server and medium |
Non-Patent Citations (2)
| Title |
|---|
| sw69366.使用百度UEditor 和Websocket实现手机端实时预览页面编辑效果.《https://blog.csdn.net/sw69366/article/details/53008413》.2016, * |
| 使用百度UEditor 和Websocket实现手机端实时预览页面编辑效果;sw69366;《https://blog.csdn.net/sw69366/article/details/53008413》;20161102;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109740096A (en) | 2019-05-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP1259042B1 (en) | Trusted internet clipboard | |
| CN109740096B (en) | Method, device and system for realizing real-time preview and storage medium | |
| KR100472202B1 (en) | Web collaborative browsing system and method with using IRC protocol | |
| US20020138653A1 (en) | Workstation system, computer, data transfer method, data editing method, computer program generation method, computer program and storage medium | |
| JP2014528198A (en) | Mobile solution for signing and storing third-party documents | |
| JP6186870B2 (en) | Information processing apparatus, program, conference system, and content providing method | |
| US10021165B2 (en) | Method of sharing browsing on a web page displayed by a web browser | |
| US20130086467A1 (en) | System for sending a file for viewing on a mobile device | |
| KR20140122000A (en) | Method for tranmitting information using drag input based on mobile messenger, and mobile terminal for tranmitting information using drag input based on mobile messenger | |
| CN107864358B (en) | Shared object operation method in video call | |
| US10594768B2 (en) | Method and apparatus of performing remote command dispatching | |
| CN102508843A (en) | Screen capture method and system with microblogging function | |
| JP7076471B2 (en) | File transmission in instant communication applications | |
| WO2018041087A1 (en) | Method and device for screenshot | |
| US20130138770A1 (en) | Apparatus and method for sharing web contents using inspector script | |
| CN111752561A (en) | Block development method, block sharing method, page building method and system | |
| US20180091602A1 (en) | Method and system for operating and controlling data, and user terminal | |
| US10762275B2 (en) | Information processing apparatus, method, and storage medium | |
| CN114253652A (en) | Method and system for realizing cloud application window list of android mobile terminal by simulating local App | |
| CA2938293A1 (en) | Control program for accessing browser data and for controlling appliance | |
| CN111404977B (en) | Document remote demonstration and viewing method and terminal equipment | |
| CN113590564B (en) | Data storage method, device, electronic equipment and storage medium | |
| US20160261674A1 (en) | Providing a html file by picture transport protocol | |
| CN110609752B (en) | Cross-platform cloud clipboard implementation method and system based on browser | |
| CN113873044B (en) | Data transmission method, system, equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |