搞了一上午,最后发现原因原来出在某路径少打一个“/”,真是害人不浅。
本次只是熟悉一下写ckeditor插件的流程,所以用的是samples里api_dialog.js的代码作为弹出窗口。
首先第一步,在ckeditor/plugins目录下新建文件夹作为插件目录,我新建了一个myplugin文件夹。
然后在myplugin文件夹下新建两个东西,一个是plugin.js文件,另一个是dialogs文件夹。
plugin.js内容如下:
CKEDITOR.plugins.add('myplugin', { requires : ['dialog'], init : function (editor) { var pluginName = 'myplugin'; //加载自定义窗口,就是dialogs前面的那个/让我纠结了很长时间 CKEDITOR.dialog.add('myDialog',this.path + "/dialogs/mydialog.js"); //给自定义插件注册一个调用命令 editor.addCommand( pluginName, new CKEDITOR.dialogCommand( 'myDialog' ) ); //注册一个按钮,来调用自定义插件 editor.ui.addButton('MyButton', { //editor.lang.mine是我在zh-cn.js中定义的一个中文项, //这里可以直接写英文字符,不过要想显示中文就得修改zh-cn.js label : editor.lang.mine, command : pluginName }); } } );
然后在dialogs文件夹下新建一个mydialog.js,内容如下:
CKEDITOR.dialog.add( 'myDialog', function( editor ) { return { title : 'My Dialog', minWidth : 400, minHeight : 200, contents : [ { id : 'tab1', label : 'First Tab', title : 'First Tab', elements : [ { id : 'input1', type : 'text', label : 'Input 1' } ] } ] }; } );
然后修改config.js文件以配置我的自定义插件,config.js内容如下:
CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; config.skin = 'office2003'; config.width = 800; config.height = 300; config.removePlugins = 'elementspath'; config.extraPlugins = 'myplugin'; //新建插件 config.toolbar= [ ['unlink','-','Save','unlink','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar', 'PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize','ShowBlocks','-','About','-','MyButton'] //我的按钮在最后 ]; };
然后就ok了。在作出修改之后最好清下ie缓存再刷新页面。