ckeditor 上传附件

接到了一个需求,需要在邮件编辑的时候加附件,要在编辑区加个小按钮,点击以后实现多个上传。先放成品:

三步走:把按钮放进去、点击以后开始上传(带进度条)、上传完我点击就能下载


1、加按钮

ckeditor的api真是看似精良其实啥也找不到啊,Stack Overflow才艰难找到

var extraPlugins = "base64image,pastebase64,font,stopimagepaste,BombBomb"
if(+self.customerFieldType === 2){
    CKEDITOR.plugins.addExternal('attachment', self.pluginAttachmentUrl, '');
    extraPlugins += ',attachment';
}

在编辑器配置下用ckeditor.plugins.addExtternal()这个函数,第二个参数就是添加的plugin的js url;然后pluginjs继续添加以下:

CKEDITOR.plugins.add('attachment', {
            init: function (editor) {
                editor.ui.addButton('attachment',
                {
                    label: 'Attach File(s)',
                    icon:'http://static.chimeroi.com/crm/images/people-detail/attachment.png',
                    className:'attachButton',
                    modes : { source : 0, wysiwyg : 1, enhancedsource : 0 },
                    click: function(e){
                    }
                });
            }
        });

就这么写就完成了第一步,前三个参数很好理解,后两个是官网api里都没有的参数,wusiwyg:1代表button按下去样式不会改变,0的话按下去就一直陷下去了。


2、点击上传

千辛万苦弄了个click事件,现在只要点击input type="file"就可以开始上传了,可是这个input标签上哪里加呢,就盯准了label:'<input type="file" class="attach-input" multiple>',一试居然可以,可惜报错了。那既然一开始加不进去,那只有点击的时候加进去,然后再click()了。

$('.attachButton').after('<input type="file" class="attach-input" multiple>').next('input.attach-input').click();
$("input[type='file'].attach-input").on('change', function() {
    for (var i=0;i<this.files.length;i++) {
         file = this.files[i];
         upload(file);
    }
})

由于可以同时多个上传就循环upload了;
upload主要用formData就可以了,主要这个progress标签h5新增的,感觉挺好用的。

<progress class="uploadprogress" min="0" max="100" value="0">0</progress>
duringCallback: function(complete) {
       var progress = $input.find('.uploadprogress')[0];
       progress.value = progress.innerHTML = complete;
}

代码我也是抄的阮一峰的所以这里就贴个链接可以看下


3、点击下载

上传成功的回调里,后端给我返回了cdn中的存储地址,我只要在a标签的href加上这个地址后点击就可以下载了,这个我也是很晚才知道,有的文件会在网页里默认打开所以最好再加一个download="name"属性。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注