文档章节

文件上传插件 ueditor 独立上传功能

孙帅帅
 孙帅帅
发布于 2016/11/10 08:50
字数 574
阅读 2313
收藏 4

    找了许多文件上传插件,有的会影响自己的样式,有的用起来太复杂,有的浏览器兼容性太差。研究了一阵子百度家的ueditor,发现他家富文本里面的文件上传样式挺好看,于是整理了一下使用方法。插件的配置、引入,就不多说了,官网文档都有,下面介绍如何独立出来:

简单写的一个小栗子(https://git.oschina.net/sunss/ueditor_upload)

1.首先,必须的,你需要一个按钮,点击弹出文件上传,比如:

<a href="javascript:void(0)" onclick="upFiles()">上传教案</a>

2.接下来就是onclick事件了:

//弹出文件上传的对话框
function upFiles() {
    var myFiles = ue.getDialog("attachment");
    myFiles.open();
}

当然上面是上传文件,下面是上传照片,两个的区别在于。。。提供的功能不同

//上传图片
function upImage() {
    var myImage = ue.getDialog("insertimage");
    myImage.open();
}

3.接着你需要一个文件上传成功之后执行的方法:

//上传文件成功
function okUpload(list){
	var content = "已选择:"
	var fileD = dialog({
		title:"上传教案",
		okValue : '确定',
		ok : function() {
			this.title('提交中…');
			submitPlan(fileD);
			return false;
		},
		cancelValue : '取消',
		cancel : function() {}
	});
	fileD.showModal();
	fileD.content(content+list);
}

4.然后,最重要的一步到了,修改源码!ueditor.all.js   大约在24820行上  让插件点击确认按钮后执行我们的方法。里面的html参数里面的html可以自己根据需要修改。

 execCommand: function (command, filelist){
                     filelist = utils.isArray(filelist) ? filelist : [filelist];
                     if(me.fireEvent('afterUpfile', filelist) === true){
                         return;
                     }
                     var i, item, icon, title,
                         html = '',
                         URL = me.getOpt('UEDITOR_HOME_URL'),
                         iconDir = URL + (URL.substr(URL.length - 1) == '/' ? '':'/') + 'dialogs/attachment/fileTypeImages/';
                     for (i = 0; i < filelist.length; i++) {
                         item = filelist[i];
                         icon = iconDir + getFileIcon(item.url);
                         title = item.title || item.url.substr(item.url.lastIndexOf('/') + 1);
                         html += '<p style="line-height: 16px;">' +
                             '<img style="vertical-align: middle; margin-right: 2px;" src="'+ icon + '" _src="' + icon + '" />' +
                             '<a name="upload_file" style="font-size:12px; color:#0066cc;" href="' + item.url +'" title="' + title + '">' + title + '</a>' +
                             '</p>';
                     }
                     okUpload(html);//执行自己方法
                     me.execCommand('insertHtml', html);
                }

5.在html中实例化编辑器。这个应该都知道,然后把编辑器隐藏,因为我们只需要他的上传功能:

<!-- 实例化编辑器 -->
<script type="text/javascript">
  var ue = UE.getEditor('contents');
    ue.addListener("ready", function () {
    UE.getEditor('contents').setHide();
  });
</script>   
<script id="contents"  type="text/plain"></script>
<textarea style="display:none;" name="contents" id="sss" class="tip_textarea3"></textarea>

6.运行之后效果如下

 

用得着的童鞋可以点个赞呗。有不明白的地方可以加我QQ或者群里,有问必答

QQ群:530456619

QQ:707012377

© 著作权归作者所有

孙帅帅
粉丝 5
博文 12
码字总数 10050
作品 0
青岛
程序员
私信 提问
fedkey/UEditor-KityFormula-for-wordpress

基本信息 UEditor-KityFormula for wordpress基于Ueditor,UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,轻量,可定制,用户体验好。本插件将wordpress与ueditor编辑...

fedkey
01/04
0
0
集成到 Django 的 Ueditor HTML 编辑器--DUEditor

DUEditor 是 Django 的 UEditor 插件。 本项目改造自DjangoUeditor,Ueditor HTML编辑器是百度开源的HTML编辑器。 本模块帮助在Django应用中集成百度Ueditor HTML编辑器,支持Python3,上传...

dhcn
2017/10/02
2.5K
1
修改uedit,使其支持上传和使用七牛的图片

Ueditor (http://ueditor.baidu.com/website/) 是一个网页内的富文本编辑器组件。其中有一个功能是插入图片。当用户使用插入图片功能时,要从本机上传图片,然后再把图片url插入到富文本中。...

bitbone
2016/03/02
152
24
更改wordpress内置编辑器

首先下载百度Ueditor:点击下载 1.将wp-ueditor下面的ueditor目录上传至你的wordpress博客目录中的wp-content/plugins目录。 2.将ueditor.class.php文件和main.php文件上传至wp-content/plug...

ShareYkuaile
2014/12/18
136
0
nodeJS部署ueditor富文本编辑器

在做一个私人项目的时候需要用到在线富文本编辑器,多方寻觅后选定百度的ueditor,不过,竟然不支持nodeJS后台。 查! 找很多博客,很多教程,最后捋了一个自认为还算清晰的思路来。 以独立小...

飞翔的熊blabla
01/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面试官问:平时碰到系统CPU飙高和频繁GC,你会怎么排查?

处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题。当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警。本文主要针对系统运...

Java高级架构师n
25分钟前
10
0
面向对象编程

1、类和对象 类是对象的蓝图和模板,而对象是实例;即对象是具体的实例,类是一个抽象的模板 当我们把一大堆拥有共同特征的对象的静态特征(属性)和动态特征(行为)都抽取出来后,就可以定...

huijue
今天
14
0
redis异常解决 :idea启动本地redis出现 jedis.exceptions.JedisDataException: NOAUTH Authentication required

第一次安装在本地redis服务,试试跑项目,结果却出现nested exception is redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication required错误,真是让人头疼 先检查一...

青慕
今天
27
0
Spring 之 IoC 源码分析 (基于注解方式)

一、 IoC 理论 IoC 全称为 Inversion of Control,翻译为 “控制反转”,它还有一个别名为 DI(Dependency Injection),即依赖注入。 二、IoC方式 Spring为IoC提供了2种方式,一种是基于xml...

星爵22
今天
31
0
Docker安装PostgresSql

Docker安装PostgresSql 拉取docker镜像 # docker pull postgres:10.1010.10: Pulling from library/postgres9fc222b64b0a: Pull complete 38296355136d: Pull complete 2809e135bbdb: Pu......

Tree
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部