微擎富文本编辑器内容导致小程序界面显示溢出问题

一、背景

微擎后台经常使用到富文本编辑器,操作使用体验非常好,开发也非常简单,只需简单一句函数调用即可实现富文本编辑器

{php echo tpl_ueditor('content', $content)}

在页面上渲染编辑后是这样的效果

Snipaste_2020-12-26_08-58-45

二、问题

在小程序端显示以上内容会出现内容溢出问题,导致无法正常浏览显示,来看下问题截图

Snipaste_2020-12-26_09-03-43

三、解决方案

经过一番搜索找到不少解决方案,基本都是围绕处理 html 内容替换,还有一种是将html字符串转成rich-text组件可以解析的json格式的方案,这个因为需要引入 rich-text-parser 单独的库处理,相对比较复杂未进行测试,以下是基于 html 内容格式化替换的方案。

先上代码,以下为封装的 superman.js 文件内容,如需使用请自行复制修改:

superman.formatRichText = function (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(/width="[^"]+"/gi, function (match, capture) {
        match = match.replace(/width="[^"]+"/gi, 'width="100%"');
        return match;
    });
    //newContent = newContent.replace(/<br[^>]*\/>/gi, '');
    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
    return newContent;
};
module.exports = superman;

以上函数基于网上搜索的版本进行了部分内容修改,修改如下:

1、注释掉了换行符的替换,如有需要可打开,不过一般都需要换行显示,否则太影响原文样式。

2、增加了一种 width=”800″ 格式的处理,已测试可以正常处理。

修复后显示效果如下

Snipaste_2020-12-26_09-20-20

四、总结

如有其它的需求和使用场景可自行修改,本方法比较简单实用,一般场景下的页面内容处理均可应付,如有大量的页面和更复杂的数据处理,可采用转换 json 格式方案。

本次分享结束,欢迎留言参与讨论!

本文是微擎百科入驻作者原创文章,如若转载请联系作者授权,发私信联系作者

发表评论

登录后才能评论