ckeditor自定义插件流程

搞了一上午，最后发现原因原来出在某路径少打一个“/”，真是害人不浅。

 

本次只是熟悉一下写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缓存再刷新页面。

评论

3 楼 simusuishi 2012-11-30  

简单明了。不错！

2 楼 chinese_sam 2011-10-27  

好东西

1 楼 mxl86 2010-06-21  

不错，看过支持了，呵呵~~~