600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > CKEditor UEditor富文本编辑器原理(CSDN编辑器原理)

CKEditor UEditor富文本编辑器原理(CSDN编辑器原理)

时间:2022-11-23 14:02:56

相关推荐

CKEditor UEditor富文本编辑器原理(CSDN编辑器原理)

CKEditor 4 是什么

CKEditor 4 是一个在线 WYSIWYG 编辑器,用于在浏览器中编辑 HTML 文档(或其片段)。

其中,在“在线”意味着CKEditor4works in a web browser(如Firefox,Chrome浏览器,Internet Explorer或Safari)。

The“WYSIWYG”part means that when you use CKEditor 4, you canstyle the text and add rich media contents to your document in real time by using the editor UI(toolbar buttons, dialog windows), and the result will be seen immediately. If you click theBoldbutton, the text will become bold; when you add an image, it will appear straightaway.

CKEditor 4 用于创建 Web 内容的标记语言(HTML)。然而,CKEditor 4 给您带来的巨大好处是,您无需直接查看 HTML 代码,也无需了解其复杂性。编辑器在这里有点像中介——它对你隐藏 HTML 代码,让你只用 WYSIWYG 方式工作。

CKEditor 4 的工作原理

CKEditor 4 只是对用户隐藏 HTML 标签,并在图形用户界面中显示它们的等效项(如粗体工具栏按钮),并输出已应用格式的文本。

赖于浏览器原生的编辑能力,用户内容的输入由浏览器直接处理。加粗、斜体、回车等这类的处理则是捕获浏览器的事件来覆盖浏览器默认行为来实现,再辅以一些DOM的嵌套规则(dtd)和复杂数据输入(如粘贴)的过滤规则来约束数据的正确性。

内容的可编辑主要依赖DOM的contentEditable属性,基于原生execCommand或者自定义扩展的execCommand去操作DOM实现富文内容的修改。

CKEditor 4 works on HTML code and to do it well, it needs to get proper HTML code as input.If the source document is incorrect, CKEditor 4 will attempt to fix it in order to be able to apply its content transformations.

In order to avoid problems, the input provider (you!) needs to make sure that what CKEditor 4 gets is clean, standards-compliant HTML code(符合标准的 HTML 代码). If this is the case, CKEditor 4 will work as intended and output clean, standards-compliant HTML code(符合标准的 HTML 代码) in return.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。