CKEditor - 可编辑内容CSS干扰编辑器工具栏样式

时间:2018-05-12 15:52:46

标签: javascript html css ckeditor

我正在使用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规则明确地将每个属性设置为正确的值,但这似乎是一项艰巨的任务。

我在这里缺少什么?

1 个答案:

答案 0 :(得分:1)

  

此行为由此处的CKEditor文档(https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html)描述,但我似乎无法弄清楚如何应用它。我的皮肤样式表包含一个reset.css,但它似乎不会影响样式。

CKEditor文档中描述的内容并不包含带有!important标记的案例,因为它无法像您想要的那样工作。此标志将覆盖其他css规则,包括重置文件中的规则。如果您仍想在编辑器中使用!important,可以考虑使用经典编辑器而不是内联编辑器。将CKEDITOR.inline(更改为CKEDITOR.replace。这有什么用?经典编辑器在iframe中呈现,iframe具有不会影响其外部任何内容的单独样式。