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

发布于 2025-01-06 11:18:57 字数 93 浏览 1 评论 0原文

我所知道的是它使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

莫多说 2025-01-13 11:18:57

大多数浏览器内所见即所得编辑器(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 a textarea, showing the textarea, and hiding the editable element.

You can find lots of information and tutorials by googling contenteditable.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文