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'
      })
    },
相关推荐
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常4 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C5 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904275 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js