当前位置: 首页 > news >正文

百度UEditor粘贴或插入的表格不显示边框的解决办法

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

修改办法:

打开ueditor.all.js

1、找到下面的代码,修改

utils.each(tables, function (table) {
    removeStyleSize(table, true);
    domUtils.removeAttributes(table, ['style']); //改这里,原来是 ['style', 'border']
    utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
        if (isEmptyBlock(td)) {
            domUtils.fillNode(me.document, td);
        }
        removeStyleSize(td, true);
    });
});

这是为了不让UEditor去掉粘贴的表格的边框,也就是table元素的border属性(不是border内联样式)

2、UEditor插入的表格实际是没有边框的,编辑器中看到边框,其实是因为编辑器里面(<iframe>中)有下面这个全局css

td,th{ border:1px solid #DDD; }

但是前台展示是没有这段全局css的,所以导致看不到边框。

 

我们可以让编辑器中无边框的表格,显示成虚线灰色的边框,这也是其他很多html编辑器的处理方式。

找到并修改下面的代码

utils.cssRule('table',
            //选中的td上的样式
            '.selectTdClass{background-color:#edf5fa !important}' +
                'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' +
                //插入的表格的默认样式
                'table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
                'td,th{padding: 5px 10px;border: 1px dashed #DDD;}' + //这里修改 1px solid #DDD 为 1px dashed #DDD
                'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
                'th{border-top:1px dashed #BBB;background-color:#F7F7F7;}' + //这里修改 1px solid #BBB 为 1px dashed #BBB
                'table tr.firstRow th{border-top-width:2px;}' +
                '.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }' +
                'td p{margin:0;padding:0;}', me.document);

目的是让全局的td/th边框样式显示为灰色虚线

 

 

 

3、最后就是table上右键菜单中有个"表格-设置表格边线可见"的功能。这个功能会让表格显示出实线边框,实际前台展示也是有边框的。

现在td是有实线边框的,可是th却还是虚线,所以要改下面的代码,增加一段对th的处理

注意:th就是表格标题列/行。可以用右键菜单"表格-插入表格标题列/行"插入th

execCommand: function () {
    var table = getTableItemsByRange(this).table;
    utils.each(domUtils.getElementsByTagName(table,'td'),function(td){
        td.style.borderWidth = '1px';
        td.style.borderStyle = 'solid';
        td.style.borderColor = 'windowtext';
    });
    //增加下面一段
    utils.each(domUtils.getElementsByTagName(table,'th'),function(th){
        th.style.borderWidth = domUtils.getComputedStyle(th, "border-width");
        th.style.borderStyle = 'solid';
        th.style.borderColor = 'windowtext';
    });
}

最后如果你用的是ueditor.all.min.js,需要将改过的代码压缩一份min版本。

转载于:https://my.oschina.net/u/1986568/blog/806700

相关文章:

  • 第十三章 Linux磁盘管理-RAID
  • iOS NSLog调试技巧
  • linux重定向总结
  • 【MySQL】MyRocks 漫谈
  • spring-boot版本号1.4.1使用log4j日志,出错
  • linux 笔记 3-2.高级网络配置
  • 阿里云centos7创建ipv6隧道
  • debug调试解决问题
  • 从百度云下载openSUSE leap42.2 ISO超方便
  • PHP Fatal error: Class 'DOMDocument' not found
  • 2016年度开源中国最受欢迎开源软件参展合集
  • iOS系统验证关闭
  • SaltStack(二) 安装使用
  • Hadoop2.6.5 分布式搭建
  • OneProxy实现MySQL分库分表
  • php的引用
  • python3.6+scrapy+mysql 爬虫实战
  • 【译】理解JavaScript:new 关键字
  • Android系统模拟器绘制实现概述
  • CSS 三角实现
  • Fabric架构演变之路
  • gulp 教程
  • IP路由与转发
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • javascript数组去重/查找/插入/删除
  • laravel5.5 视图共享数据
  • mongodb--安装和初步使用教程
  • Node 版本管理
  • Otto开发初探——微服务依赖管理新利器
  • PAT A1092
  • SQLServer之创建数据库快照
  • tweak 支持第三方库
  • underscore源码剖析之整体架构
  • 规范化安全开发 KOA 手脚架
  • 机器学习中为什么要做归一化normalization
  • 警报:线上事故之CountDownLatch的威力
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 异常机制详解
  • 正则表达式小结
  • #ubuntu# #git# repository git config --global --add safe.directory
  • (2015)JS ES6 必知的十个 特性
  • (NO.00004)iOS实现打砖块游戏(九):游戏中小球与反弹棒的碰撞
  • (篇九)MySQL常用内置函数
  • (生成器)yield与(迭代器)generator
  • (一)SpringBoot3---尚硅谷总结
  • (原+转)Ubuntu16.04软件中心闪退及wifi消失
  • (转)LINQ之路
  • (转)VC++中ondraw在什么时候调用的
  • .NET Core 网络数据采集 -- 使用AngleSharp做html解析
  • .net反编译工具
  • @Transaction注解失效的几种场景(附有示例代码)
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945
  • [2013AAA]On a fractional nonlinear hyperbolic equation arising from relative theory
  • [C++]高精度 bign (重载运算符版本)
  • [C++核心编程](四):类和对象——封装