项目开发过程中,发现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; }
效果截图:
这里要注意: css在哪里引用?
CKEDITOR的弹出框跟 嵌入编辑器(容器div或 textarea)所在文件平级,在这个html文件里引入即可。
另外:CKEDITOR的富文本编辑主体 由于是 iframe另外引入的,所有不同。