uniapp解决富文本图片过大溢出问题

简介: uniapp解决富文本图片过大溢出问题

一、页面展示


<view class="textClass">
  <rich-text :nodes="ctx_content"></rich-text>
</view>


二、进行内容封装处理


export const formatRichText = (html) => {
  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;
  });
  newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
    return match;
  });
  newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  newContent = newContent.replace(/\<img/gi,
    '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
  return newContent;
}


三、引入 import { formatRichText } from "***";


四、使用


data() {
  return {
            ctx_content:''
  };
},
watch:{
  conetent(val,old) {
            if(val){
    this.ctx_content = formatRichText(val);
            }
  }
},


相关文章
|
6月前
|
存储 开发框架 JavaScript
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
479 0
|
6月前
|
移动开发
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
153 0
|
6月前
|
小程序 搜索推荐
uniapp中如何使用image图片
uniapp中如何使用image图片
1456 0
uniapp显示富文本
uniapp显示富文本
109 0
|
1月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
62 0
|
1月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
55 0
|
3月前
|
小程序 前端开发
|
4月前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
151 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
46 0
|
6月前
uniapp下载图片到本地
uniapp下载图片到本地
91 0