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'
      })
    },
相关推荐
下位子2 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒2 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户47949283569153 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影3 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天5 分钟前
CSS 属性值的计算与过程
前端
云鹤_5 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码
xinfei7 分钟前
ES6 新特性 从 ECMAScript 2015(ES6)到 ECMAScript 2025
前端
GBVFtou10 分钟前
vue响应式 track 和trigger 过程
前端
耀耀切克闹灬18 分钟前
生成tag号的脚本
前端
Never_Satisfied21 分钟前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html