爱看书的阿东

赐他一块白色石头,石头上写着新名

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

前言:

上文说道,我被百度编辑器上了套,今天,说下我的个人进展,因为我把截图粘贴的功能兼容到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();
}
}
  1. 判断是否为IE,是IE特殊处理
  2. 使用IE特定的获取粘贴板的内容
  3. 获取到文件内容,调用百度编辑器的上传方法,将粘贴板的内容上传到服务器。

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

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

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

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

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

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复制一个别人发的图片,贴到百度编辑器,好,内网地址又暴露了(卒)。。。。。

img

参考资料

使用开源插件读取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