如何在网页上模仿/实现所见即所得编辑器?
我所知道的是它使用 IFRAME
标签作为表示层,它如何存储数据,如何在 WYSIWYG 模式和源模式之间切换?
All I know is that it uses a IFRAME
tag as it's presentation layer, how does it store the data, how does it switch between WYSIWYG mode and source mode?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
大多数浏览器内所见即所得编辑器(Google 文档是一个值得注意的例外)使用 contenteditable 属性使元素可编辑。
数据不需要以任何特殊方式存储,它只是可编辑节点的 HTML 内容。
通过将可编辑元素的
innerHTML
转储到textarea
中、显示textarea
并隐藏可编辑元素来切换到源模式。您可以通过谷歌搜索
contenteditable
找到大量信息和教程。Most in-browser WYSIWYG editors (Google Docs is a notable exception) use the contenteditable attribute to make an element editable.
The data doesn't need to be stored in any special way, it's just the HTML content of the editable node.
Switch to source mode by dumping the
innerHTML
of your editable element into atextarea
, showing thetextarea
, and hiding the editable element.You can find lots of information and tutorials by googling
contenteditable
.我会使用众多免费的之一:
http://akzhan.github.com/jwysiwyg/
示例: http://akzhan.github.com/jwysiwyg/help/examples/03-ajax.html
I'd use one of the many free ones:
http://akzhan.github.com/jwysiwyg/
example: http://akzhan.github.com/jwysiwyg/help/examples/03-ajax.html