wangEditor v5图片粘贴到输入框后 如何实现自己的逻辑 取消原有的样式?

wangEditor v5图片粘贴到输入框后 如何实现自己的逻辑 取消原有的样式?

img


const editor = new wangEditor('#editor')

editor.config.pasteFilterStyle = false // 取消粘贴时的样式
editor.config.pasteIgnoreImg = true // 忽略粘贴的图片

editor.config.customAlert = function (info) { // 自定义提示信息的方式
  console.log(info)
}

editor.config.pasteTextHandle = function (content) { // 粘贴事件
  const wrapper = document.createElement('div')
  wrapper.innerHTML = content

  const imgs = wrapper.querySelectorAll('img')
  for (let i = 0; i < imgs.length; i++) {
    const img = imgs[i]
    img.removeAttribute('style') // 取消样式
    img.removeAttribute('width') // 取消宽度
    img.removeAttribute('height') // 取消高度
  }

  const textContent = wrapper.textContent
  editor.cmd.do('insertHTML', textContent) // 插入文本
}

editor.create()
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7577797
  • 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:wangEditor-v5使用
  • 除此之外, 这篇博客: wangeditor富文本编辑器使用过程中遇到的问题以及解决办法中的 2. wangeditor v5 自定定义图片上传: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • MENU_CONF: {
              uploadImage: {
                async customUpload (file, insertFn) {
                  // this.loading = true;
                  // const quill = this.$refs.myQuillEditor.quill;
                  // // 上传图片
                  const fd = new FormData()
                  fd.append('resource', file)
                  try {
                    const { data, code } = await uploadRichTextImage(fd)
                    // 如果上传成功
                    if (code === 200) {
                      // file 即选中的文件
                      // 自己实现上传,并得到图片 url alt href
                      // 最后插入图片
                      console.log(data)
                      insertFn(data, 'poppy-size-chart', data)
                      // this.loading = false
                    }
                  } catch (err) {
                    Message.error('Insert image error')
                  } finally {
                    // this.loading = false
                  }
                }
              }
            }