CKEditor 4:如何从插件添加CSS样式表?

塞伯·科宾

暂时尝试过,但没有运气

  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);
  });
奥列克

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章