Question

我需要使用ckEditor在加载时动态更改背景颜色它所在的页面是一个动态加载页面，用户具有特定的bg颜色。我无法加载它必须只是编辑器主体背景颜色的CSS

所以我试过

window.onload=function(){
    CKEDITOR.instances.editor_data.addCss( 'body { background-color: #efefef; }' );
}

我没有收到错误，但也没有得到任何更改

我也试过

CKEDITOR.instances.editor_data.addCss( '#cke_editor_data { background-color: #efefef; }' );

Answer 1

如果你在window.load期间调用它，那么为时已晚，addCss定义了一些在创建编辑器时加载的css，但它不会修改正在运行的实例。

所以你可以这样（仅使用addCSS）：

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.addCss( 'body { background-color: red; }' );
});

或者这（使用编辑过的文档的更通用的方法）

CKEDITOR.on('instanceReady', function(e) {
    // First time
    e.editor.document.getBody().setStyle('background-color', 'blue');
    // in case the user switches to source and back
    e.editor.on('contentDom', function() {
        e.editor.document.getBody().setStyle('background-color', 'blue');
    });
});

Answer 2

@AlfonsosML 上面的第二个答案非常适合定位编辑器的 body 元素。但是我需要在编辑器中定位 a 标签，发现他的第一个答案打破了它。然后我在评论中尝试了@Doin 提供的解决方案： editor.document.addCssText() 也失败了。 @Doin 善意地更正了 editor.document.appendStyleText() 注释中的代码，但它隐藏在上面。我给他的更正投了一个“有用”的票，希望其他人能更快地看到它。这对我有用。我的工作代码混合了 2:

CKEDITOR.on('instanceReady', function(e) {
    // First time
    e.editor.document.getBody().setStyle('background-color', 'rgba(0,0,0,0.59)');
    e.editor.document.getBody().setStyle('color', 'white');
    e.editor.document.getBody().setStyle('text-align', 'center');
    e.editor.document.appendStyleText( 'a { color: white; }' );
    // in case the user switches to source and back
    e.editor.on('contentDom', function() {
        e.editor.document.getBody().setStyle('background-color', 'rgba(0,0,0,0.59)');
        e.editor.document.getBody().setStyle('color', 'white');   
        e.editor.document.getBody().setStyle('text-align', 'center');
        e.editor.document.appendStyleText( 'a { color: white; }' );
    });
});

谢谢

更改ckEditor的背景颜色

2 个答案: