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

时间:2011-12-02 17:22:50

标签: javascript web-applications rich-text-editor

以下是演示:

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

当我使用firebugs来检查源代码时,我发现它只是iFrame,但是iFrame如何才能有文本区域行为?有关如何实现这一点的任何想法?谢谢

3 个答案:

答案 0 :(得分:8)

由于我现在正在为我的工作做这件事,我做了一些研究。根据我的想法,有两种方法可以实现这一目标:

document.designMode

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

据我所知,您链接的演示和TinyMCE使用此方法。

CONTENTEDITABLE

contenteditable HTML属性类似,但不需要使用iframe。您可以将该属性添加到标记中,并使用闪烁的光标将其中的所有HTML变为可编辑。

以下是它的演示:http://html5demos.com/contenteditable


注释

答案 1 :(得分:-1)

在该框架中,您可以看到一个完整的HTML源代码,可以构建看起来像文本区域+工具栏+内容的内容。一个复杂的Javascript正在做所有的技巧。例如。如果您选择一些文本并使用工具栏将其设为粗体,则脚本会在文本周围放置<strong>标记等等。

答案 2 :(得分:-2)

使用http://www.tinymce.com/这是最好的编辑器。适用于任何浏览器,它有很多选项。它非常易于使用。只需看看示例和文档。它包含在许多流行的博客和CMS中。