百度 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 条评论
登录 后参与评论

相关文章

来自专栏社区的朋友们

Amazon Aurora 深度探索(一)

本文对 Aurora 系统的实现从整体架构、存储、事务处理三个方面进行深入探讨,基于其论文和相关资料讨论具体实现细节,又跳出其外、从数据库内核技术实现的角度对 ...

2.5K20
来自专栏西安-晁州

js返回树形结构数据

/** * 树形结构转换 * @param a * @param idStr * @param pidStr * @param chindrenStr...

51300
来自专栏西安-晁州

easyui内嵌iframe问题解决

项目中使用easyui的tab页,每个tab页均内嵌iframe,现在要在tab页中控制新增一个同级别的tab页,记录如下: 首先是main.html主页面: ...

41900
来自专栏高爽的专栏

Aptana:JavaScript开发利器

简介        Aptana是一个非常强大、开源的专注于Ajax开发的开发工具,看下开源中国社区中对它的功能描述: JavaScript,JavaScri...

27600
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu....

25600
来自专栏高爽的专栏

oncopy和onpaste

       在Javascript中,有相应的事件可以监听复制和粘贴,那就是oncopy和onpaste。        oncopy: demo: <bo...

24700
来自专栏谭正中的专栏

TensorFlow 入门(2):使用DNN分类器对数据进行分类

本文作者通过分析《高级API入门教程》这篇文章中的实例:教我们如何使用DNN(深度神经网络)分类器实现对鸢尾花的分类,并对其提出举一反三的案例,提升学习效果,并...

15.5K40
来自专栏Script Boy (CN-SIMO)

[JavaScript]自执行函数

最近在接触mui的时候,遇到了一段代码: 1 (function($, doc) { 2 $.init({ 3 ...

31900
来自专栏高爽的专栏

JS判断滚动条是否停止滚动

       背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。        分析...

47300
来自专栏腾讯IVWEB团队的专栏

Promise 实践

promise已经是成为我们解决回调炼狱的常用方案,而且已经得到官方标准支持,如果你刚刚开始使用Promise,本文将帮助你了解几个常见的几个Promise的使...

35000

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励