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

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

1.第一步:下载JS插件(名为richText.js)richText.js(点击下载)

2.第二步:在详情页里配置

info.vue是小编的详情页

3.在代码出添加插件的路径

var graceRichText = require(“…/…/components/richText.js”);

4.在info的js里引入插件后,就写js代码了

var graceRichText = require("../../components/richText.js");
export default {
    components: {
        uParse
    },
    data() {
        return {
            demoHtml : ''
        }
    },
    onLoad() {
        uni.request({
            url: '接口',
            success:(res) =>{
                 console.log(res);
                this.demoHtml = graceRichText.format(添加json数据里的富文本路径);
            }
        });
    },
    methods: {
    }
}

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

<template>
    <view>
        <view class="grace-rich-text">
            <rich-text type="text" :nodes="demoHtml"></rich-text>
        </view>
    </view>
</template>

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

6.所有代码

<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>

效果图:

千万要记得要引入js插件 richText.js(点击下载)

本站资源除特别声明外,转载文章请声明文章出处
东泰博客 » uni-app如何完美解析富文本内容

发表评论

切图仔日常笔记博客