CKEditor、UEditor富文本编辑器原理（CSDN编辑器原理）

2024-04-17 01:16:56

CKEditor 4 是什么

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

其中，在“在线”意味着CKEditor4 works in a web browser （如Firefox，Chrome浏览器，Internet Explorer或Safari）。

The“WYSIWYG” part means that when you use CKEditor 4, you can style 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 the Bold button, 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.

CKEditor、UEditor富文本编辑器原理（CSDN编辑器原理）相关推荐

Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
Ueditor富文本编辑器
Ueditor富文本编辑器 Ueditor富文本编辑器插件应用步骤如下: 1.引入css和js文件 2.设置承载标签设置富文本编辑器的承载标签,必须设置id属性.一般使用textarea或scrip ...
Thinkphp下嵌套UEditor富文本WEB编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 本文实际操作于ThinkPHP框架下,现 ...
ueditor富文本编辑器过滤了代码，如何取消？
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...
java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器
spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片依赖库版本: spring boot ...
php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
UEditor富文本编辑器不显示问题
项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...

最新文章

热门文章