CKEditor在ant design vue 中的使用

vue 安装ckeditor命令如下(本文只讨论build版本的,源码构建的方式暂不提及(我不会啊))

//vue 安装ckeditor
npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic

//下面命令是安装不同的版本 不同版本不同功能
npm install --save @ckeditor/ckeditor5-build-classic//基础版本
# Or:
npm install --save @ckeditor/ckeditor5-build-inline
# Or:
npm install --save @ckeditor/ckeditor5-build-balloon
# Or:
npm install --save @ckeditor/ckeditor5-build-balloon-block
# Or:
npm install --save @ckeditor/ckeditor5-build-decoupled-document//功能较多版本

//入口文件 main.js
import CKEditor from '@ckeditor/ckeditor5-vue2';

Vue.use( CKEditor );

//使用
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'//汉化

//template
<ckeditor  @ready="onReady" :editor="editor" v-model="addForm.content" :config="editorConfig"></ckeditor>
//定义
data() {
    return {
      editor: DecoupledEditor,
      editorData: '<p>Content of the editor.</p>',
      editorConfig: {
        // The configuration of the editor.
        language: 'zh-cn',
        toolbar: {
          toolbar: ["bold", "fontColor", "numberedList"],  
          shouldNotGroupWhenFull: true
        }
      },
}

 

重点来了:

ckeditor要用的上传适配器(我需要的场景必须要自建适配器),以及document版本需要初始化tollbar

//初始化    
onReady(editor) {
        //document 初始化toolbar
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      );
        //加载自定义的适配器
      editor.plugins.get("FileRepository").createUploadAdapter = loader => {
        return new MyUploadAdapter(loader);
      };
    },

 

自定义适配器 MyUploadAdapter 代码如下

import request from '@/utils/request'

class MyUploadAdapter {
  constructor(loader) {
    this.loader = loader;
  }

  async upload() {
    const data = new FormData();
    data.append("file", await this.loader.file);
    const res = await request({
      url: 'uploadfile',
      method: 'post',
      data: data
    })
    console.log(res.data);
    return {
      default: res.data.path,
    };
  }
}

export default MyUploadAdapter;

 

安装后运行各种报错,可以删除node_moudle 文件夹后,重新安装下.