使用uni-app进行开发时
1、首先观察富文本在未设置宽度限制时触发横向滚动条的原始表现,如下图所示。

2、在JavaScript中读取富文本内容,常规做法是通过变量直接赋值完成,如图所示。

3、获取到原始数据后,借助字符串的replace()方法对HTML结构进行针对性替换,操作细节见下图。

4、代码执行后,图片自动实现宽度适配,不再溢出容器,最终效果如下图所示。

5、此时富文本内的所有图片均已按规范注入响应式样式,实际渲染效果参见示例图。

6、特别提醒:replace为标准英文拼写,注意字母顺序与大小写,正确写法如下图所示。

7、第一步,需先确认富文本未约束宽度时引发滚动条的默认行为。
8、第二步,JavaScript中通常以直接赋值方式获取富文本字符串内容。
9、第三步,对获取的字符串调用replace()方法,完成关键标签或属性的替换处理。
10、第四步,运行项目后,图片将自适应父容器宽度,消除水平滚动。
11、第五步,在富文本HTML中为<img>标签统一添加适配样式,确保响应式展示。
12、第六步,请务必确保replace函数名拼写准确,避免因大小写或漏字导致语法错误。


















