Vue中使用wangeditor富文本编辑器，生成的图片数据支持v-html解析后点击图片跳转超链接

• 个人觉得wangeditor富文本编辑器非常好用，官方文档也写的很详细易懂，虽然wangeditor富文本编辑器支持图片添加超链接点击跳转，但那也仅限于你在wangeditor富文本编辑器编辑器里面支持，如果你用wangeditor富文本编辑器进行了各种编辑操纵并保存了值，别的地方需要用v-html去解析（例如移动端），此时你就会发现我的图片怎么点击没反应？，因为wangeditor富文本编辑器会把你添加的超链接定义为img标签的一个自定义属性并将其转义。此时你就得想办法给img标签外部套一个a标签进行跳转方便v-html去解析，以下就演示如何使用wangeditor富文本编辑器，并支持v-html解析返回数据。

1 . Vue中使用wangeditor富文本编辑器

1.1 下载wangeditor富文本编辑器NPM包

npm i wangeditor

1.2 引入并配置富文本编辑器（以下是以组件形式书写）

• this.editor.config.uploadImgServer配置服务器端地址，此处请自行填写(上传图片接口地址)
• 【注意】uploadImgShowBase64（base64 格式）和 uploadImgServer（上传图片到服务器）两者不能同时使用！！！
• 【注意】使用弹窗组件时，在关闭弹窗事件中切勿直接清掉富文本v-model绑定的值，这样写的话会导致点击编辑第一次查看富文本是正确的，取消再进来值就没了，刷新下界面，值又有了，自己可以在富文本子组件mounted区域打印value这个值。

// 子组件

• 子组件有提到updateText()与clearText()两个事件函数，需父组件在合适的时机自行触发，使用this.$refs.editorTxt.updateText()与this.$refs.editorTxt.clearText()即可在父组件事件中触发，具体原因是因为如果插入了图片关闭表单弹窗并不能重置掉字段（即使使用了element表单的清除），另外就是由于编辑时获取的数据是异步方式，会导致图片加载不出来，刷新下界面才能加载出来。

// 父组件


 

• 以上就可以直接使用wangeditor富文本编辑器啦

2 . wangeditor富文本编辑器生成的数据支持v-htm解析后点击图片跳转

• 此处虽然支持富文本内添加图片与跳转链接，但其实添加完他的数据标签格式是这样的：

description:"
"

• 会看到富文本把图片的跳转链接定义为了一个data-href的自定义属性，虽然富文本内还是支持点击跳转的，但想要v-html支持解析就必须得给img标签套一个a标签
• 虽然使用Vue不建议操纵DOM元素，但官方未提供合适的API所以，此处会进行大量的DOM操纵。
• 以下解决办法为操纵DOM元素实现，此方法适用于很多场景（具体如何合理使用，看自己发挥咯），建议了解其原理写法,以下暂时先写核心写法，最后会贴上完整代码。

...
// wangeditor富文本编辑器插入网络图片的回调事件
this.editor.config.linkImgCallback = function (src, alt, href) {
         // 由于获取的所有img标签会形成为 NodeList [img] 存储 此处使用Array.prototype.slice.call方法将其转换为数组
        dom = Array.prototype.slice.call( document.querySelector(".w-e-text").querySelectorAll("img"));
        // 判断dom元素是否存在，防止报错
        if (dom) {
          try {
            // 对dom数组进行循环
            dom.map((x, index) => {
              // dom[index]此时是一个数组，根据索引找到对应图片属性对象，里面有很多关于这img标签的属性，outerHTML为其中img标签
              if ((x = dom[index].outerHTML)) {
                // 此处直接改变对图片属性里的img标签进行改变
                // 由于wangeditor富文本编辑器会对跳转链接进行编码，此处用decodeURIComponent进行解码
                // dom[index].dataset.href 为编码后的跳转链接   
                dom[index].outerHTML = `${dom[index].outerHTML}`;
              }
            });
          } catch (e) {
            console.log(e);
            return e;
          }
        }
      };
...

• 这是修改后的插入网络图片标签(由于是获取所有的图片标签，所以会为所有是图片的进行操纵，不会影响其他标签属性)：

description:"
"

• 本来几行代码就能解决的问题，虽然使用Vue不建议操纵DOM元素，但根据实际场景去书写合适的代码我觉得才是正解。

3 . 完整子组件代码（父组件不变）

// 子组件

• 如果cv过去跑不动请留言哈，另外报某某数据未定义的话，麻烦看看自己是不是数据定义错了。有更好的想法或者建议也请留言哈，以前为个人见解写法
• 最后再提供下禁止输入纯空格的数据校验：

this.ruleForm.description==='

'||this.ruleForm.description.slice(3, this.ruleForm.description.length-4).replace(/ /gi, '').trim().length===0