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

相关文章

来自专栏MasiMaro 的技术博文

SDK平台三态按钮的实现

Windows平台提供了丰富的控件,但是在使用中我们不会使用它提供的默认风格,有时候需要对控件进行改写,让它展现出更友好的一面,这次主要是说明三态按钮的实现。

1044
来自专栏林德熙的博客

如何使用 C# 爬虫获得专栏博客更新排行

昨天,梦姐问我们,她存在一个任务,找到 关注数排行100 和 浏览量排行100 的专栏博客,在2017年还有更新的专栏。 梦姐说他要出去一趟,M大神在吃饭,于是...

421
来自专栏潇涧技术专栏

Mou and StackEdit and Mathjax

本文记录使用Mou和Stackedit中出现的一些问题,使其能够正常渲染带数学公式的文章

661
来自专栏企鹅号快讯

一次垃圾邮件的分析

本篇文章来自同事对一次垃圾邮件的分析: 上周一(12月4号),朋友给我转发了一封垃圾邮件,邮件里面附带一个word文档,我们俩都是搞信安,自然察觉一丝危险的气味...

1867
来自专栏Google Dart

开始使用-编写你的第一个Flutter应用程序 顶

这是创建您的第一个Flutter应用程序的指南。 如果您熟悉面向对象的代码和基本编程概念(如变量,循环和条件),则可以完成本教程。 您不需要以前使用Dart或移...

552
来自专栏V站

python实现生成验证码的逻辑

1898
来自专栏程序猿DD

我最常用的Intellij IDEA快捷键

原文:http://www.radcortez.com/my-most-useful-intellij-idea-keyboard-shortcuts/ 译文:...

1898
来自专栏FreeBuf

对自助提卡系统的一次代码审计

并非有意愿要审计该站,前面的走的黑盒没有过于精彩部分就不在贴上了,对于此系统站你们懂的,多说无益,这套程序是开源的,像这种自助提卡系统相信大家已经不在陌生了,很...

723
来自专栏Crossin的编程教室

【Pygame 第1课】 hello pygame

我们已经把python的基本内容讲得差不多了,所以从今天起,尝试一下新的方面:pygame -- 用python来写游戏。 pygame是一个python的游戏...

31910
来自专栏机器学习算法与Python学习

Python:爬虫系列笔记(1) -- 综述

转自:静觅 » Python爬虫入门一之综述 大家好哈,最近博主在学习Python,学习期间也遇到一些问题,获得了一些经验,在此将自己的学习系统地整理下来,如果...

3204

扫码关注云+社区