el-tiptap富文本框拖拽和复制的图片会跳过上传服务器解决方案

最近在业务上遇到个问题,因为富文本框存在一个漏洞,正常使用菜单栏上面的上传图片,会先传到服务器上,再将服务器返回的地址传给后端接口,但是通过拖拽或者复制的图片,依旧是base64格式,查看官方文档也没找到对应的解决方法,所以我使用以下方法,先上代码,再讲思路:
1、首先在组件中添加@onUpdate事件,只要用户输入内容就会触发

<el-tiptap v-model="content" :extensions="extensions" placeholder="商品详细介绍,限2000字" lang="zh" height="574" @onBlur="onEditorBlur" @onUpdate="onEditorUpdate" />

2、在data中添加一个字段,用于保存复制图片前的内容

data () {
   return {
      // 编辑器的内容
      content: '',
      // 保存之前的内容
      beforeContent: ''
   }
} 

3、以下就是监听的onEditorUpdate方法,每次触发的时候进行监听排查

  methods: {
    onEditorUpdate(){
      console.log('现在',this.content)
      console.log('之前',this.beforeContent)
      let reg = new RegExp("src=\"data:image/")
      if(reg.test(this.content)){
        this.$nextTick(()=>{
          this.content = this.beforeContent
          this.$message({
            type: 'warning',
            message: '不支持复制上传图片,请通过上方菜单形式上传图片'
          })
        })
      }else{
        this.beforeContent = this.content
      }
    }
  }

4、其实主要思路就是,如果用户通过复制或者拖拽的图片,用正则匹配,找到base64内容,则将用户之前填写的内容覆盖用户新填写的内容,并且提示用户“不支持复制上传图片,请通过上方菜单形式上传图片”

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 是一个基于 Vue.js 的开源 UI 组件库,提供了丰的预构建组件以简化前端开发。在 Element UI 中,可以使用 `el-input` 组件结合第三方库(如 Quill 或者 tinyMCE)来实现文本编辑器,并扩展其批注功能。 1. **基本实现**: 首先,引入 Element UI 的 `el-input` 组件,并利用 `Vue-Quill-Editor` 或者 `vue-tinymce` 这样的文本编辑器插件。安装并配置好所需的库: ```bash npm install vue-quill-editor --save ``` 在 HTML 中添加一个编辑区域,并绑定到一个 Vue 实例的数据属性: ```html <el-input v-model="editorValue" type="textarea" placeholder="输入内容"></el-input> ``` 在 Vue 中实例化编辑器: ```js import { createQuillEditor } from 'vue-quill-editor'; export default { components: { 'quill-editor': createQuillEditor() }, data() { return { editorValue: '', }; }, }; ``` 2. **批注功能**: 要添加批注功能,可以在文本编辑器中集成一个弹出层或浮动工具栏,用户可以在其中输入评论并将其附加到特定位置的文本上。这可能涉及到监听文本选择事件(`@select`),然后显示插入批注的选项。 ```js methods: { insertAnnotation(e) { const { start, end } = e.range; // 在此处创建一个弹出层,获取用户输入的批注内容 const annotation = prompt('请输入批注内容'); // 将批注插入到文本的相应位置 this.editorValue.insertText(start, `<!-- ${annotation} -->`); }, }, ``` 3. **相关问题--:** - 如何在 Element UI 中集成第三方文本编辑器? - 如何在 Vue 中处理文本编辑器的文本选择事件? - 如何确保批注与被选中的文本内容关联?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值