当前位置: 动力学知识库 > 问答 > 编程问答 >

Trying to get CKEDITOR Simple Plugin (Part 1) Example to Work

问题描述:

I added the files provided in the zip download for the Simple Plugin (Part 1) example to a web site with a working CKEDITOR setup. I made no changes to any of the files. A plugin called abbr is supposed to be defined by this code. After reloading the page containing CKEDITOR, I did not see the icon for the plugin appear after I added the plugin to extraPlugins. I then added a reference to the plugin in the insert toolbar but that also did not work.

I can get the plugin dialog to appear by binding to a keystroke, so at least that much works:

config.keystrokes = [

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 32 /*space*/, 'abbr' ]

];

Here is my ckeditor.js, after removing the Play Framework view markup (hopefully I did not miss any):

<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>

Here is the JavaScript that launches CKEDITOR. abbr is the last plugin mentioned in insert toolbar:

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' ] }

];

};

I noticed that the instructions had a difference from the code; this code was shown in the instructions:

editor.ui.addButton( 'Abbr', {

label: 'Insert Abbreviation',

command: 'abbrDialog',

toolbar: 'insert'

});

But the code in the download has a different value for command: abbr. Neither value worked. I tried adding abbrDialog to the insert section of config.toolbar but that did not work either. Perhaps there is still another problem.

网友答案:

There's a small bug in this tutorial - in the code you can download the command is named abbr when in the code samples it is abbrDialog.

But name of the button is all the time the same - Abbr (it's case sensitive!). So basically, your config.toolbar setting is incorrect, because you used lower cased name.

分享给朋友:
您可能感兴趣的文章:
随机阅读: