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去掉图片之间的间隙 的相关文章

  • 点击 %40 变为 %2540

    当单击包含 符号的链接时 该网址给我 40 这就是我想要的 但是一旦我点击它 一秒钟后它就在我点击后变成了 2540 单击是在电子邮件内 然后定向到网站 其中 40 更改为 2540 我怎样才能让它停止变化 它现在得到这样的参数 email
  • 使用 ImageMagick (PHP) 将 2 个图像并排合并为 1 个图像

    我认为这是一件容易的事 我有 2 张图片 JPG 我希望它们合并成一张图片 其中 2 张图片并排 所以我有图片 A 和图片 B 我想要图片 AB 并排 两个图像具有相同的宽度和高度 在本例中 宽度 200px 高度 300px 但是第二个图
  • 简单的 PHP 回显代码不起作用

    这是我的 html 和 php 脚本 h1 Bob s Auto Parts h1 table width 100 tr tr table 为什么这个输出会出现一个 gt 我希望它是 这有效 仅有的 这是输出 鲍勃的汽车零件 鲍勃
  • php中的条件格式化html表与时间戳比较

    echo table style width 100 tr echo td Order td echo td Destination td echo td Location td echo td Status td echo td Time
  • 如何检测字符串中的非 ASCII 字符?

    如果我有一个 PHP 字符串 如何以有效的方式确定它是否至少包含一个非 ASCII 字符 我所说的非 ASCII 字符是指不属于该表的任何字符 http www asciitable com http www asciitable com
  • 如何对 SQL 进行多次查询

    我正在尝试创建一个表 并在 PHP 脚本的帮助下在数据库中插入一些值 虽然只插入 1 行 但效果很好 当我尝试输入更多行数时 出现错误 我需要为每个查询编写完整的插入语句 因为我正在使用在线 Excel 到 SQL 查询转换器
  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli
  • 如何关闭未关闭的 HTML 标签?

    每当我们从数据库或类似来源获取一些经过编辑的用户输入内容时 我们可能会检索仅包含开始标记但不包含结束标记的部分 这可能会妨碍网站当前的布局 有客户端或服务器端的方法来解决这个问题吗 找到了一个很好的答案 使用 PHP 5 并使用 DOMDo
  • Google Cloud SQL 上的故障转移如何运作?

    我打算将 PHP 应用程序 从 Google Cloud Platform 外部的服务器 连接到 Google Cloud SQL 我想知道如何设计应用程序以正确地对其数据库进行故障转移 根据manual https cloud googl
  • PHP - 类外 use 关键字和类内 use 关键字的区别

    伙计们 美好的一天 只是想问一下有什么区别use之外的class and use在 的里面class 我也用谷歌搜索过 但我的问题与答案不匹配 Example namespace App Http Controllers Auth use
  • 如何在HTML中的PHP中注释掉HTML和PHP?

    这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗
  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My
  • 使用 Instagram Basic Display API 时出现“无效平台应用程序”错误

    我正在尝试使用 Instagram Basic 显示 API 但是当我发布授权代码以获取访问令牌时 我不断收到以下错误 error type OAuthException 代码 400 error message 平台应用无效 我正在遵循此
  • PHP 扩展开发入门 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 请推荐有关 PHP 低 级 modules 编程接口的帮助文章或教程 搜索我的书签 我发现的唯一链接是
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • 如何将 Smarty 3 包含到 Laravel 4 中?

    我是 Laravel 的新手 所以仍在习惯这些概念 但是我有大约 10 年的使用 Smarty 的经验 所以我希望利用这一点 除了事实上 Blade 似乎缺乏太多我发现有用且在 Smarty 中开箱即用的功能 但无论如何除了这个问题的要点之
  • WordPress 自定义帖子类型未显示在搜索结果中

    我在 WordPress 中遇到自定义帖子类型 测验 和搜索的问题 自定义帖子类型未显示在我的搜索结果页面中 我的搜索结果中仅显示默认的帖子内容 以下是我使用的代码 函数 php函数create posttype register post
  • 反向引用在 PHP 中不起作用

    最近我一直在研究 更多的是在实践中说实话 正则表达式 我注意到他的力量 我提出的这个要求 link https stackoverflow com questions 30380397 take the text up to a speci
  • Stream_context_set_params 不适用于 ssh2.sftp 包装器

    我想使用类似的功能here http www php net manual en function stream notification callback php 请检查以下代码 function notify notification
  • 如果产品重量超过1000克,如何以公斤为单位显示

    在 Storefront 主题中 我使用下面的代码将格式化重量从 1000g 更改为 1kg add action woocommerce after shop loop item title show weight 10 function

随机推荐

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

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