javascript 如何像visualwebsiteoptimizer.com一样在浏览器中实时编辑网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11246719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to edit web pages in browser in real time like visualwebsiteoptimizer.com?
提问by Timothée HENRY
Is there a way to enable in-browser editing of a web page, as done in following video (demo of visualwebsiteoptimizer.com)?
有没有办法启用网页的浏览器内编辑，如以下视频（visualwebsiteoptimizer.com 的演示）中所做的那样？
(see video at 0:15)
（见视频 0:15）
http://www.youtube.com/watch?v=oy89HnIJsE4&feature=plcp
http://www.youtube.com/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.com) in a visual way.
编辑：抱歉，我不够清楚：我的最终目标是让我的用户能够以可视化的方式在线进行实时编辑（如 visualwebsiteoptimizer.com 所做的那样）。
采纳答案by Willem Mulder
You could use designMode=on on the document, or contentEditable=true on specific elements. See for a small demo http://html5demos.com/contenteditable/. In addition, you could also catch mouseclicks and keydowns with jQuery and check the target element as to show options like CSS etc..!
您可以在文档上使用 designMode=on，或者在特定元素上使用 contentEditable=true。请参阅http://html5demos.com/contenteditable/的小演示。此外，您还可以使用 jQuery 捕捉鼠标点击和按键操作，并检查目标元素以显示 CSS 等选项！
回答by fmsf
1 - use google chrome.
1 - 使用谷歌浏览器。
2 - hit ctrl + shift + i
2 - 按 ctrl + shift + i
3 - go to elements tab
3 - 转到元素选项卡
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
4 - 右键单击要编辑的 html 并选择“编辑为 html”或双击要在该选项卡中更改的文本
回答by Patrizio Gelosi
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。Jelliphy 是一种工具，允许任何用户编辑网页的任何文本、移动和调整页面元素的大小、在页面上绘图、编辑图像等等。
Jelliphy Liteand Jelliphy Extendedare 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.
Jelliphy Lite和Jelliphy Extended是可以在任何浏览器中免费使用的书签：只需转到页面进行更改，然后单击收藏夹中的 Jelliphy 链接即可。
回答by NVRM
Here is what you need, enjoy: http://myedit.io
这是你需要的，享受：http: //myedit.io
