百度 UE 编辑器 version:1_4_3_3-utf8-jsp 版 单图片以及附件上传
原创百度 UE 编辑器 version:1_4_3_3-utf8-jsp 版 单图片以及附件上传
原创
嘛，网上有很多的相关资料，但是实际可以用的基本没有，大部分都是没有经过测试就互相转载，而且也不看版本号，这就给大部分真正的开发带来了很大的困惑，而且官方文档也不健全。
这里我就是结合网上的说法，以及自己的摸索配置成功，请看好版本号，因为程序员们不可能2次写的代码都是一模一样的，所以关键点还是要理解思维。
首先要引用几个JS文件
<script type="text/javascript" charset="utf-8" src="../../static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../static/ueditor/ueditor.all.min.js"> </script>
<script src="../../static/js/jquery-1.11.3.js"></script>这个路径请根据实际情况来写。
然后就是写一个按钮，我这里把图片上传以及附件一并写上，方便读者观看
<input type="text" id="picture" name="cover" /><input type="button" onclick="upImage();" value="上传图片" />
<input type="text" id="file" /><input type="button" onclick="upFiles();" value="上传附件" />注意：这里的ID，一定要写对，不然JS获取不到目标对象，这个id在下文中会出现。
然后就是实例化一个隐藏的编辑器插件，并且写一个js文件，里面装的就是这2个方法。
<script id="upload_ue" type="text/plain" style="width:0;height:0;display:none;"></script>
<script src="../../static/js/UE-upfile.js"></script>注意:这里实例化的编辑器插件就是id为upload_ue的这句js，这个要写在body内部，不然读取不到。
UE-upfile.js
这份js的内容就是2个方法的实现，具体代码:
var _editor;
$(function() {
//重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
_editor = UE.getEditor('upload_ue');
_editor.ready(function() {
//设置编辑器不可用
_editor.setDisabled();
//隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
_editor.hide();
//侦听图片上传
_editor.addListener('beforeInsertImage', function(t, arg) {
//将地址赋值给相应的input,只去第一张图片的路径
$("#picture").attr("value", arg[0].src);
//图片预览
$("#preview").attr("src", arg[0].src);
})
//侦听文件上传，取上传文件列表中第一个上传的文件的路径
_editor.addListener('afterUpfile', function(t, arg) {
$("#file").attr("value", _editor.options.filePath + arg[0].url);
})
});
});
//弹出图片上传的对话框
function upImage() {
var myImage = _editor.getDialog("insertimage");
myImage.open();
}
//弹出文件上传的对话框
function upFiles() {
var myFiles = _editor.getDialog("attachment");
myFiles.open();
}然后需要修改UE里面的2个js，一个是image.js 一个是attachment.js
都是在 dialogs 文件夹之下， 据说是百度那边的BUG，我估计也是,哪里有插件还需要我们使用方来修改代码的呢。
attachment.js 80行这里。
editor.fireEvent('afterUpfile', list);//添加这句话
editor.execCommand('insertfile', list);注意:网上很多错误就是抄袭错误，把这里的attachment.js 写成attachment.html 以及 editor.fireEvent('afterUpfile', list); 这个写成fileslist。
editor.execCommand('insertfile', list); 这句写成 editor.execCommand('insertfile', str);
虽然不知道是不是因为版本原因，但是这个是很不负责的，以讹传讹，导致很多开发者困惑。
这里我提一句，也许我正在写这份文章的时候代码还是这样，或者百度那里以及改了又一种变量，但是这个思维是不会变的，也就是这个地方他会执行一条命令，变量要依据上下文来看，并且看注释写了是不是文件上传相关的。
image.js 107行
editor.fireEvent('beforeinsertimage',list);//增加这句,不然无法触发事件
editor.execCommand('insertimage', list);这个也是 增加这句JS，变量名是个list，我猜测这里是获取一个数组，也许以前版本的代码就是使用 string 类型拼接的，然后某个版本就改了过来。
PS. 网上的信息10有8,9都是错误的，还是需要根据这些错误信息来整理思考，一味的抄袭转载，害人害己。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。