如何在HTML中实现富文本编辑器

How to implement a Rich Text Editor in HTML?

本文关键字：文本 文本编辑 编辑器 实现 HTML      更新时间：2023-09-26

下面是演示:

http://www.kevinroth.com/rte/demo.htm

当我使用firebugs检查源代码时，我看到它只是iFrame，但是iFrame怎么能有一个文本区域的行为呢??对如何实现这一点有什么想法吗?Thank in

由于我现在正在为我的工作做这件事，所以我做了少量的研究。据我所知，有两种方法可以完成此任务:

document.designMode

在JavaScript中使用document.designMode，将整个HTML文档设置为可编辑的。由于整个HTML文档都是可编辑的，因此可能需要一个iframe来封装编辑，这样用户就不能编辑页面中不想编辑的任何部分。

据我所知，您链接的演示和TinyMCE使用了这种方法。

contenteditable

contenteditable HTML属性是类似的，但不需要使用iframe。将属性添加到标签中，其中的所有HTML都可以使用闪烁的光标进行编辑。

下面是它的一个演示:http://html5demos.com/contenteditable

指出

    就我个人而言，我会把contenteditable作为我的任务。以下是关于该主题的良好概述和详细信息:http://blog.whatwg.org/the-road-to-html-5-contenteditable
  • 正如我所说，我对此做了有限的研究，所以请帮助我纠正任何错误:)

在那个框架中，你可以看到一个完整的HTML源代码，它建立了一些看起来像文本区域+工具栏+东西。一个复杂的Javascript在背后完成了所有的技巧。例如，如果你选择一些文本，并使其粗体的工具栏比脚本放置<strong>标签周围的文本，等等。

使用http://www.tinymce.com/这是最好的富编辑器。工作与任何浏览器，它有很多很多的选项。它很容易使用。只需查看示例和文档即可。它包含在许多流行的博客和CMS中

相关文章：