Ueditor去掉图片之间的间隙

最新推荐文章于 2024-06-11 14:53:12 发布

yjr_aaron

最新推荐文章于 2024-06-11 14:53:12 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 php 文章标签：微信小程序编辑器贴图

本文链接：https://blog.youkuaiyun.com/yjr_aaron/article/details/124273216

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

php

2 篇文章

订阅专栏

没有检索到摘要

摘要生成于 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']);