css - 如何更改 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; }');

Answer 1

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

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

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