uni-app中使用rich-text如何添加样式控制富文本里面的内容

第一种控制宽度的方式（这里的res.data.data.maincontent是咱们要放进rich-text里面nodes的变量)：

this.article.maincontent=res.data.data.maincontent.replace(/\<img/gi,'<img style="max-width:100%;height:auto;display:block;"');

添加后的效果：

接着补充一点：如果遇到的富文本图片里面已经有style属性了，上面的代码是往img标签里面又添加了style属性，但是因为靠前，样式依旧无法被添加的所控制，所以正则表达式这块要做修改。

第二种控制宽度的方式（直接通过正则表达式把原有的style给修改了）：

this.maincontent=res.data.info.maincontent.replace(/style="[^"]+"/gi,'style="max-width:100% !important;height:auto;display:block;"');

总结：

初次时候添加了max-width：100%，但图片并没有变化，然后又加了后几项属性，可能是这样渲染较慢的原因，实测这样写是有效的，大家可以多刷新几遍。

uni-app中使用rich-text如何添加样式控制富文本里面的内容相关推荐

InfoPath中的Rich Text Box中如何加“回车”
InfoPath中的Rich Text Box中实现换行的方法: InfoPath中的Rich Text Box的内容使用的是XHtml的格式,所以"\n"格式内容是不会表现出来的 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni怎么使用原生html标签,uni-app如何完美解析富文本内容
在uni-app中有 rich-text 标签是自带解析富文本内容的,但是不是很完美,怎么说呢?比如富文本的代码块.图片宽度等都是无法控制的,那么现在就利用插件来解析,这个解析插件小编是利用图片.ht ...
UILabel添加图片之富文本的简单应用
若想对UILabel添加图片,那么就需要使用NSMutableAttributedString来定义先定义一个普通的label UILabel *lab = [[UILabel alloc]init ...
UNI-APP，实现给字符串中部分字符、子串添加样式(颜色，字号等)
实现效果如图: 主要代码: <template v-slot:content><view class="cnt-pr" v-if="item.symbo ...
html中怎么让text不换行,css如何让文本不换行？
在html中,连续的数字和字母,以及字母和数字的组合是不会自动换行的:而汉语文字或者其他国家的文字,是文字就会有换行.那么如何让文本不换行?下面本篇文章就来给大家介绍一下,希望对你们有所帮助. 在cs ...
控制富文本中图片宽高_tinyMCE富文本编辑器如何设置默认的图片宽度
大佬们我想在用户上传图片后给编辑器里的图片设置一个默认宽度这该在哪里进行设置啊以下是我现在的tinyMCE初始化设置 tinymce.init({ selector: '#' + this.el ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...

uni-app中使用rich-text如何添加样式控制富文本里面的内容

uni-app中使用rich-text如何添加样式控制富文本里面的内容相关推荐

最新文章

热门文章