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'
      })
    },
相关推荐
庸俗今天不摸鱼13 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX1873014 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下20 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox31 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞33 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行34 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581035 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周38 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯