我正在编写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'));
});
}
});
我发现CKSourceonLoad: function(editor){}在其image2小部件中用于附加CSS。这看起来比我的代码更规范。我得到editor = undefined不过。有什么收获？
更新：
我正在使用framed选项，并且我绝对想保持DRY.appendStyleSheet()到面向用户的页面以及wysiwyg Framed编辑器。但是，我仍然对init / beforeInit：function（editor）有问题，那一刻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样式表的问题听起来可能过于复杂，但我希望实现一种易于演示的状态，而无需触摸现有文件。
请注意，在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（仅被调用一次）中。因此，很可能您想同时做两件事，以处理嵌入式和框架式编辑器。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句