终于把百度编辑器的一个坑填了-CFANZ编程社区

前言：

上文说道，我被百度编辑器上了套，今天，说下我的个人进展，因为我把截图粘贴的功能兼容到IE了，算是给自己的鼓励。

开始

其实还挺简单的，内容如下：

在ueditor.all.js当中，输入 domUtils.on(me.body, 'paste drop', function(e){可以看到类似粘贴板处理的代码

我对里面的内容进行了如下的处理

if(isIE()){
    var text = window.clipboardData.getData('Text');
    if(text == null){
        var items=clipboardData.files;
        for (var i = 0, len = items.length; i < len; i++) {
            var item = items[i];
            if ( item.type.indexOf('image/') !== -1 ) {
                //上传到服务器
                sendAndInsertFile(item,me);
                //阻止默认事件, 避免重复添加;
                e.preventDefault();
            }
        }
    }
}else{
    var hasImg = false,
        items;
    //获取粘贴板文件列表或者拖放文件列表
    items = e.type == 'paste' ? getPasteImage(e):getDropImage(e);
    if(items){
        var len = items.length,
            file;
        while (len--){
            file = items[len];
            if(file.getAsFile) file = file.getAsFile();
            if(file && file.size > 0) {
                sendAndInsertFile(file, me);
                hasImg = true;
            }
        }
        hasImg && e.preventDefault();
    }
}

判断是否为IE，是IE特殊处理
使用IE特定的获取粘贴板的内容
获取到文件内容，调用百度编辑器的上传方法，将粘贴板的内容上传到服务器。

关于word粘贴内容到富文本编辑框

今天大部分时间都在纠结这玩意，后续考虑自己二次开发插件做二次处理，明天果断和前端配合试下效果。

今天还是了解到不少内容的：

了解了一下Base64 的内容
js如何处理 copy 、paste 时间，以及通过事件监听处理copy、paste
IE和谷歌的对于剪贴板内容的不同处理方式
了解了一下插件的二次开发

如何给百度编辑器进行插件的二次开发

百度ueditor编辑器插件开发之对话框-移动微模板插件

直接复制里面的内容

// TODO 为百度编辑器开发一个新插件
    UE.registerUI('dialog',function(editor,uiName){

    //创建dialog
    var dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
        iframeUrl:editor.ui.UEDITOR_HOME_URL+"p/uet.html",
        //需要指定当前的编辑器实例
        editor:ue,
        //指定dialog的名字
        name:uiName,
        //dialog的标题
        title:"微信模板",
        //指定dialog的外围样式
        cssRules:"width:540px;height:400px;",
        //如果给出了buttons就代表dialog有确定和取消
        buttons:[
            {
                className:'edui-okbutton',
                label:'确定',
                onclick:function () {
                    dialog.close(true);
                }
            },
            {
                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: -500px 0;',
            onclick:function () {
                //渲染dialog
                dialog.render();
                dialog.open();
            }
        });
        return btn;
    }/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);
    //TODO 为百度编辑器开发一个新插件

fex.baidu.com/ueditor/#de… 官方文档解答如何开发二次插件

最后：

工作之余随手写下，前端知识UP，回家继续学习去咯。

来，我们随手从QQ复制一个别人发的图片，贴到百度编辑器，好，内网地址又暴露了（卒）。。。。。

终于把百度编辑器的一个坑填了_JavaScript

参考资料

使用开源插件读取word内容：

java 使用POI操作word获取样式：

可以学习一下poi 是如何获取到样式和内容的

js中使用Clipboard API获取剪贴板内容[blog.csdn.net/haoaiqian/a…~~all~~first_rank_v2~rank_v25-1-100929143.nonecase&utm_term=ie%20js%20%E8%8E%B7%E5%8F%96%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%86%85%E5%AE%B9&spm=1000.2123.3001.4430](blog.csdn.net/haoaiqian/a… js 获取剪贴板内容&spm=1000.2123.3001.4430)

获取剪贴板数据：

js 文本框监听粘贴事件，获取粘贴板上的图片数据：

js处理剪贴板的内容：[…~~all~~first_rank_v2~rank_v25-3-53007675.nonecase&utm_term=ie%20js%20%E8%8E%B7%E5%8F%96%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%86%85%E5%AE%B9&spm=1000.2123.3001.4430](blog.csdn.net/qq_31411389… js 获取剪贴板内容&spm=1000.2123.3001.4430)