CKEditor

Question

我正在尝试更改我的 ckeditor 实例区域中的默认字体颜色/大小等，但它对我不起作用。

在 chrome inspector 中，我可以将此样式添加到 header 并且它有效：

.cke_editable { 
    color: #fff; 
    font-size: 14px; 
    font-family: "Calibri";
}

然而，当我将它添加到我的 editor.css 时，它没有任何效果。我在开始和结束时都尝试过，但没有成功。当我重新加载并检查检查器中的资源时，正在加载正确的 css 文件。为什么没有应用我的样式？

当我检查 iframe 时，header 中的 style 标记也不包含样式。

Answer 1

听起来您的 CSS 样式被覆盖了 - 尝试向每个样式添加 !important，如下所示：

.cke_editable { 
color: #fff!important; 
font-size: 14px!important; 
font-family: "Calibri"!important;
}

Answer 2

您需要更改主 ckeditor 文件夹中的 content.css 或添加以下设置 http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

Answer 3

通过删除我的配置并一次重新添加一部分来解决这个问题。

第一行是

fullPage: true,

我是从另一个使用整页的来源复制的。我不需要它，所以我删除了它。

根据文档，启用 fullPage 将停止实施 contentsCss。来自 ckeditor documentation：

Note: This configuration value is ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which developer has a full control over the HTML.

然而，他们没有提到的是，将 fullPage 设置为 true 也会停止加载对 editor.css 的任何更改。一旦它被删除，我的自定义样式就会闪耀

小贴士：

contentsCSS 而不是 必须指向 css 文件。你可以直接把 css 放在那里而不是 url，像这样

contentsCss: '.cke_editable { color: #fff; font-family: Calibri; font-size: 14px; } ',

这会将这些样式直接应用到编辑器。这似乎没有记录，因为文档只提到样式表 urls。

CKEditor - 我在 editor.css 中的样式没有被应用

CKEditor - my styles in editor.css aren't being applied

html

javascript

css