vue+CKEditor富文本编辑器支持黏贴表格带图片

1.需求背景

复制代码

支持单独上传图片接口
支持黏贴图片、文本、表格
默认自定义收起编辑工具栏

2.遇到的问题

vue-quill-editor

复制代码

支持自定义上传图片，也支持黏贴文本，不支持添加表格，不支持黏贴表格、图片+文案，实现难度较大

wangeditor

css 复制代码

支持添加表格，支持自定义上传图片，但是不支持黏贴图片+文案或者表格带图片，自定义黏贴方法识别img还是html有点麻烦

3.解决办法

CKEditor

复制代码

优点：支持自定义上传图片，支持黏贴表格文案，以及任何带图片形式的方式。
缺点：只支持office软件黏贴表格带图片，wps的表格带图片不支持

效果图

实现流程

因为CKEditor属于付费软件，但是他有个版本是不用钱的，下载这个版本的就可以。（CKEditor也可以自定义使用，因为我这个项目技术栈是vue，所以直接使用现成的）

json 复制代码

"ckeditor4-vue": "^2.4.0"

在main.js中引入，全局注册

javascript 复制代码

import CKEditor from 'ckeditor4-vue';
Vue.use(CKEditor);

config配置 toolbarCanCollapse：是否可以收起工具栏 toolbarStartupExpanded：默认收起工具栏 filebrowserImageUploadUrl：上传图片的地址

javascript 复制代码

editorConfig: {
        toolbarCanCollapse: true,
        height: 600,
        placeholder: '请输入内容...',
        // 富文本功能项
        // extraPlugins: ['uploadimage'], //'uploadimage'
        // removePlugins: ['image'],
        // 本地图片上传(ckeditor官网有解释)
        // filebrowserBrowseUrl: "",
        filebrowserImageUploadUrl: 'https://ogcscssapi-uat.sgsonline.com.cn/ogc/api/web/upload/uploadImage?a=1',
        // filebrowserUploadUrl: 'https://ogcscssapi-uat.sgsonline.com.cn/ogc/api/web/upload/uploadImage?a=1',
        // 保证word导入格式
        pasteFromWordRemoveFontStyles: false,
        pasteFromWordRemoveStyles: false,
        forcePasteAsPlainText: false, // 是否强制复制来的内容去除格式
        allowedContent: true// 允许所有格式
      },

javascript 复制代码

 <ckeditor ref="ckeditor" v-model="currentContent" :read-only="disabled" :config="editorConfig" @blur="onChange" @ready="onEditorReady" />

在ready里监听图片上传动作，在这里面可以拿到接口数据，自定义操作。黏贴事件也是在这里面监听实现

javascript 复制代码

onChange({ editor }) {
  this.currentContent = editor.getData()
},
onEditorReady(val) {
      const _this = this
      const editor = this.$refs.ckeditor.instance
      // editor.on('paste', function (evt) {
      //   console.log('paste==', evt)
      // })
      editor.on('fileUploadRequest', function (evt) {
        _this.quillUpdateImg = true
        const formData = new FormData()
        const fileLoader = evt.data.fileLoader
        const { xhr, uploadUrl, file, fileName } = fileLoader
        xhr.open('post', uploadUrl)
        // 这里可以根据自己需要添加token等其他头信息
        xhr.setRequestHeader('token', getToken())
        formData.append('file', file, fileName)
        xhr.send(formData)
        evt.stop()
      })
      editor.on('fileUploadResponse', function (evt) {
        evt.stop()
        console.log('fileUploadResponse evt==', evt, 'getData==', evt.editor.getData())
        const xhr = evt.data.fileLoader.xhr
        const res = JSON.parse(xhr.responseText)
        _this.quillUpdateImg = false
        if (!res.data) {
          evt.data.message = res.message
          evt.cancel()
          return false
        }
        const { fileId, url } = res.data
        const endeFileId = fileId.replaceAll('/', 'sgsb3005fd03f95452ba78b2159aadc51fd')
        evt.data.url = url + '&ckEditorFileId=' + endeFileId + 'ckEditorFileIdEnd'
      })
    },