终于把百度编辑器的一个坑填了
本帖最后由 zxdsb666. 于 2020-10-13 00:00 编辑# 前言：
上文说道，我被百度编辑器上了套，今天，说下我的个人进展，因为我把截图粘贴的功能兼容到IE了，算是给自己的鼓励。
<!-- more -->
# 开始
其实还挺简单的，内容如下：
在`ueditor.all.js`当中，输入` domUtils.on(me.body, 'paste drop', function(e){`可以看到类似粘贴板处理的代码
我对里面的内容进行了如下的处理
```javascript
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;
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;
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 事件，以及通过事件监听处理`copy`、`paste`
3. IE和谷歌的对于剪贴板内容的不同处理方式
4. 了解了一下插件的二次开发
# 如何给百度编辑器进行插件的二次开发
https://blog.csdn.net/wiicms/article/details/46412585 百度ueditor编辑器插件开发之对话框-移动微模板插件
直接复制里面的内容
```javascript
// 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 huomavip 发表于 2020-10-13 00:50
推荐一个简洁强大的web富文本编辑器：https://www.iceui.net/iceEditor.html
好的，明天就试试，谢谢
huomavip 发表于 2020-10-13 00:50
推荐一个简洁强大的web富文本编辑器：https://www.iceui.net/iceEditor.html
这个挺不错 用新的编辑器是不是也是个好的选择呢？ 回头来学习一下， 三笙三世 发表于 2020-10-12 21:51
用新的编辑器是不是也是个好的选择呢？
嗯，这是考虑过的，百度的编辑器功能看上去最多 推荐一个简洁强大的web富文本编辑器：https://www.iceui.net/iceEditor.html 学习了。支持一下！ 谢谢分享。 市面上富文本很多，只是各有缺点，感谢分享，给个赞
页:
[1]
2