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

相关文章

来自专栏Albert陈凯

终极 Shell-MacTalk-池建强的随想录Customize to your needs…

终极 Shell Posted on 2013 年 7 月 23 日 http://macshuo.com/?p=676 ? zsh 在开始今天的 Mac...

2998
来自专栏Golang语言社区

[Go语言]一种用于网游服务器的支持多路复用的网络协议处理框架

简介: 本文描述了使用Go语言实现的、适应于Go语言并发模型的一种支持多路复用的网络协议处理框架,并提供了框架的代码实现。作者将这种框架用于网络游戏服务器中的协...

3336
来自专栏Python攻城狮

Python可以做哪些好玩的事之自动刷票1.分析2.小试牛刀(代码基于Python 2.7)

目标网站:http://best.zhaopin.com/?sid=121128100&site=sou

892
来自专栏腾讯大数据的专栏

大型web系统数据缓存设计

1. 前言 在高访问量的web系统中,缓存几乎是离不开的;但是一个适当、高效的缓存方案设计却并不容易;所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些...

3736
来自专栏Java架构沉思录

单线程的Redis为什么这么快?

https://blog.csdn.net/xlgen157387/article/details/79470556

1003
来自专栏向治洪

android mtp简介

经作者同意,转发我们公司MTP专家同事huirong的一篇文章。大家也可在程序员第5期看到。 MTP in Android MTP的全称是Media Tra...

3826
来自专栏一名合格java开发的自我修养

IT咨询顾问:一次吐血的项目救火

  年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统。我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法...

892
来自专栏数据之美

玩转 SHELL 脚本之:Shell 命令 Buffer 知多少?

1、问题: 下午有同学问了这么一个问题: tail -n +$(tail -n1 /root/tmp/n) -F /root/tmp/ip.txt 2>...

2926
来自专栏小怪聊职场

HTTP|GET 和 POST 区别?网上多数答案都是错的!

30110
来自专栏phodal

编辑-发布-开发分离:git作为NoSQL数据库

动态网页是下一个要解决的难题。我们从数据库中读取数据,再用动态去渲染出一个静态页面,并且缓存服务器来缓存这个页面。既然我们都可以用Varnish、Squid这样...

20210

扫码关注云+社区