首页 > 其他分享 >uniapp 中的 rich-text 富文本 怎样编辑修改 样式

uniapp 中的 rich-text 富文本 怎样编辑修改 样式

时间:2023-05-09 16:35:45浏览次数:51  
标签:uniapp style text replace width match rich newContent gi

1.首先在 HTML 中 

<rich-text :nodes="formatRichText(newObjc)"></rich-text>

2.在 methods 中 写入方法

            formatRichText(html) {
          // html 就是你要传进来地富文本参数 // 去掉img标签里的style、width、height属性 let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) { match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); return match; }); // 修改所有style里的width属性为max-width:100% newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) { match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;'); return match; }); // 去掉<br/>标签 newContent = newContent.replace(/<br[^>]*\/>/gi, ''); // img标签添加style属性:max-width:100%;height:auto newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
          // 返回 处理后地结果 return newContent; },

 

标签:uniapp,style,text,replace,width,match,rich,newContent,gi
From: https://www.cnblogs.com/yangjunp/p/17385474.html

相关文章

  • 设置键盘只能输入数字( phoneNumTextField.keyboardType = UIKeyboardTypeNumberPad;)
    //手机号码textFieldphoneNumTextField=[[UITextFieldalloc]initWithFrame:CGRectMake(0,0,[[UIScreenmainScreen]bounds].size.width,40)];UIView*phoneImage=[[UIViewalloc]initWithFrame:CGRectMake(0,0,40,40)];phoneImage.backgroundColor=[U......
  • spring框架_Applicationcontext功能
    Applicationcontext的功能拓展主要来自于不属于beanfactory的接口,主要包括四个接口Messagesource:国际化ResourcePatternResolver:获取资源ApplicationEventPublisher:发布事件EnvironmentCapable:获取环境变量感觉发布事件这个功能有点像消息队列,发布订阅,在compent......
  • uniapp调用手机自带短信功能发送短信,打电话,获取本地通讯录
    1、配置(修改了manifest配置信息,要重新打包自定义基座,并卸载手机上的安装包重新运行) 2、//发短信sendMsg(phoneNumber){//#ifdefAPP-PLUSplus.messaging.TYPE_SMS;varmsg=plus.messaging.createMessage(plus.messaging.TYPE_SMS);msg.to=[phoneN......
  • Android TextView 设置超链接、关键字高亮等效果
    之前做TextView关键字高亮效果,使用的是Html.fromHtml(Stringsource)方法,然后通过TextView的setText(CharSequencetext)方法来显示后来测试此方法在部分手机上显示有问题,如Nexus4,华为P6等等。于是乎只能继续寻找别的解决办法了,在这里Mark一下。这里用到了SpannableString类......
  • C# 窗体控件ContextMenuStrip下拉项之间的分割线
    1.效果如图: 2.选中ContextMenuStrip控件,在Items属性中添加Separator 3. (其中第3,4步,通过上下箭头,摆置好你要分割的位置)原文链接......
  • 自学c#基础第七课,c#程序打包分发、textBox
    程序打包发布两种方式:1.解决方案右键生成解决方案,生成完成后打开所在路径找到debug文件夹下,压缩下debug所有文件,复制到别的电脑上即可使用。2.新建项目setup类型的,然后一步步设置,然后生成,生成后的文件是一个安装文件,自己复制到别的电脑上运行下,安装自己要的指定目录即可。textB......
  • uniapp读取本地通讯录
    官方文档:https://uniapp.dcloud.net.cn/api/system/contact.html#addphonecontactcreated(){//#ifdefAPP-PLUSthis.getLocalContact()//#endif},methods:{getLocalContact(){lettype=plus.contacts.ADDRESSBOOK_PHONEplu......
  • TEXT_CONVERT_XLS_TO_SAP-上传EXCEL文件
    *&---------------------------------------------------------------------**&ReportZ018*&*&---------------------------------------------------------------------**&*&上传Excel文件*&--------------------------------------------......
  • uniapp app端内嵌webview对接支付宝支付
    //app支付constappRequestPayment=(orderInfo:string)=>{uni.navigateTo({url:'跳转的路径?one='+encodeURIComponent(JSON.stringify(orderInfo))})}ViewCode<viewclass="page"><web-view:src="state.navU......
  • css 文字内容过长和下一个信息项重叠解决办法(uniapp)
    1.把固定高度注释掉,自动调整高度.cardBox{ padding:20rpx30rpx; .item{ //width:calc(100%-40rpx); //height:398rpx; padding:10rpx20rpx0rpx; margin-bottom:25rpx; border-radius:8rpx; box-shadow:0rpx4rpx16rpx2rpx#BDC0C6; background:......