uniapp 小程序渲染富文本

### 如何在 UniApp 小程序中渲染富文本 #### 1. 使用 `rich-text` 组件 微信小程序提供了内置的 `rich-text` 组件来展示 HTML 格式的富文本内容。此方法简单易用，适合大多数场景下的富文本渲染需求。 ```html <rich-text :nodes="htmlContent"></rich-text> ``` 在对应的 JavaScript 文件中设置数据： ```javascript export default { data() { return { htmlContent: '<div><p>这是一个段落。</p><ul><li>列表项一</li><li>列表项二</li></ul></div>' // 需要转义特殊字符 }; }, onLoad() { this.setData({ htmlContent: this.htmlContent.replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') }); } }; ``` 注意：由于安全原因，`rich-text` 的输入必须是经过严格过滤的安全字符串[^4]。 --- #### 2. 基于 uni-app 自带 editor 实现更复杂的富文本编辑与预览 如果需要支持动态编辑并实时预览，则可以考虑使用 uni-app 提供的 `editor` 组件。该组件允许用户创建和修改富文本内容，并提供多种自定义选项。 ##### 页面配置 启用 `editor` 并绑定事件监听器以便获取当前的内容状态。 ```html <view class="container"> <editor id="editor" class="ql-container" show-toolbar @statuschange="onStatusChange" /> </view> ``` ##### 脚本部分 初始化 `editor` 和更新其内容的方法如下所示： ```javascript import { createEditorContext } from 'uni-editor'; export default { onReady() { const context = createEditorContext('editor'); context.setContents({ html: `<h1>Hello World!</h1><p>This is a paragraph.</p>` // 初始内容 }).then(() => console.log('Set content successfully')); }, methods: { onStatusChange(e) { console.log('Current status:', e.detail); } } }; ``` 更多关于 `editor` 的高级功能可以通过查阅官方文档进一步学习[^2]。 --- #### 3. 外部插件集成——推荐 html2wxml 工具 对于复杂的需求（比如嵌套标签或者特定样式的兼容性），可以选择第三方工具如 **html2wxml** 来完成从标准 HTML 向 WXML 的转换工作。这种方式能够显著提升跨平台的一致性和灵活性。 安装依赖： ```bash npm install --save html2wxml ``` 调用示例代码片段： ```javascript const HtmlToWxml = require("html2wxml"); let converterInstance = new HtmlToWxml(); converterInstance.convert('<b>Bold Text Example</b>', (err, result) => { if (!err && result.wxml.length > 0) { console.info(result.wxml); // 输出转化后的 WXML 结果 } }); ``` 最终将生成的结果注入到模板视图即可[^3]。 --- #### 总结 以上介绍了三种主流方案分别适用于不同层次的技术要求。如果是轻量级应用建议优先尝试原生 `rich-text`；而对于交互性强的应用则应探索增强型控件 `editor` 或者引入成熟的外部解决方案像 html2wxml 这样的库文件。