uni怎么使用原生html标签,uni-app如何完美解析富文本内容

2024-05-02 05:44:11

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

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的代码了，也很简单

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

6.所有代码

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

}

}

效果图：

uni怎么使用原生html标签,uni-app如何完美解析富文本内容相关推荐

java 接收前台富文本_java 解析富文本处理 img 标签
很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 1)怎样将富文本的图片的 src 获取出来? 2)后台上传的时候用的是相对路 ...
微信小程序解析渲染Web App中的富文本内容
前提:微信小程序里面没有DOM对象,不能直接操作DOM. 问题:在日常的web前端开发中,必然会接触到富文本编辑器,如何在小程序里展示渲染富文本编辑器中的HTML元素呢? 测试内容:wangEdito ...
微信小程序支付html标签,微信小程序/支付宝小程序 WxParse解析富文本（html）代码...
image.png 二.复制到小程序utils目录下 image.png 三.在要使用的目标文件中具体路径根据目标文件定,当前目标文件在pages - news - detail 3.1.在目标文件 ...
es html标签,Elasticsearch如何使用同义词搜索富文本html标签过滤以及分权限过滤搜索结果...
如何建立恰当的索引结点 { "mappings": { "data": { "properties": { "answer_id& ...
用正则表达式提取富文本内容(去除html，p，a等标签)
废话不多说,上代码: String str="<p><strong>测试</strong></p><p><a>是否& ...
如何扩展Android富文本之Html标签
前言大家都知道Android 富文本其实就是HTML标签那些东西,但Android本身对其支持有限,今天就说说如何对其进行扩展富文本在Android设置富文本一般如下 String txt = ...
Selenium提取数据之标签对象提取文本内容和属性值
Selenium提取数据之标签对象提取文本内容和属性值 find_element仅仅能够获取元素,不能够直接获取其中的数据,如果需要获取数据需要使用以下方法对元素执行点击操作element.clic ...
在循环列表的富文本里摘出每个item的img标签内容（适合vue渲染）
昨天在做公司项目的社区动态内容.后台接口返回的数据是数组套对象,对象里有富文本,然后需要摘出富文本里的img标签在列表里分开渲染(即图片九宫格样式). 最终效果如图: 这个是后端接口返回的json数据 ...
UNI APP---Android端原生插件开发实战(二)
1.前言最近一个项目要求我们的产品必须走网络隧道,并且提供了对应的SDK,很明显只能通过原生开发的方式才能实现这个流程,之前已经写过一篇通过代理的方式进行数据请求,而这次Android端的方式是采用 ...

最新文章

热门文章