我该如何更改ckeditor的iframe CSS样式？

Question

我无法弄清如何修改CKeditor iframe的body CSS样式。基于网络上的各种潜在解决方案，我尝试了一堆选项，但我对CKeditor的API不是很熟悉，这使得事情变得相当困难。这是（具体地说）CKeditor 4.4.3。

您可以在以下JSFiddle上看到各种尝试（已注释）：

http://jsfiddle.net/KS3p4/1/

CKEDITOR.stylesSet.add( 'style_updates', [
    // ATTEMPT 1
    // Block-level styles...this is for the dropdown menu (not shown in current config)
    { name: 'Body Margin Fix', element: 'body', styles: { margin: '10px' } }
]);

editor = $('textarea').ckeditor( function(editor){
    // ATTEMPT 2
    //callback `this` refers to CKEDITOR.editor
    this.ckeditorGet().addCss('body { margin:10px; }')
}, {
    // ATTEMTP 3
    addCss: 'body { margin:10px; }',
    stylesSet: 'styles_updates',
    uiColor: '#FFFFFF',
    scayt_autoStartup: true,
    autoGrow_onStartup: true,
    enterMode: CKEDITOR.ENTER_BR,
    removePlugins: 'elementspath, resize',
    toolbar: [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'PasteFromWord', 'Undo', 'Redo' ] },
        { name: 'links', items: [ 'Link', 'Unlink' ] },
        { name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
        { name: 'tools', items: [ 'Maximize' ] }
    ]
// ATTEMPT 4
}).ckeditorGet().addCss('body { margin:10px; }');

- BrendonKoz

Answer 1

编辑位于主CKEditor目录中的contents.css文件，或使用config.contentsCss设置来加载不同的文件。

我看到你将样式系统设置与内容样式混淆了。这两者是完全不同的东西 - 样式系统负责对所选内容应用和删除“样式” - 它被通过样式和格式下拉菜单以及粗体或斜体按钮使用 - 所有这些都是“样式”。

至于CKEDITOR.addCss() - 这个方法主要是由插件使用的，必须在编辑器创建之前使用。实际上，它的文档正是这样说的，并提到你应该使用contents.css ;)

- Reinmar

---

我希望有一种方法可以针对JS实例内的CSS内联进行定位，而不是针对外部CSS文件进行定位。仅添加body{margin:0};似乎是多余的。好吧，谢谢！这与其他人提到的结果相同，所以这肯定是唯一的方法。我不想编辑contents.css文件，以防将来升级脚本时会覆盖我的更改。 - BrendonKoz

在这种简单的情况下，您可以使用 CKEDITOR.addCss()，但是您需要在创建编辑器实例之前执行此操作。 - Reinmar

顺便提一下，关于升级的问题，我理解。我们早就想移除默认的config.js和contents.css文件了，但这些文件对于真正的初学者来说简化了设置过程。不过，您可以简单地使用config.contentsCss和config.customConfig，并将这些文件放在CKEditor目录之外。那么升级就会变得容易。我们例如建议在CKEditor CDN页面上采用这种方式。 - Reinmar

我希望我能为你的评论再加分。哇，感谢你提供额外的信息！ - BrendonKoz

我正在使用#fullPage全屏模式，所以这个解决方案不起作用，你知道在使用相同的全屏模式时有其他方法来实现相同的效果吗？ - Santanu Nandi

Answer 2

请确认在CKEditor 4.5.9中，我可以通过config.js简单地添加一些所需的自定义CSS样式（这样不太可能被将来更新的CKEditor版本意外覆盖）。

我添加了：

// 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 ) { ... }部分中：

1. 将CKEditor默认的.cke_editable内容区域正文字体大小从13px改为14px，以匹配其他Bootstrap表单字段的字体大小。
2. 指定在iPhone上查看时，.cke_editable字体大小应增加到16px，以防止iOS缩放到超过已经移动优化的页面布局的100%。

这意味着我不必仅因为两个简单的CSS覆盖就编辑CKEditor的content.css。

CKEditor的.addCss方法参考http://docs.ckeditor.com/#!/api/CKEDITOR-method-addCss

如果您想要进行更多的CSS覆盖，则应使用config.contentsCss = '/css/mysitestyles.css';来重新指向您自己的定制版本的CKEditor默认content.css。

或者您可以指向他们的默认CSS，然后使用config.contentsCss = [ 'content.css', '/css/anotherfile.css' ];指向您自己的附加文件。

CKEditor的.contentsCSS方法参考http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

- Alan Howshall