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

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

  1. 第一步:下载JS插件(名为richText.js)richText.js(点击下载)
  2. 第二步:在详情页里配置
    info.vue是小编的详情页
    uni-app如何完美解析富文本内容_第1张图片
  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: {
    }
}
  1. 写完JS代码就开始写html的代码了,也很简单

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

  1. 所有代码



效果图:
uni-app如何完美解析富文本内容_第2张图片
千万要记得要引入js插件 richText.js(点击下载)

你可能感兴趣的:(uni-app)