【问题标题】:What's a good WYSIWYG editor to use with ContentEditable? [closed]与 ContentEditable 一起使用的好的 WYSIWYG 编辑器是什么? [关闭]
【发布时间】:2011-07-10 21:08:09
【问题描述】:
我正在尝试构建类似于 Google Docs 的东西,您可以在其中直接编辑页面,而不是通过 textarea 或 iframe。这可以通过 contentEditable HTML5 属性实现。
那么有没有什么好的编辑器可以在 contentEditable 之上使用,以提供文本格式、插入链接、从 word 粘贴等功能?
http://www.aloha-editor.org/ 是我找到的一个,但我想知道是否还有更多。
(编辑:我应该澄清一下,我并不是在尝试构建整个 Google Docs,我只是将其用作编辑实际内容的示例)
【问题讨论】:
标签:
editor
wysiwyg
contenteditable
rich-text-editor
【解决方案1】:
WYMeditor 的 2.0 版(目前我和其他人正在大力开发)也使用 contentEditable,但主要依赖于选择/范围/dom 进行操作,因为 designMode 和 contenteEditable API 的行为在浏览器之间有很大差异供应商。
一些功能/设计目标是:
所见即所得编辑 – 分离内容和演示文稿,我们启用富文本格式,但将演示文稿留给设计师。
模块化架构 – 仅使用您想要的组件(并将它们与您自己的 ui 挂钩)或放入带有工具栏、对话框和所有内容的“全栈”编辑器。
Strict xHTML(5) – 编辑器默认输出严格的 XHTML(便于根据需要转换内容)。如果这不是您想要的,您可以编写自己的解析器和序列化程序来支持您想要的任何格式。
占位符/自定义元素 – 占位符甚至自定义元素使您能够在编辑器中管理几乎任何类型的内容。与 StructureValidator 一起,您可以强制执行嵌套、格式化、有效属性等规则。
源代码可用on GitHub 并且预计将在一两个月内发布第一个测试版。
【解决方案2】:
看看HTML5 editor,它采用了一个textarea 元素并将其转换为一个带有contentEditable 的div。它有一个非常可定制的工具栏,可以轻松格式化内容。