ckeditor image上传js 修改成plugin的方法

在上一个文章中，介绍了自己写的一个image上传的ckeditor的 js的 扩展 ，发现在editor.destory();后在生成editor的时候，自己写的image上传的就调用不了了，没有自己查明原因，觉得可能是 CKEditor.on('pluginsLoad',function(){})的加载的问题，于是修改成了插件的方式。

 

建立步骤如下:

 

1.首先在ckeditor的plugins文件夹下面建立一个myAddImage文件夹，注意 最好文件夹得名字的大小写 ，如果你用是linux系统，那么如果把myAddImage 写成 myaddimage 那么ckeditor会获取不到，我在测试的时候就犯了这个错误。

2.在myAddImage文件夹下建立plugin.js文件。

  文件内容：

CKEDITOR.plugins.add( 'myAddImage',{
    init : function( editor )
    {   
       /*
       /* 获取CKEditorFuncNum
       */
       var getFuncNum = function(url) {
          var reParam = new RegExp('(?:[\?&]|&)CKEditorFuncNum=([^&]+)', 'i') ;
          var match = url.match(reParam) ;
          return (match && match.length > 1) ? match[1] : '' ;
        };
       /*
       /*  iframe onload处理 
        *  这段可以放在外面，根据不同的返回值自行进行处理
        */
        var getAjaxResult = function (t){
            var _id = this.getId();
            var _doc = this.getFrameDocument();
            //获取页面返回值
            var data = _doc.getBody().getHtml();
            //firebrowser的处理
            CKEDITOR.tools.callFunction(t.listenerData, data);
            this.removeListener('load', getAjaxResult);
        }

        CKEDITOR.dialog.add( 'myAddImage', function( editor )
        {
            return {
                    title : '添加图片',
                    minWidth : 400,
                    minHeight : 200,
                    contents : 
                    [
                        {
                            id : 'addImage',
                            label : '添加图片',
                            title : '添加图片',
                            filebrowser : 'uploadButton',
                            elements :
                            [
                              {    
                                  id : 'txtUrl',
                                  type : 'text',
                                  label : '图片网址',
                                  required: true
                              },
                              {
                                    id : 'photo',
                                    type : 'file',
                                    label : '上传图片',
                                    style: 'height:40px',
                                    size : 38
                              },
                              {
                                   type : 'fileButton',
                                   id : 'uploadButton',
                                   label : '上传',
                                   filebrowser :
                                   {
                                        action : 'QuickUpload',
                                        target : 'addImage:txtUrl',
                                        onSelect:function(fileUrl, errorMessage){
                                            //在这里可以添加其他的操作
                                        }
                                   },
                                   onClick: function(){
                                        var d = this.getDialog();
                                        var _photo =  d.getContentElement('addImage','photo');
                                        _funcNum = getFuncNum(_photo.action);
                                        var _iframe =  CKEDITOR.document.getById(_photo._.frameId);
                                        //可以查看ckeditor.event doc 了解此段代码
                                        //http://docs.cksource.com/ckeditor_api/
                                        _iframe.on('load', getAjaxResult, _iframe, _funcNum);
                                   },
                                   'for' : [ 'addImage', 'photo']
                              }
                            ]
                        }
                   ],
                   onOk : function(){
                       _src = this.getContentElement('addImage', 'txtUrl').getValue();
                       if (_src.match(/(^\s*(\d+)((px)|\%)?\s*$)|^$/i)) {
                           alert('请输入网址或者上传文件');
                           return false;
                       }
                       this.imageElement = editor.document.createElement( 'img' );
                       this.imageElement.setAttribute( 'alt', '' );
                       this.imageElement.setAttribute( 'src', _src );
                       //图片插入editor编辑器
                       editor.insertElement( this.imageElement );
                   }
            };
        });
        editor.addCommand( 'myImageCmd', new CKEDITOR.dialogCommand( 'myAddImage' ) );
        editor.ui.addButton( 'AddImage',
        {
                label : '图片',
                icon:'images/images.jpg', //toolbar上icon的地址,要自己上传图片到images下
                command : 'myImageCmd'
        });
    },
    requires : [ 'dialog' ]
});

 

 

 可以看出和上个文章的myeditor.js 的代码与本文中CKEDITOR.dialog.add中没有什么区别。

 关于为什么要用额外的

getAjaxResult  

是因为有很多时候，我们的返回值不一定就直接是图片web地址，可能是json数据，要进行处理。

我没有发现firebrowser的

onSelect:function(fileUrl, errorMessage){
                                            //在这里可以添加其他的操作
                                        }

会有对目标（

 target : 'addImage:txtUrl',

）

的值的更新能够处理的，不论你在onselect中对fileUrl如何赋值，都不会影响txtUrl中的值。

 

3.就是外部如何调用这个plugin了

 

 var editor = CKEDITOR.replace( id,
 {
         extraPlugins : 'myAddImage', //就是这里
         toolbar : ['Source','-','Bold','Italic','Underline','Strike','-','Link','-','Unlink','-','AddImage'],
         filebrowserUploadUrl : '/upload.php'
 });

 

你也可以在config.js里面添加

 extraPlugins : 'myAddImage'

这句话

 

评论

6 楼 pengscheng 2010-09-30  

tdwm 写道

wyongzhi 写道

楼主，_iframe.on('load', getAjaxResult, _iframe, _funcNum);这句话导致getAjaxResult 这个一直都在执行，上传成功的同时，出现了溢出错误

1.是否有返回值？
2.返回值在成功的时候可以把_iframe的onload事件去掉
看看通过以上两点能处理不？

请问楼主怎样去掉_iframe的onload时间呢？谢谢

5 楼 fulong258 2010-09-30  

楼主：我按照附件的配置好，打开页面，出现一个简单的textarea框，点击create按钮后，全部消失！但直接打开压缩包里面的index.html文件则可以正常显示，谁能帮我想想是哪方面的问题，我的是JSP

4 楼 tdwm 2010-08-12  

wyongzhi 写道

楼主，_iframe.on('load', getAjaxResult, _iframe, _funcNum);这句话导致getAjaxResult 这个一直都在执行，上传成功的同时，出现了溢出错误

1.是否有返回值？
2.返回值在成功的时候可以把_iframe的onload事件去掉
看看通过以上两点能处理不？

3 楼 wyongzhi 2010-08-10  

楼主，_iframe.on('load', getAjaxResult, _iframe, _funcNum);这句话导致getAjaxResult 这个一直都在执行，上传成功的同时，出现了溢出错误

2 楼 tdwm 2010-06-17  

hongliang19840806 写道

filebrowserUploadUrl : '/upload.php' 这里的upload.php是否需要返回值呢？还是只需要处理上传的文件即可？

需要返回值，返回值的样式可以自己设定，在getAjaxResult  函数中进行处理返回值，返回值要包含图片上传后的路径，这样你处理后，才可以把路径插入到编辑器中

1 楼 hongliang19840806 2010-06-11  

filebrowserUploadUrl : '/upload.php' 这里的upload.php是否需要返回值呢？还是只需要处理上传的文件即可？