zoukankan      html  css  js  c++  java
  • CKEDITOR 4.6.X 版本 插件 弹出对话框 Dialog中 表格 Table 自定义样式Style 问题

          项目开发过程中,发现CKEDITOR 插件的弹出框 内 如果跟据项目需要写表格(table tr td),表格的边框等属性会被 CKEDITOR的清除或覆盖,导致表格很难看。

          问题关键:

               插件弹出框dialog中的 table标签的style属性,等被覆盖,即使自定义也无法生效。 初步判断是样式的优先级问题。

          解决办法:自定义table的样式,使得优先级最高。

           解决思路:

          1.自定义样式

          2.样式优先级: 

                    a.尝试阅读源码,修改引入样式的先后顺序。但是无果。CKEDITOR是支持皮肤的,尝试过editor.css等,但是无果

                    b.采用样式的  !important 方式 (貌似IE6不支持吧)

          3.试验,成功!

          

    样式代码:

    .editor-dialog-table table{
    
    }
    
    .editor-dialog-table table th{
        border-width:1px !important;
        border-style: solid !important;
        border-color: black !important;
        background-color: #4f82b4 !important;
        color:#fff !important;
        font-size: 14px !important;
        line-height: 14px !important;
        padding: 8px !important;
    }
    
    .editor-dialog-table table tr{
        border-width:1px !important;
        border-style: solid !important;
        border-color: lightgray !important;
    }
    
    .editor-dialog-table table tr td{
        border-width:1px !important;
        border-style: solid !important;
        border-color: lightgray !important;
        padding: 8px !important;
    }
    View Code

    效果截图:

       

    这里要注意: css在哪里引用?

         CKEDITOR的弹出框跟 嵌入编辑器(容器div或 textarea)所在文件平级,在这个html文件里引入即可。

         另外:CKEDITOR的富文本编辑主体 由于是 iframe另外引入的,所有不同。

           

  • 相关阅读:
    多线程锁--怎么理解Condition
    ThreadPoolExecutor
    ThreadFactory
    java内部类的初始化
    Android Private Libraries 和 Dependencies的区别
    Android严苛模式StrictMode使用详解
    [法律法规]《网络安全等级保护条例(征求意见稿)》
    [法律法规]中华人民共和国网络安全法
    Sqlserver tablediff的简单使用
    Sqlserver 命令行方式修改 用户密码的方法
  • 原文地址:https://www.cnblogs.com/hutuchong/p/6656667.html
Copyright © 2011-2022 走看看