Is there a way to enable in-browser editing of a web page, as done in following video (demo of visualwebsiteoptimizer)?

(see video at 0:15)

;feature=plcp

Basically, what I wish is to be able to:

• take a copy of a web page, (that part is ok),
• somehow enable edit mode (as would be done in any text editor),
• click on the element I wish to edit, and be able to modify the selected element

Edit: sorry I wasn't clear enough: my end goal is to enable my users to do live editing online (as done by visualwebsiteoptimizer) in a visual way.

Is there a way to enable in-browser editing of a web page, as done in following video (demo of visualwebsiteoptimizer.)?

(see video at 0:15)

http://www.youtube./watch?v=oy89HnIJsE4&feature=plcp

Basically, what I wish is to be able to:

• take a copy of a web page, (that part is ok),
• somehow enable edit mode (as would be done in any text editor),
• click on the element I wish to edit, and be able to modify the selected element

Edit: sorry I wasn't clear enough: my end goal is to enable my users to do live editing online (as done by visualwebsiteoptimizer.) in a visual way.

• javascript
• html

• There are a lot of developer plugins for FireFox that allows this. Just search on Google. – ionFish Commented Jun 28, 2012 at 14:21
• 3 javascript:document.body.contentEditable='true';document.designMode='on'; void 0 – Clyde Lobo Commented Jun 28, 2012 at 14:26
• 1 I guess what you are searching for is "frontend editing" – which is feature any good, modern CMS has. – feeela Commented Jun 28, 2012 at 14:33
• @feeela What if I am working outside any CMS. – Timothée HENRY Commented Jun 28, 2012 at 14:39

4 Answers 4

You could use designMode=on on the document, or contentEditable=true on specific elements. See for a small demo http://html5demos./contenteditable/. In addition, you could also catch mouseclicks and keydowns with jQuery and check the target element as to show options like CSS etc..!

1 - use google chrome.

2 - hit ctrl + shift + i

3 - go to elements tab

4 - right click on the html you want to edit and select "edit as html" or double click in the text you want to change in that tab

You can try using Jelliphy. Jelliphy is a tool that allows any users to edit any text of a web page, to move and resize elements in the page, to draw on the page, to edit the images and much more.

Jelliphy Lite and Jelliphy Extended are bookmarklets that you can use with any browser for free: just go to the page to change and click the Jelliphy link from your favorites.

Here is what you need, enjoy: http://myedit.io