CKEditor是一款口碑非常不错的html文档编辑软件，这款软件支持多款浏览器，能够让用户快速实现html在线编辑等操作。同时，该软件的安装方法极其简单，用户只需要将解压出来的文件放在网站CKEditor文件夹里即可。
多年的连续测试驱动开发(5000多个测试)和代码同行评审，让一个成熟的产品拥有最高的可靠性。还有专用的核心开发团队，以及活跃的开源社区支持的维持。
2、可访问性
符合最新的Web可访问性标准(WCAG 2、508节，WAI-ARIA)同时使您能够创建可访问的内容，以及内置的辅助检查。
3、可定制性
自定义编辑器的每一个细节，定制您的需求，使用其强大的开发者友好的文档和丰富的JavaScript API。
4、创新思维
不断引领创新领域的丰富文本编辑。把你的内容创作过程由Word粘贴等独特功能的全面控制，引申到先进的内容过滤，控件，自定义HTML格式以及更多。
从基本的格式使用预定义的文本格式，文本样式和创建数学公式或漂亮的代码片段。
2、完整的多语言支持
本地化为超过60种语言，ckeditor支持从右到左的文本方向以及文本选择分配一个特定的语言。
3、完全访问
ckeditor符合最新的Web可访问性标准（WCAG2.0，WAI-ARIA）可以访问的内容，由于内置的辅助功能检查器创建。
4、拼写检查
作为你的类型，看到正确的拼写错误而打字。拼错的单词，你可以简单地选择替换不正确的单词建议。
5、窗口小部件
创新CKEditor功能使定制内容丰富的实体如标题图片创作，通过将多个HTML元素的代码片段或内容模板。
6、干净的代码
CKEditor创建干净的代码，符合标准和可读性。你也可以包括您的自定义格式设置规则来完全控制你的HTML输出。
7、高级粘贴
此功能使粘贴的内容直接从微软Word和保持原有的内容，用干净的HTML输出格式。
8、添加存储库和生成器
下载一个完美的定制的在线丰富的文本编辑器使用在线生成器，并轻松地集成额外的插件从库中。
9、易于集成
CKEditor通过添加一个脚本到您的网页。现成的zip安装包之间选择，你最喜欢的包管理器或CDN版本。
10、丰富的API
强大和广泛的接口，让您在运行时与编辑器交互，创建自定义功能，并将内容随意操作。
11、完全可定制的
自定义CKEditor的每一个方面（如工具栏、调色板、皮肤、对话框、菜单、数据解析、造型、等）和调整你的需要。
12、先进的内容过滤
限制和调整输入数据以对编辑器实例中允许的内容完全控制。
1.下载CKEditor5库
在起点软件园下载该软件的压缩包
2.开始使用
目录ckeditor5-build-classic-master\build下的ckeditor.js是打包好的库，可以直接引用去使用。新建一个editor.html,基本使用代码如下：
<divname="content"id="editor">
<p></p>
</div>
<scriptsrc="./ckeditor.js"></script>
<script>
vardata;
ClassicEditor.create(document.querySelector('#editor'),{
ckfinder:{
uploadUrl:'/'
}
}
).then(editor=>{
window.editor=editor;
data=editor.getData();
console.log(data);
})
.catch(error=>{
console.log(error);
});
</script>
3.定制自己的CKEditor5:增删特性
虽然build目录下的ckeditor.js可以直接使用，但是特性较少。下面开始定制自己的CKEditor5（注：本人对webpack打包不是很熟悉，本章节可能有问题，在打包使用过程遇到了问题，但用一些方法解决了）。
首先需要的工具：npm,webpack；
了解文件：webpack.config.js，package.json，build-config.js，src/ckeditor.js;
webpack.config.js文件定义了打包的规则，package.json定义了用的包；build-config.js定义CKEditor5特性，src/ckeditor.js也是定义定义CKEditor5特性，似乎build-config.js和src/ckeditor.js只有一个就够了，我使用的是src/ckeditor.js。
打包之后的工程上传的Github，工程地址：https://github.com/Taoli96/CKEditor。
二、上传图片的方法
1.三种方法概述
官方教程中上传图片有三种方法
(1)：使用CKEditor自带云服务,图片上传到CKEditor服务器；
(2)：使用ckfinder框架，在初始化CKEditor时，需要定义ckfinder的uploadUrl参数，参数为上传到自己服务器的地址；
(3)自己写上传功能，定义UploadAdapter，实现upload()和abort()方法，并对UploadAdapter进行调用。
方法1大家几乎不用，方法3要自己写上传功能，网上有个教程写得不是很清楚，我也没有很看懂，还存在疑问。代码如下：
classUploadAdapter{
constructor(loader){
this.loader=loader;
}
upload(){
returnnewPromise((resolve,reject)=>{
constdata=newFormData();
data.append('upload',this.loader.file);
data.append('allowSize',10);//允许图片上传的大小/兆
$.ajax({
url:'/QingXiao/Article/uploadArticleImage4',
type:'POST',
data:data,
dataType:'json',
processData:false,
contentType:false,
success:function(data){
if(data.res){
resolve({
default:data.url
});
}else{
reject(data.msg);
}
}
});
});
}
abort(){
}
}
//加载了适配器
editor.plugins.get('FileRepository').createUploadAdapter=(loader)=>{
returnnewUploadAdapter(loader);
};
2.上传图片方法2详解
网上有网友遇到用方法2上传图片，遇到一个奇葩问题：图片明明已经上传到服务器，返回数据也是按照所谓教程的{"default":"url"}格式。可是依然会报错。报错如下：
我也遇到了这个问题，迟迟没有解决，直到今天看了CKEditor中ckfinder的源码才发现问题。阅读ckeditor5-adapter-ckfinder发现，ckfinder也定义了UploadAdapter，同样实现了upload()和abort()方法。而问题就出现在upload()方法中。下面贴出upload()方法的源码：
upload(){
returnnewPromise((resolve,reject)=>{
this._initRequest();
this._initListeners(resolve,reject);
this._sendRequest();
});
}
_initListeners(resolve,reject){
constxhr=this.xhr;
constloader=this.loader;
constt=this.t;
constgenericError=t('Cannotuploadfile:')+`${loader.file.name}.`;
xhr.addEventListener('error',()=>reject(genericError));
xhr.addEventListener('abort',()=>reject());
xhr.addEventListener('load',()=>{
constresponse=xhr.response;
if(!response||!response.uploaded){
returnreject(response&&response.error&&response.error.message?response.error.message:genericError);
}
resolve({
default:response.url
});
});
//Uploadprogresswhenit'ssupported.
/*istanbulignoreelse*/
if(xhr.upload){
xhr.upload.addEventListener('progress',evt=>{
if(evt.lengthComputable){
loader.uploadTotal=evt.total;
loader.uploaded=evt.loaded;
}
});
}
}
从上面源码中可以发现，ckfinder请求之后的返回体response应该不为空，且还要包括uploaded和url字段，所以返回数据实际格式应该是{"uploaded":1,"url":"/"}，如此就不会出错了。所以，返回的数据并不是按照“教程“”说的那样。
CKEditor5是一款富文本编辑器，可让您在网页或在线应用程序中编写内容。
查看CKEditor5SDK，这是一个大量的在线样本，旨在帮助您熟悉所有编辑器功能，并使实现和配置过程更加轻松。如果您仍然有疑问，您可以下载任何CKEditor5软件包，并直接在您的网站或应用程序中测试它们。
CKEditor5是否支持我的语言？
CKEditor5现在有60多种语言可供选择，默认情况下它以用户的语言显示。
【基本介绍】
CKEditor 是 Fckeditor html编辑器了一个升级版本，用过 FCKeditor 的站长都知道,由于其打开速度的不理想把 FCKeditor 用于网站做为在线编辑器并不是明智的选择，ckeditor正好弥补了这一缺陷，ckeditor是由Frederico Knabben.针对网络而开发的在线编辑器。【官方介绍】
CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。CKEditor5支持IE8以上、Netscape、Mozilla等多种浏览器。遵循LGPL版权,支持多种脚本语言调用，如asp、asp.net、php、pl、jsp 等,是目前市场使用广泛的一款在线HTML编辑器之一。【特色介绍】
1、质量优秀多年的连续测试驱动开发(5000多个测试)和代码同行评审，让一个成熟的产品拥有最高的可靠性。还有专用的核心开发团队，以及活跃的开源社区支持的维持。
2、可访问性
符合最新的Web可访问性标准(WCAG 2、508节，WAI-ARIA)同时使您能够创建可访问的内容，以及内置的辅助检查。
3、可定制性
自定义编辑器的每一个细节，定制您的需求，使用其强大的开发者友好的文档和丰富的JavaScript API。
4、创新思维
不断引领创新领域的丰富文本编辑。把你的内容创作过程由Word粘贴等独特功能的全面控制，引申到先进的内容过滤，控件，自定义HTML格式以及更多。
【功能介绍】
1、高级文本格式从基本的格式使用预定义的文本格式，文本样式和创建数学公式或漂亮的代码片段。
2、完整的多语言支持
本地化为超过60种语言，ckeditor支持从右到左的文本方向以及文本选择分配一个特定的语言。
3、完全访问
ckeditor符合最新的Web可访问性标准（WCAG2.0，WAI-ARIA）可以访问的内容，由于内置的辅助功能检查器创建。
4、拼写检查
作为你的类型，看到正确的拼写错误而打字。拼错的单词，你可以简单地选择替换不正确的单词建议。
5、窗口小部件
创新CKEditor功能使定制内容丰富的实体如标题图片创作，通过将多个HTML元素的代码片段或内容模板。
6、干净的代码
CKEditor创建干净的代码，符合标准和可读性。你也可以包括您的自定义格式设置规则来完全控制你的HTML输出。
7、高级粘贴
此功能使粘贴的内容直接从微软Word和保持原有的内容，用干净的HTML输出格式。
8、添加存储库和生成器
下载一个完美的定制的在线丰富的文本编辑器使用在线生成器，并轻松地集成额外的插件从库中。
9、易于集成
CKEditor通过添加一个脚本到您的网页。现成的zip安装包之间选择，你最喜欢的包管理器或CDN版本。
10、丰富的API
强大和广泛的接口，让您在运行时与编辑器交互，创建自定义功能，并将内容随意操作。
11、完全可定制的
自定义CKEditor的每一个方面（如工具栏、调色板、皮肤、对话框、菜单、数据解析、造型、等）和调整你的需要。
12、先进的内容过滤
限制和调整输入数据以对编辑器实例中允许的内容完全控制。
【使用方法】
一、基本使用方法1.下载CKEditor5库
在起点软件园下载该软件的压缩包
2.开始使用
目录ckeditor5-build-classic-master\build下的ckeditor.js是打包好的库，可以直接引用去使用。新建一个editor.html,基本使用代码如下：
<divname="content"id="editor">
<p></p>
</div>
<scriptsrc="./ckeditor.js"></script>
<script>
vardata;
ClassicEditor.create(document.querySelector('#editor'),{
ckfinder:{
uploadUrl:'/'
}
}
).then(editor=>{
window.editor=editor;
data=editor.getData();
console.log(data);
})
.catch(error=>{
console.log(error);
});
</script>
3.定制自己的CKEditor5:增删特性
虽然build目录下的ckeditor.js可以直接使用，但是特性较少。下面开始定制自己的CKEditor5（注：本人对webpack打包不是很熟悉，本章节可能有问题，在打包使用过程遇到了问题，但用一些方法解决了）。
首先需要的工具：npm,webpack；
了解文件：webpack.config.js，package.json，build-config.js，src/ckeditor.js;
webpack.config.js文件定义了打包的规则，package.json定义了用的包；build-config.js定义CKEditor5特性，src/ckeditor.js也是定义定义CKEditor5特性，似乎build-config.js和src/ckeditor.js只有一个就够了，我使用的是src/ckeditor.js。
打包之后的工程上传的Github，工程地址：https://github.com/Taoli96/CKEditor。
二、上传图片的方法
1.三种方法概述
官方教程中上传图片有三种方法
(1)：使用CKEditor自带云服务,图片上传到CKEditor服务器；
(2)：使用ckfinder框架，在初始化CKEditor时，需要定义ckfinder的uploadUrl参数，参数为上传到自己服务器的地址；
(3)自己写上传功能，定义UploadAdapter，实现upload()和abort()方法，并对UploadAdapter进行调用。
方法1大家几乎不用，方法3要自己写上传功能，网上有个教程写得不是很清楚，我也没有很看懂，还存在疑问。代码如下：
classUploadAdapter{
constructor(loader){
this.loader=loader;
}
upload(){
returnnewPromise((resolve,reject)=>{
constdata=newFormData();
data.append('upload',this.loader.file);
data.append('allowSize',10);//允许图片上传的大小/兆
$.ajax({
url:'/QingXiao/Article/uploadArticleImage4',
type:'POST',
data:data,
dataType:'json',
processData:false,
contentType:false,
success:function(data){
if(data.res){
resolve({
default:data.url
});
}else{
reject(data.msg);
}
}
});
});
}
abort(){
}
}
//加载了适配器
editor.plugins.get('FileRepository').createUploadAdapter=(loader)=>{
returnnewUploadAdapter(loader);
};
2.上传图片方法2详解
网上有网友遇到用方法2上传图片，遇到一个奇葩问题：图片明明已经上传到服务器，返回数据也是按照所谓教程的{"default":"url"}格式。可是依然会报错。报错如下：
我也遇到了这个问题，迟迟没有解决，直到今天看了CKEditor中ckfinder的源码才发现问题。阅读ckeditor5-adapter-ckfinder发现，ckfinder也定义了UploadAdapter，同样实现了upload()和abort()方法。而问题就出现在upload()方法中。下面贴出upload()方法的源码：
upload(){
returnnewPromise((resolve,reject)=>{
this._initRequest();
this._initListeners(resolve,reject);
this._sendRequest();
});
}
_initListeners(resolve,reject){
constxhr=this.xhr;
constloader=this.loader;
constt=this.t;
constgenericError=t('Cannotuploadfile:')+`${loader.file.name}.`;
xhr.addEventListener('error',()=>reject(genericError));
xhr.addEventListener('abort',()=>reject());
xhr.addEventListener('load',()=>{
constresponse=xhr.response;
if(!response||!response.uploaded){
returnreject(response&&response.error&&response.error.message?response.error.message:genericError);
}
resolve({
default:response.url
});
});
//Uploadprogresswhenit'ssupported.
/*istanbulignoreelse*/
if(xhr.upload){
xhr.upload.addEventListener('progress',evt=>{
if(evt.lengthComputable){
loader.uploadTotal=evt.total;
loader.uploaded=evt.loaded;
}
});
}
}
从上面源码中可以发现，ckfinder请求之后的返回体response应该不为空，且还要包括uploaded和url字段，所以返回数据实际格式应该是{"uploaded":1,"url":"/"}，如此就不会出错了。所以，返回的数据并不是按照“教程“”说的那样。
【常见问题】
什么是CKEditor5？CKEditor5是一款富文本编辑器，可让您在网页或在线应用程序中编写内容。
查看CKEditor5SDK，这是一个大量的在线样本，旨在帮助您熟悉所有编辑器功能，并使实现和配置过程更加轻松。如果您仍然有疑问，您可以下载任何CKEditor5软件包，并直接在您的网站或应用程序中测试它们。
CKEditor5是否支持我的语言？
CKEditor5现在有60多种语言可供选择，默认情况下它以用户的语言显示。