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（）函数找到了答案。而不是尝试将css作为样式加载到文档头中，通过运行CKEDITOR.addCss（）函数可以更简单地处理该过程。

代码如下：

对于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实例。

如何在没有css文件的情况下动态地将css添加到ckeditor

2 个答案: