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中用静态调用非静态方法

    我的代码如下所示 abstract class Object public static function callStatic name parameters object get called class object new obje
  • Blade 中无法访问请求错误(Laravel 5.2)

    我已经使用 Laravel 好几个月了 但从未遇到过这样的问题 我创建了一个简单的 Request 类来验证更新用户请求 如果遵循验证规则 该请求可以正常工作 如果验证规则失败 我们应该返回上一页并在 html 中显示所有错误 根据我的说法
  • WordPress 简码传递值数组

    我正在创建一些 WordPress 短代码 旨在在页面上提供内部导航 一个页面包含很多内容部分及其自己的菜单 这就是我所拥有的 menu function internal menu atts extract shortcode atts
  • 如何通过 PHP 轻松转换 UTC 日期?

    我将日期存储在 MySQL 数据库中的 UTC 日期时间字段中 我正在使用 PHP 并且调用了 date timezone set UTC 以便对 date 不带时间戳 的所有调用都返回 UTC 格式的日期 然后我有了它 以便给定的网站可以
  • php 中的浏览器名称?

    我们如何使用php脚本获取浏览器名称和版本信息 正如 Palantir 所说 另外看看 get browser 函数 您还可以在其中检查浏览器中启用的功能
  • 如何在变量中存储包含哈希标记的完整 url?

    我正在尝试存储一个网址 例如 http localhost pro print index php page home http localhost pro print index php page home 在变量中 但我找不到执行此操作
  • 是否可以修改 $_SESSION 变量?

    恶意用户是否可以将 SESSION 在 php 中 变量设置为他想要的任何值 很大程度上取决于您的代码 有一点非常明显 SESSION username REQUEST username
  • PHP PDO相关:更新SQL语句未更新数据库内容

    我正在尝试使用准备好的语句来实现更新语句PHP http en wikipedia org wiki PHP脚本 但它似乎没有更新数据库中的记录 我不确定为什么 所以如果您能分享一些见解 我将不胜感激 Code query UPDATE D
  • 使用ip地址访问时删除index.php

    我在服务器上上传了 codeigniter 项目 从 URL 中删除 index php 不起作用 我使用IP地址访问它 喜欢http ip http ip地址 下面是我的htaccess
  • PHP:将字符串分成 8 个块,我该怎么做?

    我基本上有二进制 假设它的长度是300 我如何将它分割 就像使用爆炸一样 成 8 位块 我查看了 chunk split 但它似乎只有一个 end 参数 而不是将其放入数组的选项 或者它可以插入数组吗 末尾 8 位数字可以低于 8 如果有人
  • PHPUnit RabbitMQ:为创建连接函数编写测试

    我面临以下问题 我编写了一个函数 根据所需参数创建连接对象 AMQPConnection 现在我想编写相应的单元测试 我只是不知道在没有运行 RabbitMQ 代理的情况下如何做到这一点 这是有问题的函数 public function g
  • 如何以最少的查询次数获取帖子列表和关联标签

    我的表格结构如下 标签 更多的是一个类别 id 标签名称 描述 slug POSTS ID 标题 网址 邮戳 id idPost idTag USERS ID 用户名 userSlug VOTES id idPost idUser 每个帖子
  • Codeigniter:重置表单值

    在我看来 我想要做的是在用户成功注册后清除表单字段 这里一切正常 即用户正在注册 成功消息正在向用户显示 除了我想要做的是清除表单字段的值 我正在使用这个 Clear the form validation field data so th
  • PHP 等级分类器 - 数组的问题[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 您好 我正在开发一个 docker 微服务等级检查器应用程序 我正在从 HttpRequest 获取用户输入 我缺乏一些关于数组的基本知识以
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • PHP 中的 MongoDB - 如何将项目插入集合中的数组中?

    这必须很容易 但我似乎无法弄清楚 假设我有一个集合users这是集合中的第一项 id ObjectId 4d8653c027d02a6437bc89ca name Oscar Godson email email protected cdn
  • 使 pdo::query 静态

    当我运行下面的代码时出现此错误 我通常使用 msql 函数 但我尝试使用 PDO 代替 怎么了 致命错误 第 14 行无法静态调用非静态方法 PDO query
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • 使用 php 获取当前月份的最后 3 个月

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

随机推荐

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

    随着工业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打包的微信小程序里面查看商品详情一