因業務需求，要在 vue2.0 的項目裏使用富文本編輯器，通過調研多個編輯器，CKEditor5 支持 vue，遂採用。因 CKEditor5 文檔比較少，此處記錄下引用和一些基本用法。javascript
CKEditor5官網
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.htmlcss
CKEditor5 引入
有四種編輯器可供下載，根據本身的需求選擇，由於開發需求須要顏色筆，因此採用 Document editor。html
若是以前有用 Classic 版本的，在下載 Document 版本時須要 uninstall Classic，額，好像是句廢話，可是我用的時候 uninstall Classic好屢次才卸載掉。vue
1. 根據官網提示，採用 npm 引入CKEditor5，地址：https://ckeditor.com/ckeditor-5/download/。根據提示 copy 命令執行：java
npm install --save @ckeditor/ckeditor5-build-decoupled-document
2. router/index.js 引入 CKEditornode
3. 在使用的頁面引入，須要中文的可引入 zh-cn.js 文件ios
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document' import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js'
4. html 頁面寫入 <ckedtior> 標籤npm
<ckeditor id="editor" :editor="editor" @ready="onReady" v-model="content" :config="editorConfig"></ckeditor>
說明：json
v-model = "content" 獲取編輯器裏輸入的內容；axios
:config = "editorCnfig" 須要配置的項；
@ready = "onReady" 編輯器初始化
5. js 部分
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document' import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js' DecoupledEditor .create(document.querySelector('#editor'), { }).then(editor => { // 打印全部的配置項 // console.log('》》》》', Array.from( editor.ui.componentFactory.names() ) ); }).catch(error => { console.error(error) })
export default { data: () => ({ editor: DecoupledEditor, editorConfig: { toolbar: ['heading', 'fontSize', 'highlight', 'highlight:yellowMarker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:blueMarker', 'fontFamily', 'alignment', 'imageUpload', 'bold', 'italic', 'underline', 'imageStyle:full', 'imageStyle:alignLeft', 'imageStyle:alignRight', 'link', 'undo', 'redo'], fontSize: { options: [8, 9, 10, 11, 12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72], },
}
}，
ckfinder: {
uploadUrl: `${store.getters.currentStack.baseURL}/ckeditor/upload`,
} }) }
說明：
1. DecoupledEditor.create(document.querySelector('#editor'), {}）此處代碼可省略，除非你想打印出全部的配置項。
2. toolbar 配置工具欄
3. fontSize 字體 default 默認字體
4. highlight ：配置字體顏色和高亮。詳細的寫法可參考：https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html
（默認只有三四種顏色，谷歌搜「CKEditor5 highlight」 ，第一條出來了，CKEditor 中文的文檔不多，不要抗拒英文文檔，逃離溫馨區，也對本身說哈哈）
自定義圖片上傳插件問題
方法一：
文中標紅的地方，是配置圖片上傳，只須要填寫上傳圖片的後臺接口，注意，後臺返回的字段必須包括 uploaded 上傳的字節數 和 url 兩個字段，否則一直會 alert 提示框報錯。
方法二：
有些極端狀況，上傳圖片的接口任何人都能訪問到，若是被盜用惡意上傳大量圖片，服務器的存儲空間和流量就會被擠爆，因此這個接口須要 token/cookie 校驗限制下。那麼問題來了，若是須要傳遞 token 值，該怎麼傳？這就須要自定義圖片上傳插件。推薦文章：https://www.jianshu.com/p/47e25447b771 裏面有介紹如何自定義上傳圖片插件，可是有些部分講的不是特別清楚，當時也是看的雲裏霧裏。下面記錄下如何解決這個問題。
一、按照官網自定義上傳圖片插件的文檔，有兩篇文章可參考：
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html
https://stackoverflow.com/questions/52873321/add-custom-headers-to-upload-image
按照文檔，須要在 ClassicEditor.cteate() ，定義插件 MyCustomUploadAdapterPlugin ，在MyCustomUploadAdapterPlugin 插件裏建立類 MyUploadAdapter，MyUploadAdapter 放在 <script> 標籤下面，寫法以下：（注意！onReady 裏的這種寫法是錯的，正確的寫法是把綠色部分去掉，下面會講致使的 bug 及正確寫法）
<ckeditor id="editor" :editor="editor" v-model="content" @ready="onReady" :config="editorConfig"></ckeditor>
data: () => ({ editor: DecoupledEditor }) methods: { onReady( editor ) { DecoupledEditor .create( document.querySelector( '#editor' ), { extraPlugins: [ MyCustomUploadAdapterPlugin ], } ) .catch( error => { console.log( error ); }); function MyCustomUploadAdapterPlugin () { editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => { return new MyUploadAdapter( loader ); }; } } }
<script>
class MyUploadAdapter { constructor( loader ) { // Save Loader instance to update upload progress. this.loader = loader; } async upload() { const data = new FormData(); data.append('typeOption', 'upload_image'); data.append('upload', await this.loader.file); return new Promise((resolve, reject) => { axios({ url: `api/xxxx/ckeditor/upload`, method: 'post', data, headers: { 'Authorization': 'Bearer tokenxxxxxxxxxxxxxxxxxxx' // 此處爲你定義的token 值(Bearer token 接口認證方式) }, withCredentials: true // true 爲不容許帶 token, false 爲容許，可能會遇到跨域報錯：Error: Network Error 彈窗提示（感謝@ big_yellow 指正） }).then(res => { var resData = res.data; resData.default = resData.url; resolve(resData); }).catch(error => { reject(error) }); }); } }
</script>
我查到的文檔裏是沒有上段代碼兩處標紅的地方 async await (ES6 用法)，致使 console.log 錯誤，同事誤打誤撞加上 async await ，沒有報錯，具體緣由還不太清楚，多是 DOM 還未加載出來致使的，歡迎你們指正。
寫到這裏，頁面能夠正常加載，並可傳遞 token 值使用圖片上傳功能，可是，編輯器默認內容會顯示 @ 符號，
console.log(11111, document.getElementById('editor').childNodes[0]) 打印出這個值爲：<br data-cke-filler>，或下圖 <p>@</p>，
嘗試使用清除 DOM 把 「@」 刪除，可是編輯器試圖刪除不存在的 DOM 節點時崩潰，致使頁面卡死。
解決方法以下：運用 editor.setData() 設置編輯器初始值。
如今說下正確的自定義圖片上傳插件在 @onReady 裏寫法：
onReady( editor ) {
// 自定義上傳圖片插件
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
return new MyUploadAdapter( loader );
};
}
解釋：@onReady 的做用跟 DecoupledEditor.create( document.querySelector( '#editor' ), {}) 做用同樣，致使報錯。
設置字體樣式：
有的用戶瀏覽器不支持的字體樣式，須要下載字體包，並在 css 裏設置 @font-face
@font-face {
font-family: 'KaiTi';
src: url('../fonts/KaiTi.ttf');
font-family: 'SimHei';
src: url('../fonts/SimHei.ttf');
font-family: 'SimSun';
src: url('../fonts/SimSun.ttf');
font-weight: normal;
font-style: normal;
}
data: () => ({
title: '',
type: 'news',
content: '',
publish_at: '',
editor: DecoupledEditor,
editorConfig: {
language: 'zh-cn',
toolbar: ['heading', 'fontSize', 'fontFamily', 'redo', 'insertTable'],
fontSize: {
options: [ 12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72],
},
fontFamily: {
options: [
'宋體',
'黑體',
'楷體',
'微軟雅黑',
]
},
})