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另外引入的，所有不同。

CKEDITOR 4.6.X 版本 插件 弹出对话框 Dialog中 表格 Table 自定义样式Style 问题

CKEDITOR 4.6.X 版本插件弹出对话框 Dialog中表格 Table 自定义样式Style 问题