富文本在h5和小程序中的显示

后台传来的数据有

content: "<p><img src="http://file.rzkeji.com/web/zhaowoa/upload/2018/11/29/95fb21bb1eab0266665b1c56969c74ea.png" title="1543822480394864.png" alt="招聘banner00.png"/><span style="font-size: 24px;"><strong>欢迎在线面对面交流，把握机会。</strong></span></p>"

这是后台编辑的内容。
在vue中很简单

; 注意v-html就算是动态写入的，也不是写成 :v-html='****'的在小程序中没有html这个概念在mpvue中明确写道： **小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。**

小程序提供了一个组件

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

mpvue改成
 <rich-text :nodes="nodes" @tap="tap" ></rich-text>
 即可。

虽然小程序官方也提供了为rich-text内的富文本更改样式的方法

// rich-text.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

就是在rich-text.js为相应标签名添加相应样式。虽然解决了样式可控的问题。但对于图片的处理就麻烦了。并且这样设样式，相对于直接写css样式，这样写样式麻烦太多了。

用第三方插件
mpvue-wxparse：适用于 Mpvue 的微信小程序富文本解析自定义组件，支持 HTML 及 markdown 解析。

安装npm i mpvue-wxparse --save

官方文档 https://github.com/F-loat/mpvue-wxParse

示例

<template>
  <div>
    <wxParse :content="article" @preview="preview" @navigate="navigate" />
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

<style>
@import url("~mpvue-wxparse/src/wxParse.css");
//这里我是直接 @import '~mpvue-wxparse/src/wxParse.css'
</style>

此处wxParse是类似组件的方式引入，记住在components中注册才行。
利用插件的好处是能直接在style标签中改变相应的样式。

富文本在h5和小程序中的显示

猜你喜欢