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'
      })
    },
相关推荐
csj5016 分钟前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少29 分钟前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)1 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰1 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3281 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476681 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin1 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风2 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder2 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost2 小时前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求