ckeditor5 + @vue/cli4 的简单使用（包含多种图片上传）

一、安装

第一步肯定是先安装ckeditor了

一共有4种类型的rich editor，选择其中一种进行安装。由于是应用在vue中所以需要额外安装@ckeditor/ckeditor5-vue

执行如下命令

  npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document

二、在mian.js中全局注册

import CKEditor from '@ckeditor/ckeditor5-vue'
Vue.use(CKEditor)

三、在组件中使用

html代码

<ckeditor id="editor" :editor="editor" @ready="onEditorReady" v-model="content" :config="editorConfig"></ckeditor>

editor为指定4种rich editor种的一种
onEditorReady为编辑器ready时执行的方法
content为绑定的编辑器里面的内容
editorConfig为编辑器的一些配置

js代码

<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js'

export default {
  name: 'ArticlePublish',
  data () {
    return {
      editor: DecoupledEditor,
      content: '<p>请在此输入内容！！！</p>',
      editorConfig: {
        toolbar: [
          'heading',
          '|',
          'bold',
          'italic',
          'Underline',
          'fontSize',
          'numberedList',
          'bulletedList',
          'blockQuote',
          '|',
          'alignment:left',
          'alignment:right',
          'alignment:center',
          'alignment:justify',
          '|',
          'imageUpload',
          'Link',
          '|',
          'undo',
          'redo'
        ],
        language: 'zh-cn',
        // 此处用的是simpleUpload的上传方式 这种上传方式需要后台的配合（返回指定的数据格式）类似这种
        // {
        //   url: ''
        // }
        // 服务端需要接收的字段为upload
        // 用这种方式上传rich editor中的 innerHTML 的 img 标签的 src 为服务器返回的链接而不是base64
        simpleUpload: {
          uploadUrl: '' // 你的上传图片地址
        }
      }
    }
  }
  methods: {
    onEditorReady (editor) {
      // 打印所有的配置项
      // console.log(Array.from(editor.ui.componentFactory.names()))

      // Insert the toolbar before the editable area.
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      )
    }
  }
}
</script>

使用simpleUpload上传方式，文档会让你安装这么一个包@ckeditor/ckeditor5-upload，那么我们一般就会这么来写

import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter'

但是事情并没有那么简单，由于我们之前安装的ckeditor为build版本的，所以一旦你引用了这个包，好了，那么错误就跟着来了，这里官方也解释了错误的原因，所以我们要换一种方式引入。

找到对应编辑器的源代码版本GitHub地址，我这里的是https://github.com/ckeditor/ckeditor5-build-decoupled-document
克隆仓库到本地，安装相关的依赖项
在src目录下的ckeditor.js中添加如下代码

image.png

image.png
执行npm run build打包构建，替换掉之前node_modules中@ckeditor文件夹中对应的build目录，如下图

image.png
然后上面的配置项中，simpleUpload上传项就生效了

simpleUpload上传方式文档链接

base64方式上传

可以看到上面截图的红框部分中有一个Base64UploadAdapter的上传适配器被我注释掉了，它和SimpleUploadAdapter写在一起，所以base64方式图片上传和simpleUpload是类似的，只是引入之后，无需任何配置，自动生效。

base64上传方式文档链接

自定义图片上传方式

首先要定义一个上传适配器

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 弹窗提示
      }).then(res => {
        var resData = res.data
        resData.default = resData.url
        resolve(resData)
      }).catch(error => {
        reject(error)
      })
    })
  }
  
  abort () {

  }
}

使用适配器在onEditorReady方法中添加如下代码

editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
    return new MyUploadAdapter( loader );
};

自定义上传官方文档

最后需要注意的就是如果你使用的是build版本的包，然后又引用了一些ckeditor的其它插件包，可能就会导致webpack编译报错。这里所采用的解决方案就是上面所说的去找对应编辑器源码仓库的方式，将插件集成到build包中，确保依赖只引用一次。