前言:
上文说道,我被百度编辑器上了套,今天,说下我的个人进展,因为我把截图粘贴的功能兼容到IE了,算是给自己的鼓励。
开始
其实还挺简单的,内容如下:
在ueditor.all.js
当中,输入domUtils.on(me.body, 'paste drop', function(e){
可以看到类似粘贴板处理的代码
我对里面的内容进行了如下的处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| 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和谷歌的对于剪贴板内容的不同处理方式
- 了解了一下插件的二次开发
如何给百度编辑器进行插件的二次开发
https://blog.csdn.net/wiicms/article/details/46412585 百度ueditor编辑器插件开发之对话框-移动微模板插件
直接复制里面的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| // 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 为百度编辑器开发一个新插件
|
http://fex.baidu.com/ueditor/#dev-developer 官方文档解答如何开发二次插件
最后:
工作之余随手写下,前端知识UP,回家继续学习去咯。
来,我们随手从QQ复制一个别人发的图片,贴到百度编辑器,好,内网地址又暴露了(卒)。。。。。
参考资料
使用开源插件读取word内容:https://blog.csdn.net/eiceblue/article/details/89519297
java 使用POI操作word获取样式:https://blog.csdn.net/qq_41129811/article/details/102570726
可以学习一下poi 是如何获取到样式和内容的
js中使用Clipboard API获取剪贴板内容:https://blog.csdn.net/haoaiqian/article/details/100929143?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-1-100929143.nonecase&utm_term=ie
获取剪贴板数据:https://blog.csdn.net/iteye_4865/article/details/82200986
js 文本框监听粘贴事件,获取粘贴板上的图片数据:https://blog.csdn.net/luyangbin01/article/details/69525776
js处理剪贴板的内容:https://blog.csdn.net/qq_31411389/article/details/53007675?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-3-53007675.nonecase&utm_term=ie
富文本编辑器实现从word中复制图片(外挂):https://www.hellojava.com/a/92356.html