小程序解析富文本问题

问题：小程序富文本标签 rich-text 解析table没有border

• 解决方法：使用外部插件mp-html
• 地址：github.com/jin-yufeng/…

安装方式选择：

将源码中对应平台的代码包（dist/mp-weixin）拷贝到components目录下，更名为mp-html目录

在需要的页面引入即可

<template>
  <view>
    <mp-html content="{{html}}" />
  </view>
</template>

{
    usingComponents: {
        mp-html: '~@/components/mp-html/index'
    }
}

<script>
import wepy from '@wepy/core'
wepy.page({
    data: {
        html: '<div>Hello World!</div>'
    }
  })
</script>
复制代码

正常解析富文本发现table的内容有了但是border不见了

1. 正则表达式替换html，给table添加border

this.html = html.replace(/<table/g, '<table border="1" cellspacing="0" style="border-collapse:collapse"')

2. 通过属性给表格设置默认的边框样式

<mp-html :tag-style="tagStyle" />

import wepy from '@wepy/core'
wepy.page({
    data: {
        tagStyle: {
          table: 'border-top: 1px solid gray; border-left: 1px solid gray;',
          th: 'border-right: 1px solid gray; border-bottom: 1px solid gray;',
          td: 'border-right: 1px solid gray; border-bottom: 1px solid gray;'
        }
    }
})

复制代码