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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。
因本人也是前端初學者，如果教程有錯誤和不足之處，還請海涵並幫忙指出改正，謝謝!