4

我需要使用我的 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; }' );
4

2 回答 2

17

如果您在 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');
    });
});
于 2012-07-09T17:42:53.043 回答
1

@AlfonsosML 上面的第二个答案非常适合定位编辑器的正文元素。但是我需要在编辑器中定位 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; }' );
    });
});

谢谢

于 2021-08-04T16:55:04.093 回答