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

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 */

编辑.使用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;
}

而已.