前言：
juejin.cn/post/688224…上文说道，我被百度编辑器上了套，今天，说下我的个人进展，因为我把截图粘贴的功能兼容到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和谷歌的对于剪贴板内容的不同处理方式
- 了解了一下插件的二次开发
如何给百度编辑器进行插件的二次开发
blog.csdn.net/wiicms/arti… 百度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复制一个别人发的图片，贴到百度编辑器，好，内网地址又暴露了（卒）。。。。。
参考资料
使用开源插件读取word内容：blog.csdn.net/eiceblue/ar…
java 使用POI操作word获取样式：blog.csdn.net/qq_41129811…
可以学习一下poi 是如何获取到样式和内容的
js中使用Clipboard API获取剪贴板内容[blog.csdn.net/haoaiqian/a…allfirst_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)
获取剪贴板数据：blog.csdn.net/iteye_4865/…
js 文本框监听粘贴事件，获取粘贴板上的图片数据：blog.csdn.net/luyangbin01…
js处理剪贴板的内容：[blog.csdn.net/qq_31411389…allfirst_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)
