Ueditor去掉图片之间的间隙

2023-11-02

问题

运营在后台配置商品信息的时候,复制京东上面的图片到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']);

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ueditor去掉图片之间的间隙 的相关文章

  • 如何使用 PHP 从我的网站发布图像?

    我正在尝试使用 php 发布图像 我已阅读文档并遵循了一些教程 我发送消息时没有任何问题 但是 它不适用于图像 我找不到我的错误在哪里 有人可以帮忙吗 我将深深感激
  • document.querySelectorAll("input[type=checkbox") 的结果数组的顺序是否有保证?

    我在页面正文中有以下 HTML 这些是此 HTML 页面上类型复选框的唯一输入 fieldset legend North Face legend N A1 fieldset
  • 在 PHP 中强制以标准数学符号输出[重复]

    这个问题在这里已经有答案了 当我执行以下操作时echo 456 100000000我以科学记数法得到输出 4 56E 6 是否可以强制以标准符号输出 即0 00000456 看看这个函数 http php net manual en fun
  • MVC:如何使用ajax?

    我将使用 Zend Framework MVC 实现启动一个项目 我如何使用ajax 我的意思是 我应该将所有 ajax 代码放入控制器中吗 还是进入视野 例如 我想将作者 ivan 的帖子显示在页面上 通常 我创建一个指向 posts a
  • PHP、htaccess:在 URL 中应用页面标题

    我想在 URL 中应用页面 HTML 标题 例如 在这里 stackoverflow url 是这样的 http stackoverflow com questions 10000000 get the title of a page ur
  • PHP PDO相关:更新SQL语句未更新数据库内容

    我正在尝试使用准备好的语句来实现更新语句PHP http en wikipedia org wiki PHP脚本 但它似乎没有更新数据库中的记录 我不确定为什么 所以如果您能分享一些见解 我将不胜感激 Code query UPDATE D
  • 枚举 PHP DOMDocument 对象的已注册命名空间

    对于我的一个项目 我正在使用DOMDocument类来加载和操作 XML 文档 我需要检索文档中使用的每个名称空间 但是 我找不到如何做到这一点 这DOMDocument类具有获取 URI 的命名空间前缀或命名空间前缀的 URI 的方法 但
  • 构建错误:致命错误:pcre.h:没有这样的文件或目录

    我刚刚安装完 Ubuntu 13 10 我想尝试 Phalcon 当我构建源代码 phalcon so 时 出现以下错误 from home fabrice Downloads cphalcon build 32bits phalcon c
  • PHPUnit RabbitMQ:为创建连接函数编写测试

    我面临以下问题 我编写了一个函数 根据所需参数创建连接对象 AMQPConnection 现在我想编写相应的单元测试 我只是不知道在没有运行 RabbitMQ 代理的情况下如何做到这一点 这是有问题的函数 public function g
  • PHP 选择后立即删除

    我有一个 PHP 服务器脚本 它从 MySQL 数据库中选择一些数据 一旦我将 mysql query 和 mysql fetch assoc 的结果存储在我自己的局部变量中 我就想删除我刚刚选择的行 这种方法的问题在于 PHP 似乎对我的
  • 安装 Symfony 2.4.1 lib-icu 4.4 依赖项时出现问题

    我遇到了与以下相同的问题this one https stackoverflow com questions 16753105 problems with lib icu dependency when installing symfony
  • 使用键模式从 Laravel 4 缓存中删除?

    对于我的包 我们使用 Laravel 缓存 我们创建的每个缓存键都有前缀 所以我们得到mypackage config mypackage md5ofafilename有时我需要刷新我的包创建的所有缓存文件 问题是什么 我只知道缓存键的模式
  • 为什么我的函数将布尔值更改为“on”?

    所以我是 php 编程世界的新手 我正在在线学习和其他形式等 但我找不到任何东西来帮助回答我的问题 这就是我在这里的原因 任何帮助当然不胜感激 谢谢 我想将下面的代码变成我可以调用的函数 它的工作原理如下所示 如果我选中表单中的复选框 它会
  • PHP 检查字符串是否只包含任何语言的字母、数字和空格

    我如何检查字符串是否只包含任何语言中的字母 数字和空格 我已经尝试过 但它不检查像 这样的特殊字符 preg match p L u string preg match p N u string 您可以使用 preg match p L p
  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它
  • 如何使用 Laravel Eloquent 返回多重关系?

    我有一张桌子叫users 每个用户都有不同的事情 country device computer category 我为上述每一个 事物 创建了一个表格 类似如下 1 United States 2 United Kingdom 3 Aus
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 是否必须配置 PHP 才能通过 PHP 扫描每个目录的配置 INI 文件(即我的情况下的 .htaccess 文件)?

    我在用着Windows 10 家庭单语言 64 位操作系统在我的机器上 我已经安装了最新的副本XAMPP服务器在我的机器上附带PHP 7 2 7 我从 PHP 手册中阅读了以下页面 扫描目录 https secure php net man
  • 使用 php 获取当前月份的最后 3 个月

    我想获取当前月份最近 3 个月的名称 例如当前月份是八月 所以 我想要六月 七月 八月这样的数据 我已经尝试过这段代码echo date F strtotime 3 months 它只返回六月 如何使用 php 获取当前月份的最后 3 个月
  • facebook php - 如何获取专辑封面照片

    我需要使用 PHP SDK Facebook 获取专辑封面照片 我尝试 https graph facebook com ALBUM ID picture type album 但我得到默认图像 例如 获取用户 https graph fa

随机推荐

  • 边缘计算物联网网关在机械加工行业中的效用分享

    随着工业4 0的推进 物联网技术正在逐渐渗透到各个行业领域 机械加工行业作为制造业的基础领域之一 其生产过程的自动化 智能化水平直接影响到产品质量和生产效率 边缘计算物联网网关作为物联网技术的重要组成部分 在机械加工行业中发挥着越来越重要的
  • Webpack4.0 的相关优化配置

    所谓的优化 也就是引入一些插件 使得代码的体积变小 1 删除没有意义的样式 在css文件中有一些没有用到的样式 希望在打包的过程中 删除掉它们 安装两个插件 cnpm install purgecss webpack plugin glob
  • 深度理解取整&取余&取模运算

    在编程的学习当中 我们会经常行的使用这些操作在表达式计算 但是你在使用当中 你真的理解了吗 或者说是你完全学会使用了 在这篇博客当中 或许会出现错误 希望大家理解 目前还在学习当中 发现错误或不足之处请大家斧正 目录 一 取整 二 取余与取
  • 64位win7下安装MongoDB以zip包的形式 图文(超详细)

    首先从mongodb的官网上下载对应版本的zip包 如果你使用Windows 64 bit 2008 R2 或win7需要安装Hotfix补丁 读者可以去网上下载相应的版本 解压后会得到如下的一个目录 然后自己在某个录下下建好一个目录 我这
  • window.open (‘page.html‘)

    window open page html 用于控制弹出新的窗口
  • 2024王道408数据结构 P143 T8

    2024王道408数据结构 P143 T8 思考过程 首先题目的意思非常简单明了 就是让我们找二叉树中度为2的结点 也就是既有左子树又有右子树的结点 那我们只需要在代码里判断如果该结点有左子树就入队 同时如果该结点有右子树就计数器 1 并且
  • vi/vim基本使用命令

    转自 http www lupaworld com uid 296380 action viewspace itemid 118973 vi vim 基本使用方法 本文介绍了vi vim 的基本使用方法 但对于普通用户来说基本上够了 i v
  • QT+VS配置及调试

    QT下载 https download qt io archive qt QT Creator设置 打开 Qt Creator 进入编译器部分 工具 gt 选项 gt 构建和运行 gt 编译器 可以看到vs的内容 之后 进入 工具 gt 选
  • Android平台GB28181接入端如何对接UVC摄像头?

    我们在对接Android平台GB28181接入的时候 有公司提出这样的需求 除了采集执法记录仪摄像头自带的数据外 还想通过执法记录仪采集外接UVC摄像头 实际上 这块对我们来说有点炒冷饭了 不算新的诉求 大牛直播SDK 在2016年对接RT
  • 2023国庆节放假通知

    喜迎国庆 放假通知 公司相关各部门 国庆来临之际 根据国家有关规定 现将2023年国庆放假事项通知如下 1 9月29至10月6日放假调休 共8天 10月7日上班 10月8日上班 2 各部门接通知后 妥善安排好值班工作 并将各部门值班表于20
  • 500套优秀简历模板,送给您!

    点击上方 成猿之路 选择 置顶公众号 第一时间送达实用技术干货 最近收藏保存了一些简历模板 觉得不错 送给即将步入社会或需要简历模板的你 01单面简历 150款 02多页简历 95款 03表格简历 18款 04英文简历 27款 05艺术气质
  • pytorch: 数据增广(Data Augmentation)

    常用的数据增广方法 比例缩放 位置截取 翻转 旋转 亮度 对比度和色调的变化 读取原图 import torchvision transforms as transforms from PIL import Image img Image
  • Vue.js如何实现倒计时?颜小白实测可用!

    Vue JS如何实现倒计时功能 1 首先一般来说前端小伙伴们会收到后端同学传过来的一个结束时间 大部分需要倒计时得情况都是在详情页 比如商品 活动等一些场景 2 如果需要实现倒计时功能 首先我们需要知道如何计算剩余时间 首先我们会拿到后端传
  • jdbctemplate 执行多条sql_SpringBoot使用JdbcTemplate连接Mysql实现增删改查

    摘要 本文是springboot工程使用JdbcTemplate连接Mysql数据库 实现增删改查的实例 及在搭建过程中碰到的几个问题 前几篇介绍怎么搭建SpringBoot工程 接下来直接入正题 什么是JDBC JDBC Java Dat
  • HDFS RPC限流方案实践探索

    文章目录 前言 HDFS RPC限流方案 分级RPC queue的调参 分级RPC queue的insight 前言 在前面的一篇关于分布式集群下的限流方案文章里 笔者阐述了一种在HDFS集群里的RPC限流架构 其间也提到了很多关于分布式限
  • Ubuntu连接不上网络问题的解决方法

    这学期经常要用虚拟机做实验 但经常在某一次开机后网络连接不上 查过很多解决方法 每次奏效的方法又都不一样 这里记录一下 省的下次一个一个找了 第一次写博客 有点点小激动嘿嘿 以下方法都是在NAT模式下的连接 方法一 还原默认设置 将虚拟机关
  • 20个基本电路图讲解_记住这些规则,再看电路图就不会乱了!

    在我们进行电子DIY制作时 看图是难免的 但对于很多新手来说 刚开始似乎总有种很乱的感觉 走过来后我们才知道 当时只是没有了解这些规则 今天小编以电子电路图为主要示例进行总结一下 电路图走向 是指电路图中各部分电路 从最初的输入端到最终的输
  • 【数据结构】 二叉树面试题讲解->叁

    文章目录 引言 根据二叉树创建字符串 https leetcode cn problems construct string from binary tree submissions 题目描述 示例 示例一 示例二 思路解析 代码完整实现
  • Spring MVC的表单标签库详解

    表单标签库中包含了可以用在 JSP 页面中渲染 HTML 元素的标签 在 JSP 页面使用 Spring 表单标签库时 必须在 JSP 页面开头处声明 taglib 指令 指令代码如下 在表单标签库中有 form input passwor
  • Ueditor去掉图片之间的间隙

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