ckeditor添加自定义按钮整合swfupload实现批量上传图片
 
给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能
1、首先下载并安装ckeditor。
2、下载swfupload解压拷贝到对应的文件目录下
3、自定义工具栏按钮:
我们可以自定义ckeditor工具栏要显示的按钮，工具栏按钮定义可以参考这里。
现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\ 目录中。我们在ckeditor\plugins\中创建一个新文件夹imagedef。在imagedef文件夹内，我们创建一个plugin.js文件，它的代码如下：
CKEDITOR.plugins.add(
        "imagedef",
小程序editor样式大全
        {
            requires:["dialog"], //当按钮触发时弹出对话框
            init:function (a)
            {
                a.addCommand("imagedef", new CKEDITOR.dialogCommand("imagedef"));
                a.ui.addButton(
                    "Imagedef",
                    {
                        label:"图片",
                        command:"imagedef",
                        icon:this.path + "imagedef.gif"
                    });
                CKEDITOR.dialog.add("imagedef", this.path + "dialogs/imagedef.js");
            }
        }
);
在上面的代码中我们指定自定义按钮的图标imagedef.gif，imagedef.gif放在imagedef文件夹中。
在imagedef文件夹下新建一个dialogs目录，在dialogs目录下新建一个imagedef.js文件，就是上面代码调用的imagedef.js文件
CKEDITOR.dialog.add(
        "imagedef",
        function (b)
        {
            return {
                title:"图片",
                minWidth:590,
                minHeight:300,
                contents:[{
                        id:"tab1",
                        label:"",
                        title:"",
                        expand:true,
                        padding:0,
                        elements:[{
                                type:"html",
                                html:initImageDlgInnerHtml() //对话框中要显示的内容，这里的代码将发在下面
                        }]
                }],
                onOk: function(){ //对话框点击确定的时候调用该函数
                    var D = this;
                    var imes = getCkUploadImages();//获取上传的图片，用于取路径，将图片显示在富文本编辑框中
                    $(imes).each(function(){
                        D.imageElement = ateElement('img');
                        D.imageElement.setAttribute('alt', '');
                        D.imageElement.setAttribute('_cke_saved_src', $(this).attr("src"));
                        D.imageElement.setAttribute('src', $(this).attr("src"));
                        DmitContent(1, D.imageElement);
                        if (!Attribute('style')){
                            veAttribute('style');
                        }
                        b.insertElement(D.imageElement);
                    });
                },
                onLoad: function(){ //对话框初始化时调用
                    initEventImageUpload(); //用于注册上传swfupload组件
                },
                onShow:function(){
                    clearCkImageUpload(); //在对话框显示时作一些特殊处理
                }
            };
        }
);
 
接下来我们需要注册imagedef插件。原文中的给出方法是在ckeditor.js中注册，这会使以后升级新版本遇到困难。提倡使用下面的方法在config.js中注册自定义插件：
CKEDITOR.editorConfig = function( config )
{
    lbar_Full = [                                               
                  ['Source','Preview','-','Templates'],
                  ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                  ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButto
n', 'HiddenField'],
                          '/',
                          ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                          ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
                          ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                          ['Link','Unlink','Anchor'],
                          ['Imagedef','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                          '/',
                          ['Styles','Format','Font','FontSize'],
                          ['TextColor','BGColor']
                          ];
    size_maxWidth = 775;
    vePlugins='elementspath';//去掉文本框下面出现body p 等
    aPlugins="imagedef"; //注册自定义按钮
};
 
最后，在ckeditor中显示自定义按钮linkbutton，代码如下：
下面代码是在页面上写的，当然可以根据自己的需求来定，写在什么位置
//编辑框初始化上传图片的回调----------自定义按钮插件
function initImageDlgInnerHtml(){ //这是在对话框中要显示的内容
    var iHtml = "<div style='float:left;width:100%'>上传到服务器上</div>" ;
        iHtml += "<div style='float:left;width:100%;' class='setUpload'>";
        iHtml += "<div style='float:left;height:24px;width:82px' class='su_img'><span id='ck_btn_id'>dssdf</span></div>";
        iHtml += "<div style='float:left' id='ck_fs_upload_progress'>未选择文件</div>";
        iHtml += "</div>";
        iHtml += "<div style='float:left;width:100%'><input id='stop_id' type='button' vlaue='终止'/><input id='ck_btn_start' class='cke_dialog_start_button_z' type='button' value='开始上传' style='float:left' onclick='ckUploadImageStart();'/></div>";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。