Question

当加载CKEditor并且我正在编辑这些内容时，我希望在编辑时背景为黄色。

如何在编辑器中“设置”该样式表。

Answer 1

有一个选项contentsCss，可让您加载包含自定义样式定义的外部CSS样式表。使用它可以使您的内容与您网站上的内容完全一致。因此，为了使用它，您需要以下列方式实例化CKEditor：

CKEDITOR.replace('mytextarea', {
    // Custom stylesheet for the contents
    contentsCss : 'assets/custom.css'
});

您还可以定义为custom.css，例如：

body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    color: #444;
    background-color: yellow;
}

h1, h2 {
    color: #555;
    background-color: #EFEFEF;
}

/* etc some custom styles */

EDIT。使用config.js

使用config.js文件可以通过多种方式获得所需内容。例如：

CKEDITOR.editorConfig = function( config )
{
    // ... some other configuration options

    // Define some custom class to be assigned to body element ogf the editor area
    config.bodyClass = 'body-yellow';
};

在contents.css所在的文件夹中创建config.js个文件。在里面定义你的风格：

.body-yellow {
    background-color: yellow;
}

那就是它。

Answer 2

这样的事情：


var editor = CKEDITOR.replace( 'editor1' ); //textarea with id="editor1"
editor.on( 'instanceReady', function( ev ){
    //set the background properties
    this.document.$.childNodes[1].childNodes[1].style.backgroundColor = 'Yellow';
    editor.focus();
});

希望有所帮助

Answer 3

创建一个具有所需背景颜色的CSS类，然后在页脚的其他javascript中使用jQuery .focus();：

$('#target').focus(function() {
  $(this).addClass("yellowBG");
});

Answer 4

如果你想更进一步，你可以在运行时从你的javascript定义自定义样式表 -

function generateCSS(){
    var base = document.createElement('style'),
        baseAttributes = {'id': 'yourID', 'type': 'text/css'}, 
        cssString = '';
    base = $(base).attr(baseAttributes);
    //Now create your css rules
    cssString += '.body-yellow {background-color: yellow;}';
    base.append(cssString).appendTo('head');
}

然后当你完成它时，你可以删除它，如果你愿意的话。

您当然可以使用纯JavaScript来执行此操作。我在这里使用jQuery只是为了简洁。当您的插件虚拟化您的行并且您不希望使用可能使用或不使用的规则来收集样式表时，此方法会有所帮助。因此，当删除并插入行时（假设您在这些行上有相当多的自定义样式），您不需要继续挖掘DOM以重新应用样式 - ＆gt;生成你的CSS并完成。

在CkEditor中，如何在我正在编辑时应用样式表？

4 个答案:

EDIT。使用config.js