一、页面展示
<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); } } },