Question

已经有一个帖子处理这个问题了，所有建议的内容都经过了尝试，但到目前为止我仍然没有任何效果：在config.js文件中

CKEDITOR.editorConfig = function(config)
 {

    config.defaultLanguage = 'en';
    config.language = 'en';
    config.resize_dir = 'vertical';
    config.format_tags = 'p;h1;h2;h3;h4;h5;h6';
    config.extraPlugins = 'stylesheetparser';
    config.contentsCss = '/css/fileName.css';
    config.stylesSet = [];
};

然后在上面提到的css文件中有一些针对h1，h2，h3等的样式。看起来像这样：

h1 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #5B5B5B;
}

h2 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #FF4040;
}

h3 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #60bf00;
}

问题在于，这并没有改变h1，h2，h3等标签，我将非常感谢任何有关如何使其工作的想法。

Answer 1

尝试强制覆盖！important。例如：

font-size: 36px !important;

Answer 2

您可以随时访问ckeditor / contents.css并在该文件中进行所有更改。这些更改将反映在编辑器中。

通过设置config来添加您自己的文件。

config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

Answer 3

我有一个用于初始化RTE的包装函数。尝试沿着这些方向做一些事情，这与@MiniRagnarok发布的内容类似。

我刚刚运行了测试，它以编辑器的格式和编辑器内容的内部更改了CSS。请注意，您需要在页面上引用显示内容的样式表，否则您将无法看到更新的样式。

function rteInit(inputId, height) {
    var editor = CKEDITOR.replace(inputId,
    {
        contentsCss: '/admin/css/ckeditor.css',
        height: height,
        toolbar: [ <!-- Toolbar options --> ]
    });
}

如何将自己的CSS样式添加到CKEditor

3 个答案: