如何更改ckeditor iframe CSS样式

我不知道如何修改CKeditor iframe的

body

CSS样式。我尝试了一系列基于web上各种潜在解决方案的选项，但我对CKeditor的API不太熟悉，这使得事情变得相当困难。这是（特别是）CKeditor 4.4.3

您可以在以下JSFIDLE中看到各种尝试（注释）：

---

编辑位于主CKEditor目录中的

contents.css

文件，或使用该设置加载其他文件

我看到您将样式系统设置与内容样式混淆。这是两个完全不同的东西-样式系统负责将“样式”应用到选定内容并将其删除-例如，由样式和格式下拉列表以及粗体或斜体按钮使用-所有这些都是“样式”

---

至于-此方法主要由插件使用，并且必须在创建编辑器之前使用。事实上，它的文档正是这么说的，并提到你应该使用

contents.css

；）

确认在CKEditor 4.5.9中，我可以通过

config.js

简单地添加一些所需的自定义覆盖CSS样式（这样以后更新CKEdtor版本时不太可能意外覆盖）

我补充说：

// Add override CSS styles for inside editable contents area.
CKEDITOR.addCss( '.cke_editable { font-size: 14px; } @media screen and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio:0) { .cke_editable { font-size: 16px !important; } }' );

在现有的

CKEDITOR.editorConfig=function（config）{…}

节中，转到：

覆盖CKEditor的默认.cke_可编辑内容区正文字体大小从13px到14px-以匹配我的其他引导表单字段的字体大小

要指定在iPhone上查看时，.cke_可编辑字体大小应增加到16px，以防止iOS放大到我已经优化的移动页面布局的100%以上

这意味着我不必从默认值编辑CKEditor的

content.css

，只需2倍简单的css覆盖

CKEditor的.addCss方法引用

如果你想做更多的CSS覆盖，你应该改为使用

config.contentsCss='/CSS/mysitestyles.CSS'

重新指向您自己定制的CKEditor默认版本

content.css

。 或者，您可以使用

config.contentsCss=['content.CSS'，'/CSS/anotherfile.CSS']指向它们的默认CSS，然后指向您自己的附加文件

CKEditor的.contentsCSS方法引用
我希望有一种方法可以在编辑器的JS实例化中以CSS内联为目标，而不是以外部CSS文件为目标。仅仅添加body{margin:0}；似乎是多余的；。哦，好吧。非常感谢。这和其他人提到的结果是一样的，所以这肯定是唯一的办法。我不想编辑contents.css文件，如果我升级了脚本，它会覆盖我的更改。在这种简单的情况下，您可以使用
CKEDITOR.addCss（）
，但您需要在创建editor instance.BTW之前这样做。至于升级，我理解这个问题。很久以前，我们会删除默认的
config.js
和
contents.css
文件，但它们简化了真正初学者的设置。但是，您可以简单地使用
config.contentsCss
并将这些文件保存在CKEditor目录之外。那么升级就很容易了。我们推荐这种方式，例如在网站上。我希望我能为你的评论提供更多的观点。Dang，谢谢你提供的额外信息！我使用的是#整页整页模式，因此此解决方案不起作用，您知道在使用相同的整页模式时有其他方法可以做到这一点吗？
// Add override CSS styles for inside editable contents area.
CKEDITOR.addCss( '.cke_editable { font-size: 14px; } @media screen and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio:0) { .cke_editable { font-size: 16px !important; } }' );