CN109740096A - A kind of implementation method of live preview, device, system and storage medium - Google Patents
A kind of implementation method of live preview, device, system and storage medium Download PDFInfo
- Publication number
- CN109740096A CN109740096A CN201811626812.1A CN201811626812A CN109740096A CN 109740096 A CN109740096 A CN 109740096A CN 201811626812 A CN201811626812 A CN 201811626812A CN 109740096 A CN109740096 A CN 109740096A
- Authority
- CN
- China
- Prior art keywords
- terminal
- preview
- web
- web page
- page editing
- 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.)
- Granted
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a kind of implementation methods of live preview, comprising: establishes the connection between web page editing terminal and server；Establish the connection between web preview terminal and the server；The server receives editor's information that the web page editing terminal is sent, and editor's information is sent to the web preview terminal, to realize the web preview terminal to the live preview of web page editing state in the web page editing terminal.The present invention is connect by the way that web page editing terminal, web preview terminal are passed through Websocket agreement respectively with server, web page editing terminal sends web preview terminal by server for the information for editing webpage in real time, and web preview terminal can be with live preview web page editing terminal to the editing mode of webpage.
Description
Technical field
This specification be related to computer communication field more particularly to a kind of implementation method of live preview, device, system and
Storage medium.
Background technique
Higher and higher for life requirement degree with the raising of current living standards of the people, appearing in for internet is certain
People's lives demand is met in degree.In terms of web page editing in internet, current main editing is to pass through meter
Calculation machine editor terminal edits webpage, will edit webpage after editor completes and issue.Computerized Editing terminal
The webpage of publication can be applicable in terminal and mobile terminal (mobile phone terminal), since terminal and mobile terminal are one
Determine to have differences in degree, so when the part having differences is in editor it is possible that problem.And the problem is logical
It can just be found when being often the webpage after the publication of mobile terminal accessing Computerized Editing terminal.
Summary of the invention
In order to solve the above technical problems, the main purpose of the present invention is to provide a kind of implementation method of live preview,
Device, system and storage medium, in the prior art cannot be real-time when Computerized Editing terminal edits webpage with solution
The technical issues of whether webpage of preview editor is adapted to mobile terminal.
The technical scheme is that be accomplished by the following way:
A kind of implementation method of live preview, comprising:
Establish the connection between web page editing terminal and server；
Establish the connection between web preview terminal and the server；
The server receives editor's information that the web page editing terminal is sent, and the web page editing information is sent
To the web preview terminal, to realize the web preview terminal to the reality of web page editing state in the web page editing terminal
When preview.
Preferably, it is described establish the connection between web page editing terminal and server after, further includes:
It generates for establishing the link information connecting between web preview terminal and the server, the link information
Including two dimensional code and chained address.
Preferably, the connection established between web preview terminal and the server, specifically:
The connection between web preview terminal and the server is established according to the link information.
Preferably, the connection established between web page editing terminal and the server, specifically: establish the webpage
Websocket connection between editor terminal and the server；
The connection established according to the link information between web preview terminal and the server, specifically: root
The Websocket connection between web preview terminal and the server is established according to the link information.
Preferably, realize the web preview terminal in the web page editing terminal web page editing state it is real-time pre-
Before the step of looking at, further includes:
Judge whether the preview terminal is preview state, is executed when the preview terminal is preview state described real-time
The step of preview.
Preferably, realize the web preview terminal in the web page editing terminal web page editing state it is real-time pre-
After the step of looking at, further includes:
When occurring content display exception in the preview webpage of the web preview terminal, pass through the web preview terminal
Web page editing state in the web page editing terminal is fed back.
Preferably, the web page editing state in the web page editing terminal is fed back by the web preview terminal
The step of, it specifically includes:
Show that abnormal component generates feedback information in the preview webpage by clicking, the web preview terminal is by institute
It states feedback information and is sent to the server, the server receives the feedback information and the feedback information is sent to institute
Web page editing terminal is stated, to realize the web preview terminal to the feedback of the web page editing terminal.
Preferably, the web page editing terminal responds the feedback information after receiving the feedback information,
The response includes the component being highlighted or being popped up setting window.
Preferably, it is described establish the connection between web page editing terminal and server before, further includes:
The web page editing terminal loads the first control file and the second control file from network, in which:
The first control file, for editing webpage；
The second control file, for controlling the region in editor's webpage for preview terminal preview.
Preferably, before establishing the connection between web preview terminal and the server according to the link information,
Further include:
The web preview terminal loads third control file and the second control text according to the link information from network
Part, in which:
The third controls file, for controlling in editor's webpage for the information in the region of preview terminal preview；
The second control file, for controlling the region of the preview terminal preview.
Preferably, the web page editing terminal is Computerized Editing terminal, and the preview terminal is mobile preview terminal.
A kind of realization device of live preview, comprising:
Web page editing terminal, for being edited to webpage；
Web preview terminal carries out preview for the webpage to web page editing terminal editor；
Server, the information for being sent for storing and transmitting web page editing terminal and web preview terminal；
First link block, the connection for establishing between web page editing terminal and server；
Second link block, the connection for establishing between web preview terminal and the server；
It is respectively arranged with first communication module and second communication module in first link block and the second link block,
The server receives editor's information that the web page editing terminal is sent by the first communication module, and passes through described the
The web page editing information is sent to the web preview terminal by two communication modules, to realize the web preview terminal to institute
State the live preview of web page editing state in web page editing terminal.
A kind of realization system of live preview, comprising:
Memory, for storing program instruction；
Processor, for executing described program instruction, to realize the implementation method of above-mentioned live preview.
A kind of storage medium, the storage medium is stored with readable instruction, when the readable instruction can be executed by processor
Realize the implementation method of above-mentioned realization preview.
Compared with the prior art, the implementation method of live preview of the present invention, device, system and storage medium at least have with
It is lower the utility model has the advantages that
1) present invention by passing through Websocket agreement and server for web page editing terminal, web preview terminal respectively
Connection, web page editing terminal send web preview terminal by server for the information for editing webpage in real time, and web preview is whole
End can be with live preview web page editing terminal to the editing mode of webpage.
2) when web preview terminal is when the webpage to web page editing terminal editor carries out live preview, discovery webpage exists
Problematic component can click the component to go wrong in the webpage of current preview by web preview terminal.Then webpage
The feedback information that preview terminal will click on is sent to editor's net of web page editing terminal by Websocket agreement and server
The component to go wrong is shown (such as highlighted etc.), in a special manner with the editor of the prompting webpage editor terminal group by page
Part goes wrong in preview terminal, facilitates modification, avoids and user terminal after Homepage Publishing goes wrong when in use.
3) web page editing terminal, web preview terminal, user's using terminal use identical preview web page display file, should
File is common file in network, avoids and repeatedly develops to preview web page display file, reduces development cost.
Detailed description of the invention
In order to illustrate more clearly of this specification embodiment or technical solution in the prior art, below will to embodiment or
Attached drawing needed to be used in the description of the prior art is briefly described, it should be apparent that, the accompanying drawings in the following description is only
The some embodiments recorded in this specification, for those of ordinary skill in the art, in not making the creative labor property
Under the premise of, it is also possible to obtain other drawings based on these drawings.
Fig. 1 is the flow diagram of the implementation method for the live preview that an embodiment of the present invention provides；
Fig. 2 be another embodiment of the present invention provides live preview implementation method flow diagram；
Fig. 3 is the structural schematic diagram for the live preview device that an embodiment of the present invention provides；
Fig. 4 be another embodiment of the present invention provides live preview device structural schematic diagram.
Specific embodiment
To keep the purposes, technical schemes and advantages of the application clearer, below in conjunction with the application specific embodiment and
Technical scheme is clearly and completely described in corresponding attached drawing.Obviously, described embodiment is only the application
A part of the embodiment, instead of all the embodiments.Based on this specification embodiment, those of ordinary skill in the art are not making
Every other embodiment obtained under the premise of creative work out, shall fall within the protection scope of the present application.
In conjunction with attached drawing, invention is further explained.
Embodiment one
As shown in Figure 1, being the flow diagram of the implementation method for the live preview that an embodiment of the present invention provides, the party
Method mainly comprises the steps that
Step S100: establishing the connection between web page editing terminal and server, the step specifically: pass through
Websocket agreement establishes the connection between web page editing terminal and server, and web page editing terminal passes through with server
Websocket agreement is completed after once shaking hands, and just can directly create persistent connection between the two, and carry out two-way number
According to transmission.
Wherein, web page editing terminal is Computerized Editing terminal, and developer/editor is by computer to the webpage of editor
It is edited.
Step S200: establishing the connection between web preview terminal and the server, the step specifically: pass through
Websocket agreement establishes the connection between mobile preview terminal and the server, and mobile preview terminal passes through with server
Websocket agreement is completed after once shaking hands, and just can directly create persistent connection between the two, and carry out two-way number
According to transmission.Wherein, mobile preview terminal can be mobile phone terminal.
Step S300:, will be to editor after Computerized Editing terminal is by Websocket agreement and server successful connection
Editor's information of webpage is transmitted to server by Websocket agreement, and editor's webpage includes preview area and containing editor's function
The region of energy key, editor's information refer to editor's information of preview area.It is certain in editor's webpage of Computerized Editing terminal
Component is fitted with different editors to the browser of terminal and the browser of preview terminal.Only in these groups
Corresponding with the browser of the browser of terminal or preview terminal file is uploaded in the corresponding editor of part could be
The terminal or browser of preview terminal is normally shown and preview.
Due to can be carried out communication by Websocket agreement, server resource and bandwidth can be preferably saved, and can
It is communicated more in real time, so after editor's information of webpage is sent to server by Computerized Editing terminal, server
Editor's information is sent to mobile phone terminal, it can be directly to Computerized Editing terminal transmission to service by the browser in mobile phone
The web page editing information of device carries out live preview.
According to the technical solution of the present invention, editor can webpage is edited using Computerized Editing terminal it is same
When, the live preview of editor's webpage is carried out by mobile preview terminal.When Computerized Editing terminal is during editing webpage, hand
Machine terminal can be found in time when occurring having component abnormal show occur in preview webpage in preview webpage, then be repaired
Change.The technical solution is avoided when Computerized Editing terminal edits webpage, the preview in mobile web preview terminal
When webpage has the case where component abnormal show, it cannot find in time, it is direct when mobile terminal uses so as to cause user
The problem of using the webpage of component abnormal show.
Embodiment two
As shown in Fig. 2, for another embodiment of the present invention provides live preview implementation method flow diagram, the party
Method mainly comprises the steps that
Step S400: establishing the connection between web page editing terminal and server, the step specifically: pass through
Websocket agreement establishes the connection between web page editing terminal and server, and web page editing terminal passes through with server
Websocket agreement is completed after once shaking hands, and just can directly create persistent connection between the two, and carry out two-way number
According to transmission.Wherein, web page editing terminal is Computerized Editing terminal, and developer/editor is by computer to the webpage of editor
It is edited.
After the connection established between web page editing terminal and server, further includes: Computerized Editing terminal, which generates, to be used
In establishing the link information connecting between web preview terminal and the server, which is shown in Computerized Editing
In editor's webpage of terminal.The link information may include two dimensional code and/or chained address.Generating the link information is for net
Page preview terminal and server establish connection, to realize web preview terminal to the reality for editing webpage in Computerized Editing terminal
When preview.
Step S500: establishing the connection between web preview terminal and the server, the step specifically: web preview
The link information and server that terminal is generated by web page editing terminal establish connection.The connection, which can be, passes through Websocket
Agreement establishes the connection between web preview terminal and the server, and web preview terminal and server pass through Websocket
Agreement is completed after once shaking hands, and just can directly create persistent connection between the two, and carry out bidirectional data transfers.Its
In, web preview terminal is that can be mobile phone terminal.
S600:, will be to editor's webpage after Computerized Editing terminal is by Websocket agreement and server successful connection
Editor's information server is transmitted to by Websocket agreement, certain components in editor's webpage of Computerized Editing terminal
The browser of browser and preview terminal to terminal is fitted with different editors.Only in these components pair
File corresponding with the browser of the browser of terminal or preview terminal is uploaded in the editor answered to be calculated
The browser of machine terminal or preview terminal is normally shown.
Due to can be carried out communication by Websocket agreement, server resource and bandwidth can be preferably saved, and can
It is communicated more in real time, so after editor's information of webpage is sent to server by Computerized Editing terminal, server
Editor's information is sent to mobile phone terminal, it can be directly to Computerized Editing terminal transmission to service by the browser in mobile phone
The web page editing information of device carries out live preview.Realizing web preview terminal to web page editing state in web page editing terminal
Before the step of live preview, first judge whether the preview terminal is preview state, when the preview terminal is preview state
Described in Shi Zhihang the step of live preview.This is judged as that mobile phone is judged automatically according to link information.When preview terminal is in preview
After state, the preview webpage in preview terminal not can be carried out edit operation, prevent by preview terminal to webpage edited from
And lead to the confusion in Computerized Editing terminal.
According to the technical solution of the present invention, editor can webpage is edited using Computerized Editing terminal it is same
When, the live preview of editor's webpage is carried out by mobile terminal web preview terminal.When Computerized Editing terminal is in editor's webpage
In the process, it can be found in time when mobile phone terminal occurs having component abnormal show occur in preview webpage in preview webpage, so
After modify.The technical solution is avoided when Computerized Editing terminal edits webpage, mobile web preview terminal
In preview webpage the case where having component abnormal show when, cannot find, make so as to cause user in mobile terminal in time
Used time directly uses the problem of webpage of component abnormal show.
Step S700: realize the web preview terminal in the web page editing terminal web page editing state it is real-time
After the step of preview, further includes: when occurring content display exception in the preview webpage of the web preview terminal, pass through net
Page preview terminal feeds back the web page editing state in the web page editing terminal.
The step specifically: when the webpage progress preview edited by mobile phone browser to Computerized Editing terminal
When, occur in the preview webpage that shows in mobile phone browser the display of certain component it is abnormal when, shown by clicking in the preview webpage
Show that abnormal component generates feedback information, the web preview terminal sends the feedback information by Websocket agreement
To the server, the server receives the feedback information and is sent the feedback information by Websocket agreement
To the web page editing terminal, to realize the web preview terminal to the feedback of the web page editing terminal.
Wherein, the abnormal situation of component display may include the picture that the color of component, the position of component, component are loaded
Deng.There is the abnormal reason of component display to can be the editor port maloperation of the browser adaptation of computer terminal being mobile phone terminal
The editor port of browser adaptation, or the Edition Contains edited from the editor port that the browser of computer terminal is adapted to are in one's hands
The editor port of the browser adaptation of generator terminal.It thus will appear the abnormal situation of component display, editor is in the clear of mobile phone terminal
It finds that the abnormal conditions when device of looking at progress live preview.
The movement of click may include clicking and double-clicking, and clicks and occurs showing that abnormal component can be by the component in mobile phone
The preview webpage at end is highlighted, and component pop-up setting window that can be abnormal by display is double-clicked.
Step S800: in web page editing terminal after the feedback information for receiving web preview terminal, to the feedback letter
Breath is responded, and the response is processing identical with web preview terminal.I.e. when the preview webpage in preview terminal is clicked out
When now showing abnormal component, which is highlighted in the preview webpage of mobile phone terminal, meanwhile, web page editing terminal class can
The abnormal component of display is highlighted with editor's webpage by the component in web page editing terminal.When in preview terminal
When preview webpage double-clicks the component for display exception occur, which pops up setting window in the preview webpage of mobile phone terminal, meanwhile, webpage
Editor terminal class can pop up the component in the setting window of editor's webpage of web page editing terminal.The setting window may include group
Length, width, height, color of part etc. edit information.
After web page editing terminal receives feedback information, the abnormal component of display is highlighted or is popped up setting window
The component abnormal in the display of web preview terminal, side can be easily found in web page editing terminal Deng, editor/developer
Just it modifies.It also avoids looking through this in web page editing terminal after web preview terminal finds the abnormal component of display
Specific location of the component in editor's webpage of web page editing terminal.
Embodiment three
In conjunction with the embodiments one with embodiment two in method, established between web page editing terminal and server
Before Websocket connection, further includes: the web page editing terminal loads the first control file and the second control text from network
Part, the first control file and the second control file are uploaded in network in advance.Wherein:
First control file is for controlling editor's webpage, including the first data edition subfile and the first data displaying Ziwen
Part.First data edit file is editor.css file, is mainly used for control editor page layout format, format etc..First number
According to showing that subfile is editor.js file, it is mainly used for creating the outer layer of a web page editing terminal under Vue.js environment
Vue example A, to show the content of editor's webpage.Outer layer Vue example A sends editor's information or feedback information for receiving.Two
Person, which combines, can completely show editor's webpage.Editor's webpage includes for the region of preview terminal preview and containing editor
The region of function key, the only first control file is when editing the page, and for the region of preview terminal preview, there is no contents
Display.Wherein, the first data edition subfile and the first data show that subfile is the text that web page editing terminal uses in network
Part.
The second control file is used to control the region in editor's webpage for preview terminal preview, including the second data are compiled
It collects subfile and the second data shows subfile.Second data edition subfile is preview.css file, is mainly used for controlling
For layout, the format in region etc. of preview terminal preview in system editor's webpage.Second data show that subfile is preview.js
File is mainly used for creating the internal layer Vue example B of a web page editing terminal, shows the content of preview area in editor's webpage
Deng.Internal layer Vue example B is also used to send and receive information.Wherein, the second data edition subfile and the second data show son
File is file public in network.
The company between web preview terminal and the server is established in the link information generated according to web page editing terminal
Before connecing, further includes: the web preview terminal loads third according to the link information that web page editing terminal generates from network
File, the second control file are controlled, equally, third control file is also uploaded in network in advance.Wherein:
The third control file includes that third data edition subfile and third data show subfile, third data exhibition
Show that subfile is editor.js file, the outer layer Vue for being mainly used for creating a web preview terminal under Vue.js environment is real
Example C, for sending and receiving in control editor's webpage for editor's information or feedback information in the region of preview terminal preview.Its
In, the first data edition subfile and the first data show that subfile is the file that web preview terminal uses in network.
The second control file is used to control the region in editor's webpage for preview terminal preview, including data edition
File and the second data show subfile.Second data edition subfile is preview.css file, is mainly used for control and compiles
Collect layout, the format etc. of preview area in webpage.Second data show that subfile is preview.js file, are mainly used for creating
The internal layer Vue example B of one web preview terminal shows the content etc. of preview area in editor's webpage.Internal layer Vue example B
It is also used to send and receive editor's information or feedback information.Wherein, the second data edition subfile and the second data show Ziwen
Part is file public in network.
The preview area that the outer layer Vue example A of web page editing terminal shows the internal layer Vue example B of web page editing terminal
Information server is transferred to by Websocket agreement, server transmits this information to the outer layer of web preview terminal again
Vue example C.Then the information is transmitted to the internal layer Vue example B of web preview terminal by the outer layer Vue example C of web preview terminal
It is shown preview.When web preview terminal carries out live preview, discovery has component display abnormal, different by clicking display
Normal component generates feedback information, and the internal layer Vue example B of web preview terminal will give web preview terminal to transmission of feedback information
Outer layer Vue example C.Then the outer layer Vue example C of web preview terminal passes the feedback information by Websocket agreement
It is defeated by server, server is real to the outer layer Vue of web page editing terminal by the transmission of feedback information by Websocket agreement
The internal layer Vue example B of example A, the outer layer Vue example A of web page editing terminal by transmission of feedback information to web page editing terminal is carried out
It is synchronous to show, to remind editor/developer.
It for that will edit in webpage that preview area is shown file is same in web page editing terminal and web preview terminal
A kind of file, what this document can be compatible in web page editing terminal and web preview terminal.The public same file of the two is saved
The cost for developing a set of file again, because this document is realized by programming language.
When editor/developer is after the above method edits webpage, not in the pre- of web preview terminal
When webpage of looking at finds component display abnormal situation, editor/developer can issue in web page editing terminal.After publication
Webpage be that user carries out normal browsing and the webpage that uses, the webpage information of publication is first sent to number by web page editing terminal
According to library, the terminal that user uses is accessed when accessing webpage by database.
The terminal that user uses access publication after webpage when, first loaded by webpage the second data edition subfile and
Second data show subfile.Second data edition subfile is preview.css file, is mainly used for controlling publishing web page
Layout, format of middle display area etc..Second data show that subfile is preview.js file, are mainly used for creating a use
The internal layer Vue example B of family terminal shows the content etc. in publishing web page.Internal layer Vue example B is also used to receive publishing web page
Information.Wherein, the second data edition subfile and the second data show that subfile is file public in network, compile with webpage
It is identical to collect file file corresponding with web preview terminal internal layer Vue example B corresponding to the internal layer Vue example B of terminal.In this way
The step of individually being developed to the file with terminal for displayed web page again is also eliminated, development cost is saved.
The invention also discloses a kind of live preview devices, as shown in figure 3, the device mainly includes:
Web page editing terminal, for being edited to webpage.
Web preview terminal carries out preview for the webpage to web page editing terminal editor.
Server, the information sent for storing and transmitting web page editing terminal and web preview terminal.
First link block 1, the connection for establishing between web page editing terminal and server, this is connected as
The connection of Websocket agreement.
Second link block 2, the connection for establishing between web preview terminal and the server, this is connected as
The connection of Websocket agreement.
First communication module 101 and the second communication are respectively arranged in first link block 1 and the second link block 2
Module 201, the server receive editor's information that the web page editing terminal is sent by first communication module 101.Then,
The web page editing information that received web page editing terminal is sent is sent to webpage by second communication module 201 by the server
Preview terminal, thus realize the web preview terminal in the web page editing terminal web page editing state it is real-time pre-
It lookes at.The concrete methods of realizing of the realization device is the same as above-described embodiment one, embodiment two, the method for embodiment three.The same device
Web preview terminal can also be realized to the feedback function of web page editing terminal, specific method is the same as the side in above-described embodiment two
Method.
As Fig. 4 be another embodiment of the present invention provides live preview device structural schematic diagram.The device is to Fig. 3 institute
The further improvement (please also refer to the explanation to live preview device in Fig. 3) of the device shown:
Creation has outer layer Vue example A and internal layer Vue example B, web preview terminal in web page editing terminal in the device
Middle creation has outer layer Vue example C and internal layer Vue example B.Further include database and user terminal in the device, works as web page editing
Webpage information is now sent to database after by web page editing by terminal, and user terminal carries out publication net by database
The access of page.
The working principle of the device is identical as the method in embodiment three.
The present invention also provides a kind of realization systems of live preview, comprising: more than one memory and more than one at
Manage device.Wherein,
Memory (not shown), for storing program instruction, memory can be of short duration storage or persistent storage.
Processor (not shown), for executing described program instruction, to realize, mobile preview is whole in the technical program
It holds and the implementation method and preview terminal of Computerized Editing terminal live preview feeds back the information of Computerized Editing terminal.
The present invention also provides a kind of storage medium, the storage medium is stored with readable instruction, and the readable instruction can
Realize that mobile web preview terminal is to computer website editor terminal live preview in the technical program when being executed by processor
Implementation method and preview terminal feed back the information of Computerized Editing terminal.
More than, it is merely preferred embodiments of the present invention, but the protection scope invented is not limited thereto, it is any ripe
Know those skilled in the art in the technical scope disclosed by the present invention, any changes or substitutions that can be easily thought of, should all contain
Lid is within protection scope of the present invention.Therefore, the scope of protection of the invention shall be subject to the scope of protection specified in the patent claim.
Claims (14)
1. a kind of implementation method of live preview characterized by comprising
Establish the connection between web page editing terminal and server；
Establish the connection between web preview terminal and the server；
The server receives editor's information that the web page editing terminal is sent, and editor's information is sent to the net
Page preview terminal, to realize the web preview terminal to the live preview of web page editing state in the web page editing terminal.
2. implementation method according to claim 1, which is characterized in that it is described establish web page editing terminal and server it
Between connection after, further includes:
It generates for establishing the link information connecting between the web preview terminal and the server, the link information
Including two dimensional code and chained address.
3. implementation method according to claim 2, which is characterized in that described to establish web preview terminal and the server
Between connection, specifically:
The connection between the web preview terminal and the server is established according to the link information.
4. implementation method according to claim 3, which is characterized in that described to establish web page editing terminal and the server
Between connection, specifically: establish the Websocket connection between the web page editing terminal and the server；
The connection established according to the link information between web preview terminal and the server, specifically: according to institute
State the Websocket connection that link information is established between the web preview terminal and the server.
5. implementation method according to claim 4, which is characterized in that realizing the web preview terminal to the webpage
In editor terminal the step of the live preview of web page editing state before, further includes:
Judge whether the preview terminal is preview state, executes the live preview when the preview terminal is preview state
The step of.
6. implementation method according to claim 5, which is characterized in that realizing the web preview terminal to the webpage
In editor terminal the step of the live preview of web page editing state after, further includes:
When occurring content display exception in the preview webpage of the web preview terminal, by the web preview terminal to institute
The web page editing state stated in web page editing terminal is fed back.
7. implementation method according to claim 6, which is characterized in that compiled by the web preview terminal to the webpage
The step of web page editing state in terminal is fed back is collected, is specifically included:
Show that abnormal component generates feedback information in the preview webpage by clicking, the web preview terminal will be described anti-
Feedforward information is sent to the server, and the server receives the feedback information and the feedback information is sent to the net
Page editor terminal, to realize the web preview terminal to the feedback of the web page editing terminal.
8. implementation method according to claim 7, which is characterized in that the web page editing terminal is receiving the feedback
After information, the feedback information is responded, the response includes the component being highlighted or being popped up setting window.
9. implementation method according to claim 8, which is characterized in that it is described establish web page editing terminal and server it
Between connection before, further includes:
The web page editing terminal loads the first control file and the second control file from network, in which:
The first control file, for editing webpage；
The second control file, for controlling the region in editor's webpage for preview terminal preview.
10. implementation method according to claim 9, which is characterized in that establishing web preview according to the link information
Before connection between terminal and the server, further includes:
The web preview terminal loads third control file and the second control file according to the link information from network,
In:
The third controls file, for controlling in editor's webpage for the information in the region of preview terminal preview；
The second control file, for controlling the region of the preview terminal preview.
11. implementation method according to claims 1 to 8, which is characterized in that the web page editing terminal is Computerized Editing
Terminal, the preview terminal are mobile preview terminal.
12. a kind of realization device of live preview characterized by comprising
Web page editing terminal, for being edited to webpage；
Web preview terminal carries out preview for the webpage to web page editing terminal editor；
Server, the information for being sent for storing and transmitting web page editing terminal and web preview terminal；
First link block, the connection for establishing between web page editing terminal and server；
Second link block, the connection for establishing between web preview terminal and the server；
It is respectively arranged with first communication module and second communication module in first link block and the second link block, it is described
Server receives editor's information that the web page editing terminal is sent by the first communication module, and logical by described second
Believe that the web page editing information is sent to the web preview terminal by module, to realize the web preview terminal to the net
The live preview of web page editing state in page editor terminal.
13. a kind of realization system of live preview characterized by comprising
Memory, for storing program instruction；
Processor, for executing described program instruction, to realize method described in any one of claims 1 to 11.
14. a kind of storage medium, which is characterized in that the storage medium is stored with readable instruction, and the readable instruction can be located
Reason device realizes method described in any one of claims 1 to 11 when executing.
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 true CN109740096A (en) | 2019-05-10 |
| CN109740096B 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) |
Cited By (5)
| 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 |
| CN112068824A (en) * | 2020-09-16 | 2020-12-11 | 杭州海康威视数字技术股份有限公司 | Webpage development preview method and device and electronic equipment |
| CN112584250A (en) * | 2020-12-10 | 2021-03-30 | 彩讯科技股份有限公司 | Video preview method and device, terminal equipment and storage medium |
| WO2022213802A1 (en) * | 2021-04-07 | 2022-10-13 | 北京字跳网络技术有限公司 | Dynamic graphic editing method and apparatus |
| CN112068824B (en) * | 2020-09-16 | 2024-07-02 | 杭州海康威视数字技术股份有限公司 | Webpage development preview method and device and electronic equipment |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103955366A (en) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | Producing method of visualized website template |
| CN105608078A (en) * | 2014-10-28 | 2016-05-25 | 阿里巴巴集团控股有限公司 | Method and apparatus for previewing webpage in real time |
| CN106952114A (en) * | 2017-03-17 | 2017-07-14 | 微梦创科网络科技（中国）有限公司 | A kind of advertisement editing customized method, device and advertisement editing machine |
| 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 |
-
2018
- 2018-12-28 CN CN201811626812.1A patent/CN109740096B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103955366A (en) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | Producing method of visualized website template |
| 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 |
| CN106952114A (en) * | 2017-03-17 | 2017-07-14 | 微梦创科网络科技（中国）有限公司 | A kind of advertisement editing customized method, device and advertisement editing machine |
| CN107678937A (en) * | 2017-07-26 | 2018-02-09 | 上海壹账通金融科技有限公司 | Page compatibility detection method, device, server and medium |
Non-Patent Citations (1)
| Title |
|---|
| SW69366: "使用百度UEditor 和Websocket实现手机端实时预览页面编辑效果", 《HTTPS://BLOG.CSDN.NET/SW69366/ARTICLE/DETAILS/53008413》 * |
Cited By (5)
| 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 |
| CN112068824A (en) * | 2020-09-16 | 2020-12-11 | 杭州海康威视数字技术股份有限公司 | Webpage development preview method and device and electronic equipment |
| CN112068824B (en) * | 2020-09-16 | 2024-07-02 | 杭州海康威视数字技术股份有限公司 | Webpage development preview method and device and electronic equipment |
| CN112584250A (en) * | 2020-12-10 | 2021-03-30 | 彩讯科技股份有限公司 | Video preview method and device, terminal equipment and storage medium |
| WO2022213802A1 (en) * | 2021-04-07 | 2022-10-13 | 北京字跳网络技术有限公司 | Dynamic graphic editing method and apparatus |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109740096B (en) | 2021-04-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| DE60121987T2 (en) | Accessing data stored at an intermediate station from a service | |
| DE60108158T2 (en) | ONLINE DEVELOPMENT OF APPLICATIONS | |
| CN108089857A (en) | A kind of industry web monitors the generation method of the page in real time | |
| CN109862064B (en) | Configuration method and device for remote monitoring of equipment | |
| KR20180038539A (en) | A method and system for implementing data tracking with a software development kit | |
| CN109740096A (en) | A kind of implementation method of live preview, device, system and storage medium | |
| CN109240688A (en) | Interface development method, electronic device and readable storage medium storing program for executing | |
| CN105205072B (en) | The methods of exhibiting and system of webpage information | |
| CN106095598A (en) | A kind of data processing method and client | |
| CN113256095B (en) | Draggable configuration agile flow service construction method, system, equipment and medium | |
| CN110011875A (en) | Dial testing method, device, equipment and computer readable storage medium | |
| CN112433702A (en) | Lightweight process design system and method | |
| JP2007184920A (en) | Image managing device and method for mobile terminals | |
| CN104166551B (en) | A kind of application interface development approach and development device | |
| US20100169457A1 (en) | Social user script service by service proxy | |
| CN111104181A (en) | Webpage data filling system for visually editing task flow | |
| WO2006045895A1 (en) | Electronic equipment and method for carrying out communication with electronic equipment | |
| CN113093574A (en) | Front-end configuration method and device of building control system and building control system | |
| KR20020083121A (en) | Link display program | |
| CN104516883A (en) | Webpage sharing method, device and system | |
| CN114282760A (en) | Workflow generation method and device combining dynamic form and dynamic flow | |
| CN114092169A (en) | Ordering test method and system and equipment for executing ordering test method | |
| JP4432368B2 (en) | Linking screen display information | |
| EP1674991A2 (en) | System and method for creating web services from an existing web site | |
| CN117130318B (en) | Industrial data acquisition method, device, system and readable 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 |