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

在uni-app中有 rich-text 标签是自带解析富文本内容的，但是不是很完美，怎么说呢？比如富文本的代码块、图片宽度等都是无法控制的，那么现在就利用插件来解析，这个解析插件小编是利用图片、html语句以及代码块。第一步：下载JS插件(名为richText.js)richText.js(点击下载)第二步：在详情页里配置info.vue是小编的详情页在代码出添加插件的路径var ...

东泰丶

25122人浏览 · 2019-12-17 23:35:04

东泰丶 · 2019-12-17 23:35:04 发布

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

第一步：下载JS插件(名为richText.js)richText.js(点击下载)
第二步：在详情页里配置
info.vue是小编的详情页
在代码出添加插件的路径
var graceRichText = require("…/…/components/richText.js");
在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: {
    }
}

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

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

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

所有代码

<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(点击下载)