uni-app如何完美解析富文本内容

曾经终败给现在 2023-06-23 07:00 23阅读 0赞

原文链接：http://dt2008.cn/?p=118  
在uni-app中有 rich-text 标签是自带解析富文本内容的，但是不是很完美，怎么说呢？比如富文本的代码块、图片宽度等都是无法控制的，那么现在就利用插件来解析，这个解析插件小编是利用图片、html语句以及代码块。

1.  第一步：下载JS插件[(名为richText.js)richText.js(点击下载)][richText.js_richText.js]
2.  第二步：在详情页里配置  
    info.vue是小编的详情页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70]
3.  在代码出添加插件的路径  
    var graceRichText = require("…/…/components/richText.js");
4.  在info的js里引入插件后，就写js代码了

1.  写完JS代码就开始写html的代码了，也很简单

html代码也写完了，赶紧运行看看吧。也可以在richText.js文件里修改css属性，小编在这里就不演示了，有兴趣的大神可以修改试试

1.  所有代码

<template>
        <view>
            <view class="grace-rich-text">
                <rich-text type="text" :nodes="demoHtml"></rich-text>
            </view>
        </view>
    </template>
    <script>
    var graceRichText = require("../../components/richText.js");
    export default {
        components: {
            uParse
        },
        data() {
            return {
                demoHtml : ''
            }
        },
        onLoad() {
            uni.request({
                url: '接口',
                success:(res) =>{
                    this.demoHtml = graceRichText.format(添加json数据里的富文本路径);
                }
            });
        },
        methods: {
        }
    }
    </script>
    <style>
    </style>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70 1]  
千万要记得要引入js插件 [richText.js(点击下载)][richText.js_richText.js]

[richText.js_richText.js]: http://dt2008.cn/?p=118
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191217232946470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191217233416166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4,size_16,color_FFFFFF,t_70