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'
      })
    },
相关推荐
wuhen_n13 分钟前
CSS元素动画篇:基于当前位置的变换动画(三)
前端·css·html·css3·html5
brzhang15 分钟前
告别面条代码!用可视化编程 Flyde 给你的 Node.js/Web 应用逻辑解解耦
前端·后端·架构
brzhang33 分钟前
还在手撸线程?搞懂这 6 大多线程设计模式,并发编程不再难!
前端·后端·架构
拖孩1 小时前
【Nova UI】十四、打造组件库之按钮组件(下):按钮组组件的构建之旅
前端·javascript·vue.js
pixle01 小时前
Vue3 Echarts 3D圆形柱状图实现教程以及封装一个可复用的组件
前端·3d·vue·echarts
Rudon滨海渔村1 小时前
[随笔] 升级uniapp旧项目的vue、pinia、vite、dcloudio依赖包等
前端·vue.js·uni-app
机构师1 小时前
<uniapp><插件><UTS>在uniapp中,创建自己的插件并发布到uni插件市场
javascript·uni-app·vue·插件·hbuilderx·uni
Watermelo6171 小时前
Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush.
前端·javascript·vue.js·elementui·html·es6·bug
低代码布道师2 小时前
第一部分:网页的骨架 —— HTML
前端·html
PyAIGCMaster2 小时前
穷鬼计划:react+tailwindcss+vercel
前端·react.js·前端框架