ckeditor在struts2下添加自定义按钮

ckeditor的插入图片和flash和我的需求相去甚远，所以我想做个按钮调用自己的插入图片页面。

相关js代码如下：

 

function initEditor(theName, theWidth, theHeight){
 var editor = CKEDITOR.replace(theName, {
  language : 'zh-cn',
  skin : 'office2003',
  startupFocus : true,
  removePlugins : 'elementspath',
  width : theWidth,
  height : theHeight,
  //resize_enabled : false,
  resize_maxHeight : 600,
  resize_maxWidth : 1000,
  toolbar : [ 
    ['Save','-','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'] 
  ]
 });
 
 addMyBytton(editor);
}

function addMyBytton(editor){
	 editor.on('pluginsLoaded', function( ev ){
		 editor.addCommand( 'insertSth', {
			exec:function (e){
				var returnValue = window.showModalDialog('mine/initAction.action?myWord=hello');
				
				CKEDITOR.instances.editor.insertHtml(returnValue);
			}
		 } );
			
		editor.ui.addButton('MyButton',
			{
				label : editor.lang.mine,
				icon : 'image',
				command : 'insertSth'
			});
	 });
}

 

 

initEditor里主要是加载编辑器并配置一些参数，配置参数可以去查询ckeditor的api文档。

addMyButton是生成了一个按钮，并定义了这个按钮触发的事件，就是用模式窗口打开一个页面，把返回值插入到编辑器里就ok了。而把按钮显示在工具条上是在initEditor中设置toolbar属性时指定的。

需要注意的是，弹出的页面里如果有提交表单的操作，返回页面会在一个新窗口中打开，为了避免这种情况最好使用Ajax提交。当然因为我的页面有文件上传所以没办法用Ajax提交表单，所以我用的是iframe来处理的。

以上代码放到一个单独的js文件中，在编辑器页面的onload中调用initEditor方法就可以了。当然也可以用开发插件的方式把内容放到ckeditor的plugins目录下，这样的好处是不会把自己的代码和ckeditor的代码混到一起，方便以后升级ckeditor，当然如果是商业开发这样也更容易根据代码算钱。