vue中使用富文本编辑器CKEditor（静态资源引入）

一、选择适合需求功能的插件并下载（CKFinder是收费组件）。

二、使用
1.将build目录中的文件放到vue项目的public/ckedito5目录下。
2.在index.html中引入。

<script src="/public/ckeditor5/ckeditor.js"></script>

3.在main.js中设置全局使用方法。

Vue.prototype.$ClassicEditor = window.ClassicEditor; 

4.配置上传图片，编译修改文件。官方文档-安装插件

ckeditor默认使用CKFinderUploadAdapter，这个适配器没有配置认证的选项。按官方文档需要改为使用SimpleUploadAdapter。

①在下载的官方源码中，安装适配器。

npm install @ckeditor/ckeditor5-upload --save

②修改src/ckeditor.js

// 注释
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
// 加入
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

// 把CKFinderUploadAdapter替换为SimpleUploadAdapter
Editor.builtinPlugins = [
    ……,
	SimpleUploadAdapter,
]

③编译

npm run build

④替换public/ckedito5下生成的editor.js文件。

5.代码渲染部分.

html

<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor"></div>

js

data() {
   return {
       editor:null,//编辑器实例
    }
},

initCKEditor(){
   this.$ClassicEditor.create( document.querySelector( '#editor' ), { 
         toolbar: {//工具栏内容设置
             items: [
                 'heading','|','bold','italic','link','bulletedList',
                 'numberedList','|','outdent','indent','|','imageUpload',
                 'blockQuote','insertTable','undo','redo'
             ]
         },
         simpleUpload: {
             uploadUrl: '/upImg',//上传图片的接口
             withCredentials: true,
             headers: {
                 token:localStorage.getItem('token')//token校验用
             }
         },
         language: 'zh-cn',
         image: {
             toolbar: [
                 'imageTextAlternative',
                 'imageStyle:inline',
                 'imageStyle:block',
                 'imageStyle:side'
             ]
         },
         table: {
             contentToolbar: [
                 'tableColumn',
                 'tableRow',
                 'mergeTableCells'
             ]
         },
         licenseKey: '',
         })
         .then( editor => {
             // window.editor = editor;
             //不用window.editor是因为在修改功能中，不能回显数据。
             this.editor= editor;
         })
         .catch( () => {
             
         });
 },

6.回显数据方法

this.editor.setData('修改功能时，需要回显的数据信息')

7.保存时获取数据

this.editor.getData()