wangeditor编辑图片添加链接实现跳转

给图片添加链接


此时给图片添加好了链接, 在浏览器渲染入下图

链接是给元素加了一个data-href属性
代码实现方式
在vue中:

<template>
	<div>
	 	<span id="richTextContent" @click="handleClick" v-html="actDetail.data.actContentCn"></span>
	</div>
</template>


// js
  const handleClick = (event) => {
    if (event.target.tagName === 'IMG' && event.target.hasAttribute('data-href')) {
    const dataHref = event.target.getAttribute('data-href');
     window.location.href = dataHref;
    }
  }

在uniapp中:

<template>
  	 <view class="text">
       	<rich-text @itemclick="handleClick" :nodes="info.actContentCn"></rich-text>
     </view>
</template>

// js
    handleClick(e) {
      let node = e.target.node;
      let href = node.attrs['data-href']
      if (node.name === 'img' && node.attrs.hasOwnProperty('data-href')) {
      	// 此跳转只适用于h5
        window.location.href = href
      }
    },

填坑记录, 希望对你有帮助