如何更改ckeditor iframe CSS样式

Question

我无法弄清楚如何修改CKeditor iframe的bodyCSS样式.我已经尝试了一系列基于各种潜在解决方案的选项,但我对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

编辑contents.css位于主CKEditor目录中的文件,或使用该config.contentsCss设置加载其他文件.

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

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

Answer 2

确认在 CKEditor 4.5.9 中我能够简单地添加一些所需的自定义覆盖 CSS 样式config.js（因此将来更新 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 ) { ... }部分中：

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

这意味着我不必content.css从默认值编辑 CKEditor，只需 2 倍简单的 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