zoukankan      html  css  js  c++  java
  • 百度UEditor粘贴或插入的表格不显示边框的解决办法

    这个方法是我自己研究出来的。

    编辑器里面可以看到表格有边框,在前台页面展示出来的却没有边框。

    修改办法:

    打开ueditor.all.js

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

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    1. utils.each(tables, function (table) {  
    2.     removeStyleSize(table, true);  
    3.     domUtils.removeAttributes(table, ['style']); //改这里,原来是 ['style', 'border']  
    4.     utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {  
    5.         if (isEmptyBlock(td)) {  
    6.             domUtils.fillNode(me.document, td);  
    7.         }  
    8.         removeStyleSize(td, true);  
    9.     });  
    10. });  

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

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

    [css] view plain copy 在CODE上查看代码片派生到我的代码片
    1. td,th{ border:1px solid #DDD; }  

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

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

    找到并修改下面的代码

    [css] view plain copy 在CODE上查看代码片派生到我的代码片
    1. utils.cssRule('table',  
    2.             //选中的td上的样式  
    3.             '.selectTdClass{background-color:#edf5fa !important}' +  
    4.                 'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' +  
    5.                 //插入的表格的默认样式  
    6.                 'table{margin-bottom:10px;border-collapse:collapse;display:table;}' +  
    7.                 'td,th{padding: 5px 10px;border: 1px dashed #DDD;}' + //这里修改 1px solid #DDD 为 1px dashed #DDD  
    8.                 'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +  
    9.                 'th{border-top:1px dashed #BBB;background-color:#F7F7F7;}' + //这里修改 1px solid #BBB 为 1px dashed #BBB  
    10.                 'table tr.firstRow th{border-top-2px;}' +  
    11.                 '.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }' +  
    12.                 'td p{margin:0;padding:0;}', me.document);  

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

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

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

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

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    1. execCommand: function () {  
    2.     var table = getTableItemsByRange(this).table;  
    3.     utils.each(domUtils.getElementsByTagName(table,'td'),function(td){  
    4.         td.style.borderWidth = '1px';  
    5.         td.style.borderStyle = 'solid';  
    6.         td.style.borderColor = 'windowtext';  
    7.     });  
    8.     //增加下面一段  
    9.     utils.each(domUtils.getElementsByTagName(table,'th'),function(th){  
    10.         th.style.borderWidth = domUtils.getComputedStyle(th, "border-width");  
    11.         th.style.borderStyle = 'solid';  
    12.         th.style.borderColor = 'windowtext';  
    13.     });  
    14. }  


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

  • 相关阅读:
    AGC 018E.Sightseeing Plan(组合 DP)
    BZOJ.4767.两双手(组合 容斥 DP)
    AGC 001E.BBQ Hard(组合 DP)
    洛谷.3960.列队(线段树/树状数组)
    Codeforces Round #514 (Div. 2)
    10.4 正睿国庆集训测试 青岛
    Codeforces.264E.Roadside Trees(线段树 DP LIS)
    BZOJ.4653.[NOI2016]区间(线段树)
    Ansible安装部署以及常用模块详解
    Linux系统诊断必备技能之二:tcpdump抓包工具详解
  • 原文地址:https://www.cnblogs.com/dxqNet/p/6813178.html
Copyright © 2011-2022 走看看