百度 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都是错误的,还是需要根据这些错误信息来整理思考,一味的抄袭转载,害人害己。

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

工欲善其事,可能会有用的Clion技巧

半年前我开始用 Clion,顺带着写了一篇心得记录使用 CLion 的技巧,没想到发布在简书后浏览量还是挺高的,居然还获得了人生中第一笔真正的打赏,感动之余也...

1792
来自专栏FreeBuf

高级CORS利用技术分享

在正式开始分享我的内容前,我要极力推荐大家去看下Linus Särud和Bo0oM发表的两篇,关于Safari特殊字符处理被滥用,导致XSS或Cookie注入的...

950
来自专栏Jerry的SAP技术分享

将C4C Service Request中的summary和其他附件同步到ERP的Billing Request去

比如现在我的Service Request有两个行项目,只有第一个需要同步到ERP去。但是第二个行项目对于客户检查Invoice来说起到重要作用,因此我们想把这...

1085
来自专栏python3

python语音识别

语音识别技术,也被称为自动语音识别,目标是以电脑自动将人类的语音内容转换为相应的文字。应用包括语音拨号、语音导航、室内设备控制、语音文档检索、简单的听写数据录入...

2744
来自专栏SeanCheney的专栏

《Learning Scrapy》(中文版)第4章 从Scrapy到移动应用选择移动应用框架创建数据库和集合用Scrapy导入数据创建移动应用创建数据库接入服务将数据映射到用户界面映射数据字段和用户组

有人问,移动app开发平台Appery.io和Scrapy有什么关系?眼见为实。在几年前,用Excel向别人展示数据才可以让人印象深刻。现在,除非你的受众分布很...

2665
来自专栏FreeBuf

看我如何破解OpenNMS哈希密码?

背景 在最近的一次渗透测试中,我拿下了一台运行OpenNMS的服务器,并获取了该服务器的root访问权限。在后利用阶段我提取了几个本地用户的哈希密码,我想尝试破...

3426
来自专栏DeveWork

iOS 7 Web App的初级优化之道

本文所涉及的内容大体上是作为《移动Web 开发中的一些前端知识收集汇总》的扩展,但只限于iOS7 系统,建议在阅读本文之前先看看该文以及《将你的网站打造成一个i...

1847
来自专栏西安-晁州

vue.js学习之入门实例

之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue、vue-cli、...

1960
来自专栏闰土大叔

我是如何在公司项目中使用ESLint来提升代码质量的

ESLint:你认识我吗 ? ESLint是一个语法规则和代码风格的检查工具。 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https:...

3278
来自专栏WeTest质量开放平台团队的专栏

腾讯内部干货分享——JMeter中3种参数值的传递

小伙伴们在使用JMeter的过程中,肯定会遇到参数值传递的问题,下面来和大家总结下,在使用JMeter做压力测试的时候,常见的3种参数值得传递是怎样的。 (一...

753

扫码关注云+社区