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,当然如果是商业开发这样也更容易根据代码算钱。