7

现在尝试了这个，但没有运气

  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);
  });
4

3 回答 3

13

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很有用。

于 2013-09-13T10:37:02.990 回答
1

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

config.contentsCss = [CKEDITOR.getUrl('contents.css'), '/path/to/your/css'];

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

于 2015-05-15T15:54:47.127 回答
1

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

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

如果您使用的是 CKEditor 4.3 等旧版本，您应该使用：

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

于 2015-09-29T13:06:33.913 回答