System, method and computer program product for editing web pages in-context of a production view
Systems and methods for in-context editing of web pages in which the production format of a web page is visible while the web page is being edited, and the editable image is not distorted by the editing tools. In one embodiment, a system includes a server computer, a client computer and a transmission channel coupled between them. The server computer receives a request for a web page from the client computer and responsively transmits a web page containing in-context editing tools to the client computer. The client computer operate alternately in a first mode in which the in-context editing tools are superimposed on a web page image, or a second mode in which the web page image is displayed, but the in-context editing tools are hidden. The tools overlay in the first mode does not alter the production format of the web page image as displayed in the second mode.
1. A system for facilitating in-context editing of web pages in a client browser at a client device, comprising:
a processor;
a non-transitory computer readable medium storing a set of computer instructions executable by the processor to:
receive from the client device, via the network, a request for a web page;
determine a set of in-context editing tools associated with a first component of the web page based on a template associated with the web page or the first component, wherein the template specifies an action associated with the web page or the first component;
generate a production view of the web page and generate an overlay for the set of in-context editing tools based on the set of in-context editing tools;
transmit page source to the client device corresponding to the production view and the overlay for the set of in-context editing tools, the page source configured to cause the client browser to render the page source in a first mode or a second mode, and switch between the first mode and the second mode without refreshing the entire web page by re-requesting the web page, wherein:
in the first mode, the in-context editing tools are enabled and the client browser is configured to render the overlay of the set of in-context editing tools superimposed on the production view of the web page to display the overlay of the set of in-context editing tools in association with the first component without distorting a size and placement components of the production view and receive an edit to the first component using an in-context editing tool and refresh the first component without refreshing the entire web page by re-requesting the web page; and
in the second mode, the set of in-context editing tools are disabled and the client browser renders the production view of the web page but hides the overlay of in-context editing tools.
2. The system of claim 1 , wherein the overlay of the in-context editing tools superimposed on the production view of the web page is displayed in association with the first component based on a first user action with respect to the first component.
3. The system of claim 2 , wherein in the first mode the client browser renders a visual demarcation of a portion of the web page containing the first component based on a second user interaction with the in-context editing tool of the displayed overlay.
4. The system of claim 2 , wherein the first user interaction is an interaction with a component menu icon displayed in association with the first component in the first mode.
5. The system of claim 1 , wherein the first component is edited at a Content Management System (CMS) based on a communication between sent from the browser to the CMS by the page source.
6. The system of claim 1 , wherein the first component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the client browser switches between the first mode and the second mode by disabling the second namespace.
7. A method for facilitating in-context editing of web pages in a client browser at a client device, comprising:
receiving from the client device, via the network, a request for a web page;
determining a set of in-context editing tools associated with a first component of the web page based on a template associated with the web page or the first component, wherein the template specifies an action associated with the web page or the first component;
generating a production view of the web page and generating an overlay for the set of in-context editing tools based on the set of in-context editing tools;
transmitting page source to the client device corresponding to the production view and the overlay for the set of in-context editing tools, the page source configured to cause the client browser to render the page source in a first mode or a second mode, and switch between the first mode and the second mode without refreshing the entire web page by re-requesting the web page, wherein:
in the first mode, the in-context editing tools are enabled and the client browser is configured to render the overlay of the set of in-context editing tools superimposed on the production view of the web page to display the overlay of the set of in-context editing tools in association with the first component without distorting a size and placement of components of the production view and receive an edit to the first component using an in-context editing tool and refresh the first component without refreshing the entire web page by re-requesting the web page; and
in the second mode, the set of in-context editing tools are disabled and the client browser renders the production view of the web page but hides the overlay of in-context editing tools.
8. The method of claim 7 , wherein the overlay of the in-context editing tools superimposed on the production view of the web page is displayed in association with the first component based on a first user action with respect to the first component.
9. The method of claim 8 , wherein in the first mode the client browser renders a visual demarcation of a portion of the web page containing the first component based on a second user interaction with the in-context editing tool of the displayed overlay.
10. The method of claim 8 , wherein the first user interaction is an interaction with a component menu icon displayed in association with the first component in the first mode.
11. The method of claim 7 , wherein the first component is edited at a Content Management System (CMS) based on a communication between sent from the browser to the CMS by the page source.
12. The method of claim 7 , wherein the first component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the client browser switches between the first mode and the second mode by disabling the second namespace.
13. A non-transitory computer readable medium, comprising instructions for:
receiving from the client device, via the network, a request for a web page;
determining a set of in-context editing tools associated with a first component of the web page based on a template associated with the web page or the first component, wherein the template specifies an action associated with the web page or the first component;
generating a production view of the web page and generating an overlay for the set of in-context editing tools based on the set of in-context editing tools;
transmitting page source to the client device corresponding to the production view and the overlay for the set of in-context editing tools, the page source configured to cause the client browser to render the page source in a first mode or a second mode, and switch between the first mode and the second mode without refreshing the entire web page by re-requesting the web page, wherein:
in the first mode, the in-context editing tools are enabled and the client browser is configured to render the overlay of the set of in-context editing tools superimposed on the production view of the web page to display the overlay of the set of in-context editing tools in association with the first component without distorting a size and placement of components of the production view and receive an edit to the first component using an in-context editing tool and refresh the first component without refreshing the entire web page by re-requesting the web page; and
in the second mode, the set of in-context editing tools are disabled and the client browser renders the production view of the web page but hides the overlay of in-context editing tools.
14. The non-transitory computer readable medium of claim 13 , wherein the overlay of the in-context editing tools superimposed on the production view of the web page is displayed in association with the first component based on a first user action with respect to the first component.
15. The non-transitory computer readable medium of claim 14 , wherein in the first mode the client browser renders a visual demarcation of a portion of the web page containing the first component based on a second user interaction with the in-context editing tool of the displayed overlay.
16. The non-transitory computer readable medium of claim 14 , wherein the first user interaction is an interaction with a component menu icon displayed in association with the first component in the first mode.
17. The non-transitory computer readable medium of claim 13 , wherein the first component is edited at a Content Management System (CMS) based on a communication between sent from the browser to the CMS by the page source.
18. The non-transitory computer readable medium of claim 13 , wherein the first component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the client browser switches between the first mode and the second mode by disabling the second namespace.