什么是与ContentEditable一起使用的WYSIWYG编辑器?

时间:2011-03-08 06:03:36

标签: editor wysiwyg contenteditable rich-text-editor

我正在尝试构建类似于Google文档的内容,您可以在其中直接编辑页面而不是通过textarea或iframe编辑页面。这可以使用contentEditable HTML5属性。

那么我是否可以在contentEditable之上使用任何优秀的编辑器来提供文本格式化,插入链接,从单词粘贴等功能?

http://www.aloha-editor.org/是我找到的,但我想知道是否还有更多。

(编辑:我应该澄清一点,我不是要构建整个 Google Docs,我只是将其用作编辑实际内容的示例)

2 个答案:

答案 0 :(得分:1)

WYMeditor的2.0版(目前由我和其他人正在开发)也使用contentEditable,但主要依赖于selection / ranges / dom进行操作,因为designMode和contenteEditable API的行为有很大不同浏览器供应商之间。

一些功能/设计目标是:

  • WYSIWYM编辑 - 分隔内容和演示文稿,我们启用了富文本格式,但将演示文稿留给设计师。

  • 模块化架构 - 仅使用您想要的组件(并将它们与您自己的ui连接起来)或使用工具栏,对话框和所有内容放入“完整堆栈”编辑器。 / p>

  • 严格的xHTML(5) - 编辑器默认输出严格的XHTML(可以根据需要轻松转换内容)。如果那不是您想要的,您可以编写自己的解析器和序列化器来支持您想要的任何格式。

  • 占位符/自定义元素 - 占位符甚至自定义元素使您可以管理编辑器中的几乎任何类型的内容。与StructureValidator一起,您可以强制执行嵌套,格式化,有效属性等规则。

来源可用on GitHub,预计会在一两个月内推出首个测试版。

答案 1 :(得分:1)

看看HTML5 editor,它需要一个textarea元素并将其转换为带有contentEditable的div。它有一个非常可定制的工具栏,可以轻松地格式化内容。