uni-app 求渲染富文本的插件

在uni-app中渲染富文本内容，你可以使用rich-text组件，这是uni-app官方提供的一个组件，用于展示富文本内容。虽然rich-text组件本身功能相对基础，但已经可以满足大多数简单的富文本渲染需求。对于更复杂的富文本需求，你还可以结合第三方插件或者自己扩展功能。

以下是一个使用rich-text组件渲染富文本内容的简单示例：

<template>
  <view>
    <rich-text :nodes="htmlNodes"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 这里使用HTML字符串作为富文本内容
      htmlContent: '<div><h1>标题</h1><p>这是一段<strong>加粗</strong>的文字。</p><img src="https://example.com/image.jpg" style="width:100px;height:auto;"></div>',
      // 将HTML字符串转换为rich-text组件可以识别的nodes格式
      htmlNodes: []
    };
  },
  mounted() {
    this.parseHtmlToNodes();
  },
  methods: {
    parseHtmlToNodes() {
      // 这里简单地将HTML字符串转为nodes数组，实际应用中可能需要更复杂的解析
      // 注意：这里的解析非常基础，仅用于示例。对于复杂的HTML结构，建议使用专门的HTML解析库。
      const parser = new DOMParser();
      const doc = parser.parseFromString(this.htmlContent, 'text/html');
      const traverse = (node) => {
        let result = [];
        node = node.cloneNode(false); // 浅拷贝节点，避免循环引用
        switch (node.nodeName) {
          case '#document':
          case '#document-fragment':
            node.childNodes.forEach(child => result = result.concat(traverse(child)));
            break;
          case 'IMG':
            result.push({
              name: 'image',
              attrs: {
                src: node.getAttribute('src'),
                style: node.getAttribute('style')
              }
            });
            break;
          default:
            result.push({
              name: node.nodeName.toLowerCase(),
              attrs: {},
              children: node.childNodes.length ? node.childNodes.map(child => traverse(child)) : []
            });
        }
        return result.length === 1 ? result[0] : result;
      };
      this.htmlNodes = traverse(doc.body);
    }
  }
};
</script>

注意：上面的parseHtmlToNodes方法是一个非常简化的HTML到nodes的转换示例，它并不能处理所有HTML标签和属性。在实际项目中，你可能需要使用更健壮的HTML解析库，或者考虑使用专门的富文本渲染插件，如uParse等。这些插件通常提供了更丰富的功能和更好的兼容性。