UEditor插件开发，基于Base64编码上传图片

引用下UEditor官网的介绍，阐述下Ueditor是什么。官网地址http://ueditor.baidu.com/website/。

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

  开发背景：本程序提供给站长老婆写各种游记，及各种小清新文章。但是老婆大人总抱怨上传图片不好用，每次都要先调整小于网站限制大小后才能够上传。于是乎开发需求就是这么产生了。本来是打算用ActiveX插件来解决这个问题，但是后来发现这个方案对浏览器支持并不是特别完成。所以使用html5的Canvas来解决这个问题，现在本地使用Canvas调整上传图片的长宽，然后转换成base64使用post发送到服务器。

网站后台使用的是UEditor编辑器，框架使用了ThinkPHP，所以一并使用了专门为ThinkPHP编写的UeditorController.class.php。开源社区网址：https://github.com/Nintendov/Ueditor-thinkphp

   在Ueditor提供的例子下创建一个ueditor插件。官网文档说明：http://fex.baidu.com/ueditor/#dev-developer

   在\ueditor\third-party下创建一个文件夹，取名为uploadImage

   根据网站提供的例子，将addCustomizeDialog.js复制到文件夹下面并作如下编辑

addCustomizeDialog.js

UE.registerUI('dialog', function(editor, uiName) {
    //获取当前js文件的绝对路径
    var js = document.scripts;
    var jsPath;
    for (var i = js.length; i > 0; i--) {
        if (js[i - 1].src.indexOf("addCustomizeDialog.js") > -1) {
            jsPath = js[i - 1].src.substring(0, js[i - 1].src.lastIndexOf("/") + 1);
        }
    }
    //alert(jsPath);
    //创建dialog
    var dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
        iframeUrl: jsPath+'uploadPreview.html?url='+editor.ui.serverUrl,
        //需要指定当前的编辑器实例
        editor: editor,
        //指定dialog的名字
        name: uiName,
        //dialog的标题
        title: '上传图片',
        //指定dialog的外围样式
        cssRules: "width:1024px;height:520px;",

        //如果给出了buttons就代表dialog有确定和取消
        buttons: [{
            className: 'edui-okbutton',
            label: '确定',
            onclick: function() {


                
                var jsonData=$('#'+dialog.id+'_iframe').contents().find('#jsonData').html();
                if(jsonData!='')
                {
                editor.focus();
                //jsonData.substr(1,jsonData.length-1);
                //jsonData="{\"rltData\":"+jsonData+"}";
                jsonData=jQuery.parseJSON(jsonData);
                $.each(jsonData, function(index, val) {
                    editor.execCommand('insertHtml','
');
                });
                
                dialog.close(true);}
                else
                {
                    alert('请上传文件后点击【确定】');
                }
            }
        }, {
            className: 'edui-cancelbutton',
            label: '取消',
            onclick: function() {
                dialog.close(false);
            }
        }]
    });

    //参考addCustomizeButton.js
    var btn = new UE.ui.Button({
        name: 'dialogbutton' + uiName,
        title: 'dialogbutton' + uiName,
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules: 'background-position: -580px 0;',
        onclick: function() {
            dialog.render();
            dialog.open();
        }
    });

    return btn;
} /*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/ );

由于Ueditor的对话框插件是通过iframe实现的，所以还需要创建一个网页。取名为uploadPreview.html，引用css文件为fileinput.css，是一个Jquery的第三方插件的UI。实现逻辑不再赘述，直接帖代码。

uploadPreview.html

    
    
    
    
    
    body {
        height: 440px;
        overflow: hidden;
    }
    
    form {
        margin-left: 15px;
    }
    
    .browse-btn {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        cursor: pointer;
    }
    
    .browse-btn:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
        cursor: pointer;
    }
    
    #upload-Img {
        width: 144px;
        height: 41px;
        cursor: pointer;
        font-size: 30px;
        outline: medium none;
        position: absolute;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0;
        left: 0px;
        top: 0px;
    }
    
    #uploadEach {
        float: left;
    }
    
    form {
        width: 100%;
    }