CKEditor小部件:如何在onLoad中附加css

Question

我正在编写一个CKEditor小部件。由于我试图使它易于分发，我想使我的css外部。当这种语法起作用时：

CKEDITOR.plugins.add('myplugin', {
    requires: 'widget',
    icons: 'myplugin',
    init: function(editor) {
        CKEDITOR.dialog.add('myplugin', this.path + 'dialogs/myplugin.js');
        var self = this;
        editor.on('contentDom', function() {
            editor.document.appendStyleSheet(CKEDITOR.getUrl(self.path + 'css/style.css'));
        });
    }
});

我发现CKSource在他们的image2小部件中使用onLoad: function(editor){}来附加css。这看起来比我的代码更规范。不过，我得到了editor = undefined。陷阱是什么？

更新：

我使用框架选项，我肯定希望通过.appendStyleSheet()保持干燥到面向用户的页面，以及wysiwyg框架编辑器。但是，我仍然对init/beforeInit:function(编辑器)有问题，在这里，editor似乎没有填充document属性。但是，当我执行window.ed = editor时，一旦页面准备就绪，就可以访问控制台中的window.ed.document。那么，那里有什么延迟的承诺吗？也许我正在使事情复杂化，但我肯定想要附加一个可分发的样式表，并轻松地删除它。

我发现这个很管用：

    beforeInit: function(
        var ccss = CKEDITOR.config.contentsCss;
        if(typeof ccss == 'string'){
            ccss = [ccss];
        }
        ccss.push('/css/style.css'); // <-- my css installed at website root

        CKEDITOR.config.contentsCss = ccss;
        console.log(CKEDITOR.config.contentsCss);
    },

虽然孤立的css样式表的问题听起来可能过于复杂，但我希望在不需要接触现有文件的情况下实现一种易于降级的状态。

Answer 1

注意，在image2插件样式表中没有添加到editor实例中，而是使用CKEDITOR.addCss

CKEDITOR.plugins.add( 'image2', {
    ...
    onLoad: function( editor ) {
        CKEDITOR.addCss( ' ... ' );
    }
} );

将editor指定为参数是一个错误--它总是为null。

如果要使用document.appendStyleSheet手动添加样式表，请在init或beforeInit上进行，而不是在onLoad上。

尽管如此，您应该知道，对于一个文档，contentDom将被多次触发，例如在设置数据时。因此，在您的例子中，样式表将被添加很多次。因此，如果要为框架编辑器(使用iframe的编辑器)添加样式表，可以使用config.contentsCss，如果要为内联编辑器添加样式表，则可以自由调用：

CKEDITOR.document.appendStyleSheet( ... );

在插件的onLoad中(只会被调用一次)。因此，您很可能同时做这两件事，来处理内联编辑器和框架编辑器。