wangEditor富文本编辑器，图片添加链接功能

问题描述

编辑器给图片添加链接，是给图片添加data-href属性。在实际应用中富文本的内容，在前台展示时为了动态展示文本样式，所以是通过v-html渲染的，就会导致渲染后的图片无法点击，需要用a标签包裹img标签。

实现思路 

1.在表单接收富文本内容的回调事件中，通过正则匹配img标签，并用a标签包裹。

//获取从富文本编辑器传过来的内容
    const changeContent = (val) => {
      if (val) {
        // 匹配所有img标签，用a标签包裹
        val.replace(/<img [^>]*data-href=['"]([^'"]+)[^>]*>/g, (match, capture)=> {
          val = val.replace(match, `<a href="${capture}">${match}</a>`)
        })
        
        // 复值给表单，并移除表单校验
        data.Form.text= val;
        ruleFormRef.value.clearValidate("text"); //移除校验结果
        
      }
    };

2.因编辑器无法解析a标签，编辑时会导致图片无法回显，所以在编辑时需要通过正则匹配并删除a标签。

//编辑下富文本 图片处理 去除a标签
  const removeA =(str) =>{
      if(str){
        // 富文本内容都会加码，所以需要解码
        let str = decodeURIComponent(str)
        str = str.replace(/<a.*?>/g,'')
        str = str.replace(/<\/a>/g,'')
        data.Form.text= str
      }
    }

---