前言：
上文说道，我被百度编辑器上了套，今天，说下我的个人进展，因为我把截图粘贴的功能兼容到IE了，算是给自己的鼓励。
<!-- more -->
开始
其实还挺简单的，内容如下：
在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和谷歌的对于剪贴板内容的不同处理方式
- 了解了一下插件的二次开发
如何给百度编辑器进行插件的二次开发
https://blog.csdn.net/wiicms/article/details/46412585 百度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 为百度编辑器开发一个新插件
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-2~all~first_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-2~all~first_rank_v2~rank_v25-3-53007675.nonecase&utm_term=ie
富文本编辑器实现从word中复制图片(外挂)：https://www.hellojava.com/a/92356.html
[复制链接]
发表于 2020-10-12 21:15
|
发表于 2020-10-13 01:02
