试图让CKEDITOR Simple Plugin(第1部分)示例工作

时间:2014-09-07 18:17:26

标签: ckeditor

我将Simple Plugin (Part 1) example的zip下载中提供的文件添加到具有CKEDITOR工作设置的网站。我没有对任何文件进行任何更改。一个名为abbr的插件应该由此代码定义。重新加载包含CKEDITOR的页面后,在我将插件添加到extraPlugins后,我没有看到插件的图标。然后我在insert工具栏中添加了对该插件的引用,但这也没有用。

我可以通过绑定到击键来显示插件对话框,所以至少有那么多可行:

config.keystrokes = [
  [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 32 /*space*/, 'abbr' ]
];

这是我的ckeditor.js,在删除Play Framework视图标记后(希望我没有错过任何):

<script>
  function createEditor() {
    var editor = CKEDITOR.instances.BLAH;
    if (editor) {
      try { editor.destroy(true) ; } catch ( e ) { }
    }
    editor = CKEDITOR.replace("BLAH", {
      height: $(window).height() / 2 - 30,
      "extraPlugins": "imagebrowser,abbr,codemirror",
      on: {
        instanceReady: function(evt) {
          var maximized = $.cookie("maximized");
          var me = maximized=="true";
          if (me)
            editor.execCommand('maximize');
        },
        save: function(evt) {
          var scaytEnabled = CKEDITOR.plugins.scayt.state[evt.editor.name];
          $.cookie("scayt_enabled", scaytEnabled.toString(), { path: '/' });

          var maximized = evt.editor.commands.maximize.state==1;
          $.cookie("maximized", maximized.toString(), { path: '/' });
        }
      }
    });
  }
</script>

这是启动CKEDITOR的JavaScript。 abbrinsert工具栏中提到的最后一个插件:

CKEDITOR.editorConfig = function(config) {
  config.allowedContent = true;

  config.tabSpaces = 2;
  config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
  config.toolbarCanCollapse = true;

  config.toolbar = [
    { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] },
    { name: 'document',    items : [ 'Source','-','Save','NewPage','DocProps',/*'Preview',*/'Print','-','Templates' ] },
    { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    //{ name: 'forms',       items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    { name: 'insert',      items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe', 'abbr' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'colors',      items : [ 'TextColor','BGColor' ] },
    { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
    '/',
    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'/*,'-','BidiLtr','BidiRtl'*/ ] },
    { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
    { name: 'editing',     items : [ 'Find','Replace','-','SelectAll','-','SpellChecker','Scayt' ] }
  ];
};

我注意到说明与代码有所不同;此代码显示在说明中:

editor.ui.addButton( 'Abbr', {
    label: 'Insert Abbreviation',
    command: 'abbrDialog',
    toolbar: 'insert'
}); 

但下载中的代码对commandabbr的值不同。两种价值都没有效果。我尝试将abbrDialog添加到insert的{​​{1}}部分,但这也不起作用。也许还有另一个问题。

1 个答案:

答案 0 :(得分:0)

本教程中有一个小错误 - 在代码示例abbr中,您可以下载的代码名为abbrDialog

但按钮的名称始终相同 - Abbr(它的区分大小写!)。基本上,您的config.toolbar设置不正确,因为您使用了较低的套用名称。