CKEditor 4：如何从插件添加CSS样式表？

Question

试过这个，但没有运气

  editor.addCss(this.path + 'tabber.css');
  editor.document.appendStyleSheet(this.path + 'tabber.css');

完整代码

(function () {
  CKEDITOR.plugins.add('tabber', {
    init: function (editor) {
      editor.ui.addButton('addTab', {
        command: 'addTab',
        icon: this.path + 'icons/tabber.png',
        label: Drupal.t('Insert tabs')
      });
      editor.addCss(this.path + 'tabber.css');
      editor.document.appendStyleSheet(this.path + 'tabber.css');
      editor.addCommand('addTab', {
        exec: function (editor) {
          editor.insertHtml('<dl>' +
            '<dt>Tab title 1</dt>' +
            '<dd><p>Tab content 1.</p></dd>' +
            '<dt>Tab title 2</dt>' +
            '<dd><p>Tab content 2.</p></dd>' +
            '</dl>');
        }
      });
    }
  });
})();

在init中解决方案（感谢指出正确方向的答案）

  var cssPath = this.path + 'tabber.css';
  editor.on('instanceReady', function () {
    this.document.appendStyleSheet(cssPath);
  });

Answer 1

CKEDITOR.addCss接受字符串作为参数，因此无法在那里传递任何路径。 CKEDITOR.document.appendStyleSheet是正确的（ 小提琴 ）：

CKEDITOR.replace( 'editor', {
    on: {
        instanceReady: function() {
            this.document.appendStyleSheet( 'http://path.to.your.css' );
        }
    }
} );

请确保：

1. 你的CSS存在。
2. 它具有正确的读取权限。
3. 您的HTML 在编辑器中是允许的 （也可以阅读集成指南 ，因为4.1需要调整您的命令的allowedContent ）。

我想你也可能会发现CKEDITOR.getUrl很有用。

Answer 2

将以下内容添加到config.js ：

config.contentsCss = [CKEDITOR.getUrl（'contents.css'），'/ path / to / your / css'];

这会将您的CSS文件附加到默认的CKEditor样式。 这个方法优于instanceReady的优点是（至少对我来说）当用户从Source切换模式到Visual时，instanceReady事件不会重新触发，也不会重新应用自定义样式。

Answer 3

如果您使用的是CKEditor 4.4或更高版本，则可以使用

editor.addContentsCss( pluginDirectory + 'styles/example.css' );

如果你使用CKEditor这样的旧版本，你应该使用：

 beforeInit: function(editor) { var ccss = CKEDITOR.config.contentsCss; if(typeof ccss == 'string'){ ccss = [ccss]; } ccss.push('/css/style.css'); CKEDITOR.config.contentsCss = ccss; } 

创建该功能时，请查看此票证： https ： //dev.ckeditor.com/ticket/11532