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

最新推荐文章于 2024-02-02 16:42:01 发布

最新推荐文章于 2024-02-02 16:42:01 发布 · 427 阅读

文章标签：

本文介绍如何为CKEditor构建自定义图片上传插件，包括创建插件文件夹、编写JS代码及如何在编辑器中启用该插件。

在上一个文章中，介绍了自己写的一个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('(?:[\?&]|&amp;)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里面添加