前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >百度 UE 编辑器 version:1_4_3_3-utf8-jsp 版 单图片以及附件上传

百度 UE 编辑器 version:1_4_3_3-utf8-jsp 版 单图片以及附件上传

原创
作者头像
世玉
修改2017-08-31 14:31:07
1.7K0
修改2017-08-31 14:31:07
举报
文章被收录于专栏:世玉的专栏

嘛,网上有很多的相关资料,但是实际可以用的基本没有,大部分都是没有经过测试就互相转载,而且也不看版本号,这就给大部分真正的开发带来了很大的困惑,而且官方文档也不健全。

这里我就是结合网上的说法,以及自己的摸索配置成功,请看好版本号,因为程序员们不可能2次写的代码都是一模一样的,所以关键点还是要理解思维。

首先要引用几个JS文件

代码语言:txt
复制
<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>

这个路径请根据实际情况来写。

然后就是写一个按钮,我这里把图片上传以及附件一并写上,方便读者观看

代码语言:txt
复制
<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个方法。

代码语言:txt
复制
<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个方法的实现,具体代码:

代码语言:txt
复制
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行这里。

代码语言:txt
复制
			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行

代码语言:txt
复制
				editor.fireEvent('beforeinsertimage',list);//增加这句,不然无法触发事件 
         editor.execCommand('insertimage', list);

这个也是 增加这句JS,变量名是个list,我猜测这里是获取一个数组,也许以前版本的代码就是使用 string 类型拼接的,然后某个版本就改了过来。

PS. 网上的信息10有8,9都是错误的,还是需要根据这些错误信息来整理思考,一味的抄袭转载,害人害己。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档