ckeditor5 多种类型的切换使用

1.使用superbuild 构建的多类型切换富文本

classic模式：

 

inline模式：

 还有两种模式我自己项目里没用

开源博客里整合了四种模式的类型在一个脚本里 按需使用就行

 sample目录下html可进行测试

2.自定义上传服务地址需要在自己项目里进行配置

2.1 创建一个upload.js文件

import vue from 'vue'

export default class MyUploadAdapter {

  url = '/common/attachment/upload'

  params = []

  constructor(loader, url, params) {

    // The file loader instance to use during the upload.

    this.loader = loader

    this.params = params || [] // 请求参数

    this.url = url || '/common/attachment/upload' // url

  }

  // Starts the upload process.

  upload() {

    return this.loader.file

      .then(file => new Promise((resolve, reject) => {

        this.uploadFile(file, resolve)

      }))

  }

  async uploadFile(file, resolve) {

    // 上传文件

    const image = await file

    const formData = new FormData()

    // for (const i in this.params) { // 传参以后再拓展吧

    //   formData.append(, image)

    // }

    formData.append('file', image)

    vue.prototype.ajax({ // 这里是做的一个ajax请求 看你们自己项目是啥 用axios都行

      url: this.url,

      method: 'post',

      data: formData,

      success: (respJson) => {

        // 这个返回url

        resolve({ default: respJson.url })

      }

    })

  }

  // Aborts the upload process.

  abort() {

    // Reject the promise returned from the upload() method.

  }

}

2.2 初始化富文本的组件里进行引入（）

 2.3富文本初始化之后 

.then(editor => {
.....

 // 使用图片上传适配器

          editor.plugins.get('FileRepository').createUploadAdapter = (

            loader

          ) => {

            // eslint-disable-next-line new-cap

            return new MyUploadAdapter(loader, this.options.action)

          }

})

以上就是ckeditor5 的配置 应该能够满足大部分项目需求了如果需要增加自定义插件可以下载我的源码然后再ckeditor.js进行配置增加

 

开源博客：https://gitee.com/cao-xiaoping/ckeditor-5