1. CKEditor5基本介绍
- CKEditor5的用法和CKEditor4.0版本完全不同，而网上几乎没有比较完整的教程，而官网教程又都是英语，比较难入门，所以在使用CKEditor5的时候踩了许多坑，把自己踩坑过程简单写一下。
2. 基本使用
1. 下载CKEditor5库
官方教程有CDN，npm， Zip download三种获取方式，但这三种方式获取的都是打包精简之后的版本，有一些文本编辑特性并没有，如对齐方式、字体大小等。如要更灵活的根据自己的需求添加或删减编辑器的特性，建议从CKEditor5官方Github下载。CKEditor5有多个版本，我使用的是从github下载的ckeditor5-build-classic版本。
2. 开始使用
目录ckeditor5-build-classic-master\build下的ckeditor.js是打包好的库，可以直接引用去使用。 新建一个editor.html,基本使用代码如下：
<div name="content" id="editor">
<p></p>
</div>
<script src="./ckeditor.js"></script>
<script>
var data;
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。
3. 上传图片
1. 三种方法概述
官方教程中上传图片有三种方法(1)：使用CKEditor自带云服务,图片上传到CKEditor服务器；(2)：使用ckfinder框架，在初始化CKEditor时，需要定义 ckfinder的uploadUrl参数，参数为上传到自己服务器的地址；(3)自己写上传功能，定义UploadAdapter，实现upload()和 abort() 方法，并对UploadAdapter进行调用。
方法1大家几乎不用，方法3要自己写上传功能，网上有个教程写得不是很清楚，我也没有很看懂，还存在疑问。代码如下：
class UploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return new Promise((resolve, reject) => {
const data = new FormData();
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)=>{
return new UploadAdapter(loader);
};
2. 上传图片方法2详解
网上有网友遇到用方法2上传图片，遇到一个奇葩问题：图片明明已经上传到服务器，返回数据也是按照所谓教程的{"default":"url"}格式。可是依然会报错。报错如下：
我也遇到了这个问题，迟迟没有解决，直到今天看了CKEditor中ckfinder的源码才发现问题。阅读ckeditor5-adapter-ckfinder发现，ckfinder也定义了UploadAdapter，同样实现了upload()和 abort() 方法。而问题就出现在upload()方法中。下面贴出upload()方法的源码：
upload() {
return new Promise( ( resolve, reject ) => {
this._initRequest();
this._initListeners( resolve, reject );
this._sendRequest();
} );
}
_initListeners( resolve, reject ) {
const xhr = this.xhr;
const loader = this.loader;
const t = this.t;
const genericError = t( \'Cannot upload file:\' ) + ` ${ loader.file.name }.`;
xhr.addEventListener( \'error\', () => reject( genericError ) );
xhr.addEventListener( \'abort\', () => reject() );
xhr.addEventListener( \'load\', () => {
const response = xhr.response;
if ( !response || !response.uploaded ) {
return reject( response && response.error && response.error.message ? response.error.message : genericError );
}
resolve( {
default: response.url
} );
} );
// Upload progress when it\'s supported.
/* istanbul ignore else */
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":"/"}，如此就不会出错了。所以，返回的数据并不是按照“教程“”说的那样。
4. 总结
因本人也是前端初学者，如果教程有错误和不足之处，还请海涵并帮忙指出改正，谢谢!
作者：续袁
链接：https://www.jianshu.com/p/47e25447b771
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
因本人也是前端初学者，如果教程有错误和不足之处，还请海涵并帮忙指出改正，谢谢!