Ueditor去掉图片之间的间隙

没有检索到摘要

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题

运营在后台配置商品信息的时候,复制京东上面的图片到ueditor富文本编辑器里面,两张图片中总是存在空白间隙,但查看html源码又很简单没有发现什么问题p标签之类的。而且硬着配置上去后,在uniapp打包的微信小程序里面查看商品详情一样有空白间隙存在,影响比较大。

 

<jyf-parser :html="html"  lazy-load ref="article" selectable show-with-animation use-anchor @error="error" @imgtap="imgtap" @linkpress="linkpress"></jyf-parser>

解决

网上找了相关之类,最终确定是编辑器本身默认设置上的一些问题,解决过程有两步:
1、后台编辑器界面空白问题,可以在编辑器配置文件ueditor.all.js和ueditor.all.min.js(或者根据自己项目引用哪个就改哪个)文件里面,查找【p{margin:5px 0;}】这段代码,在前面添加【img{vertical-align:top;outline-width:0px;}】(下图代码例子中的第10行),给图片设置对齐样式,这样后台编辑器上的空白就解决啦。

var html = ( ie && browser.version < 9  ? '' : '<!DOCTYPE html>') +
                    '<html xmlns=\'http://www.w3.org/1999/xhtml\' class=\'view\' ><head>' +
                    '<style type=\'text/css\'>' +
                    //设置四周的留边
                    '.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' +
                    //设置默认字体和字号
                    //font-family不能呢随便改,在safari下fillchar会有解析问题
                    'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
                    //设置段落间距
                    'img{vertical-align:top;outline-width:0px;}p{margin:5px 0;}</style>' +
                    ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +
                    (options.initialStyle ? '<style>' + options.initialStyle + '</style>' : '') +
                    '</head><body class=\'view\' ></body>' +
                    '<script type=\'text/javascript\' ' + (ie ? 'defer=\'defer\'' : '' ) +' id=\'_initialScript\'>' +
                    'setTimeout(function(){editor = window.parent.UE.instants[\'ueditorInstant' + me.uid + '\'];editor._setup(document);},0);' +
                    'var _tmpScript = document.getElementById(\'_initialScript\');_tmpScript.parentNode.removeChild(_tmpScript);</script></html>';
                container.appendChild(domUtils.createElement(document, 'iframe', {
                    id: 'ueditor_' + me.uid,
                    width: "100%",
                    height: "100%",
                    frameborder: "0",
                    //先注释掉了,加的原因忘记了,但开启会直接导致全屏模式下内容多时不会出现滚动条
//                    scrolling :'no',
                    src: 'javascript:void(function(){document.open();' + (options.customDomain && document.domain != location.hostname ?  'document.domain="' + document.domain + '";' : '') +
                        'document.write("' + html + '");document.close();}())'
                }));

2、小程序页面上面的对齐,尝试过在页面上加上后台一样的图片样式,但是没效果,后面参考网上的,就在文本内容返回的时候把【<img】替换成【<img style="display:block;】,问题解决~

$dataInfo['detail_html'] = str_replace('<img', '<img style="display:block;"', $dataInfo['detail_html']);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值