如何將自己的CSS樣式添加到CKEditor

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 --> ]
    });
}