如何在沒有css文件的情況下將css動態添加到ckeditor

Question

我有一種情況，我將有關文本對象的動態 css 數據作為 json 存儲在數據庫中。 我需要將相同的 css 數據映射到 CKEditor 中的樣式。 通過運行以下命令將 json 解析為樣式集，我能夠成功地將類加載到 CKEDITOR 樣式下拉列表中：

CKEDITOR.stylesSet.add('myStyles',styleObj);

不幸的是，這並不完全適用於屏幕文本，因為 css 不作為文件存在。

我還通過將動態生成的 css 附加到樣式標記，成功地將 css 生成到 dom 的頭部。 不幸的是，這仍然沒有將生成的實際 css 連接到 CKEDITOR，因為它處於單獨的上下文中。

有誰知道我如何將文檔級 css 連接到 CKEDITOR 實例或以 CKEDITOR 理解的方式生成 CSS？ 我不希望為每個需要查看文本對象的用戶將臨時 CSS 文件寫入磁盤。

Answer 1

我通過使用 CKEDITOR.addCss() 函數找到了答案。 通過運行 CKEDITOR.addCss() 函數，該過程可以簡單得多，而不是嘗試將 css 作為樣式加載到文檔頭中。

代碼如下：

對於在 json 中找到的每個 css 樣式：

    styleObj.push({name:this.name,element:'p',attributes: { 'class':cssClassName}});
    var cssSheetString = '.'+cssClassName+' {font-family:'+this.fontFamily+'; font-size:'+fontSize+'; font-weight:'+this.fontStyle+'; text-decoration:'+textDecoration+'; } ';
    CKEDITOR.addCss(cssSheetString);

循環結束后，還要添加樣式對象：

if(!CKEDITOR.stylesSet.registered.myStyles){
                CKEDITOR.stylesSet.add('myStyles',styleObj);
            }

Answer 2

只為后人。 我已經看到答案說這會起作用

    CKEDITOR.on('instanceCreated', function (event) {
        event.editor.addCss(styles);
    });

但事實並非如此，您必須使用

    CKEDITOR.on('instanceCreated', function (event) {
        CKEDITOR.addCss(styles);
    });

此外，如果您的樣式變量更改，您必須銷毀並使用新樣式重新創建 ckeditor 實例。