我正在使用CKEditor允许用户编辑HTML文档。我需要允许用户能够将任何类型的CSS或HTML放入他们的文档中。当用户的文档 CSS 具有!important
规则时,它们会更改 CKEditor 工具栏的样式。
这可以在这里看到:https://jsfiddle.net/hqpfjzyr/1/
单击"链接预览",您将看到工具栏的按钮也是红色的。
CKEditor文档在这里(https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html(描述了这种行为,但我似乎无法弄清楚如何应用它。我的皮肤样式表包括一个reset.css
,但它似乎不会影响样式。
我唯一能想到的是添加更多针对工具栏的 CSS 并使用!important
规则将每个属性显式设置为正确的值,但这似乎是一项艰巨的任务。
我在这里错过了什么?
CKEditor文档在这里(https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html(描述了这种行为,但我似乎无法弄清楚如何应用它。我的皮肤样式表包括重置.css但它似乎不会影响样式。
CKEditor文档中描述的内容不包括带有!important
标志的大小写,因为它不能像您想要的那样工作。此标志将覆盖其他 css 规则,包括重置文件中的规则。如果您仍然想在编辑器中使用!important
则可以考虑使用经典编辑器而不是内联编辑器。将CKEDITOR.inline(
更改为CKEDITOR.replace
。这有什么帮助?经典编辑器在 iframe 内部呈现,它具有单独的样式,不会影响其外部的任何内容。