如何在网页上模拟/实现所见即所得编辑器

How to mimic/implement a WYSWYG editor on a web page?

本文关键字:实现 所见即所得 编辑器 模拟 网页      更新时间:2023-09-26

我只知道它使用IFRAME标记作为表示层,它如何存储数据,如何在WYSIWYG模式和源模式之间切换?

浏览器中的大多数所见即所得编辑器(Google Docs是一个显著的例外)使用contenteditable属性使元素可编辑。

数据不需要以任何特殊的方式存储,它只是可编辑节点的HTML内容。

通过将可编辑元素的innerHTML转储到textarea中,显示textarea并隐藏可编辑元素,切换到源模式。

你可以通过谷歌contenteditable找到很多信息和教程。

我会使用许多免费的之一:

http://akzhan.github.com/jwysiwyg/

示例:http://akzhan.github.com/jwysiwyg/help/examples/03-ajax.html