开门见山，富文本编辑器就是一个大坑。接下来记录一下Vue2如何集成CKEditor5,大家有更好的做法欢迎交流

一.安装环境

vue 2.6.11
vue/cli 3.6.0(使用源码集成手脚架必须要3.x及以上版本)

二.使用官网的集成方案快速安装（以Classic为例）

快速安装官网文档Vue2.x Quick start文档

npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-adapter-ckfinder

引入项目官网推荐是全局引入,但是个人还是更加推荐局部引入吧，毕竟富文本编辑器只是在一两个页面上使用
在components目录下创建一个ykeditor.vue

<template>
  <div id="ykEditor">
    <ckeditor id="ckeditor" 
    :editor="editor" 
    v-model="editorData" 
    :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from '@ckeditor/ckeditor5-vue2'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'

export default {
  name: 'ClassicEditor',

  components: {
    //局部注册方式
    ckeditor: CKEditor.component
  },

  props: {
    content: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    }
  },


  data() {
    return {
      // Use the <ckeditor> component in this view.
      editor: ClassicEditor,
      editorData: this.content,
      editorConfig: {
        placeholder: this.placeholder,
        language: 'zh-cn',
        //该方式本人没有使用过,使用ckfinder上传时要注意返回的格式
        //应该是{"uploaded":1,"url":"/"}
        //或者{"uploaded":true,"url":"/"}
        ckfinder: {
          uploadUrl: '/',
          options: {
                resourceType: 'Images'
            }
        },
      },
    }
  },


  methods: {

    getContent(){
      return this.editorData
    },

    setContent(val){
      this.editorData = val
    },
  },

}
</script>

<style>
.ck-editor__editable {
  min-height: 400px;
}
</style>

使用

<template>
  <div id="app">
    <yk-editor ref="editorRef"></yk-editor>
    <button @click="setContent">设置内容</button>
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script>
  import ykEditor from "@/components/ykeditor";

  export default {
    name: 'ClassicEditor',

    components: {
      ykEditor
    },

    data() {
      return {

      }
    },

    methods: {
      setContent(){
        this.$refs.editorRef.setContent("<h1>这是ykEditor</h1>")
      },

      getContent(){
        console.log(this.$refs.editorRef.getContent())
      }
    }

  }

</script>

效果图

该有的功能基本都有了

三.自定义安装（相对）

这里的自定义只是控制classic的集成方案中的有的功能打印了一下大概有CKFinderUploadAdapter，Autoformat，Bold，Italic，BlockQuote，CKFinder，EasyImage，Heading，Image，ImageCaption，ImageStyle，ImageToolbar，ImageUpload，Indent，Link，List，MediaEmbed，Paragraph，PasteFromOffice，Table，TableToolbarTextTransformation这一些

添加一个static目录,新建uploadImageAdapter.js

export default class uploadImageAdapter {
    constructor(loader) {
        this.loader = loader
    }

    async upload() {
        //获取到用户上传的文件
        const image = await this.loader.file;
        const formData = new FormData();

        formData.append('file', image)
        /***
         * axios实现上传逻辑
         *
         */

        //返回的结果格式化一下,把url传到下面的json中
        let resultJson = {"uploaded":1,"url":"/"}

        return resultJson
    }
    
    abort() {
        
    }
}

创建一个自定义（相对）的classicEditor

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

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
import uploadImageAdapter from "@/static/uploadImageAdapter";

export default {
  name: 'ClassicEditor',

  props: {
    content: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.initEditor()
  },

  methods: {
    initEditor() {
      ClassicEditor.create(document.querySelector('#ykEditor'), {
        language: 'zh-cn',
        toolbar: [
          'heading',
          '|',
          'bold',
          'italic',
          'Link',
          'bulletedList',
          'numberedList',
          '|',
          'imageUpload',
          'blockQuote',
          '|',
          'undo', //撤销
          'redo',//重做
        ],
      }).then(editor => {
        const toolbarContainer = document.querySelector('#toolbar-container');
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);
        //正式初始化编辑器
        this.editor = editor

        //使用图片上传适配器
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
          return new uploadImageAdapter(loader)
        };

        //监听数据变化
        editor.model.document.on('change:data', () => {
          this.content = editor.getData();
        });

      }).catch(e => {
        console.log(e)
      });
    },

    getContent() {
      return this.content
    },

    setContent(val) {
      this.editor.setData(val)
    },
  }

}
</script>

<style>
.ck-editor__editable {
  min-height: 400px;
}
</style>

其中toolbar那里可以选择classic集成方案中的功能，也就是第三点开头的那些，只不过如果是这种安装方法,它会有引用这么一个东西，但是实际未必会有，所以添加之后看控制台的信息，如果提示没有的话，再逐一安装
还有一个比较坑爹的问题，如果是使用这样的集成方案，哪怕自定义也是只能定义集成方案中已有的功能，如果是继承方案中没有的功能，比如ImageReset这些...好像是没有办法再添加。

Vue2.X 安装CKEditor5 以及基本使用（一）

一.安装环境

二.使用官网的集成方案快速安装（以Classic为例）

三.自定义安装（相对）