使用UEditor编辑器自带的插件实现图片上传和文件上传功能，这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传，通过对UEditor配置轻松实现图片批量上传，文件披批量上传

第一步：先配置UEditor

<script src="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    var editor = UE.getEditor('myEditor', {
        initialFrameWidth: 800,
        initialFrameHeight: 300,
    });
</script>

第二步：放置编辑器

<script type="text/plain" id="myEditor"></script>

第三步：以上已经把UEditor部署好了，下面实现单独使用图片和文件上传

<script type="text/javascript">
    //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
    var _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();
    }
</script>

第四步：最后一步，对文件上传非常重要，在ueditor文件夹中找到文件dialogs\attachment\attachment.html中找到代码editor.execCommand("insertHTML",str);在上面添加下面的代码

editor.fireEvent('afterUpfile', filesList);

然后在<body></body>中随便找个位置放置这个编辑器

<script type="text/plain" id="upload_ue"></script>

说明：可以把两次初始化编辑的代码合并一起放到文件最后的</body>前面，图片上传的配置就不说了，附件中例子已经配置好了，下载下来参考一下就行。转载请标明出处。

源码下载：点击下载

百度开源富文本编辑器 UEditor配置：图片上传和文件上传独立使用方法的更多相关文章

  1. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  2. 使用百度的富文本编辑器UEditor遇到的问题总结

    1.下载地址:http://ueditor.baidu.com/website/download.html(我下载的是.net版本) 下载后要先看一下ueditor.config.js和 net/co ...

  3. 百度的富文本编辑器UEDITOR

    还是百度的ueditor 比较好用,文件导入后,基本不用配置就可以直接使用图片,文件上传等功能. CKeditor要注意的地方太多了 .但是相对ckeditor 样式比较好看.

  4. 百度的富文本编辑器UEditor批量添加图片自动加上宽度和高度的属性

    若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸 所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件 在image.js中 ...

  5. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  6. 富文本编辑器UEditor自定义工具栏（二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符）

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  7. 关于富文本编辑器—UEditor（java版）的使用，以及如何将UEditor的文件/图片上传路径改成绝对路径

    突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...

  8. springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  9. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

随机推荐

  1. POJ1201 Intervals差分约束系统（最短路）

    Description You are given n closed, integer intervals [ai, bi] and n integers c1, ..., cn. Write a p ...

  2. poj1222 EXTENDED LIGHTS OUT 高斯消元||枚举

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8481   Accepted: 5479 Description In an ...

  3. ASP.NET MVC3 中整合 NHibernate3.3、Spring.NET2.0 时 Session 关闭问题

    一.问题描述 在向ASP.NET MVC中整合NHibernate.Spring.NET后,如下管理员与角色关系: 类public class Admin { public virtual strin ...

  4. 《Getting Started with Storm》章节一 基础

    注:括号里的字,并且是(灰色)的,是我个人的理解,如有差错,欢迎交流 Storm是一个分布式的.可靠的.容错的数据流处理系统(流式计算框架,可以和mapreduce的离线计算框架对比理解).整个任务被 ...

  5. POJ3613 Cow Relays（矩阵快速幂）

    题目大概要求从起点到终点恰好经过k条边的最短路. 离散数学告诉我们邻接矩阵的k次幂就能得出恰好经过k条路的信息,比如POJ2778. 这题也一样,矩阵的幂运算定义成min,而min满足结合律,所以可以 ...

  6. BZOJ4112 : [Wf2015]Pipe Stream

    枚举答案,考虑将速度区间等长地划分成若干个小区间. 设$n_i$表示$i$次敲击能得到的区间数,$v_i$表示$i$次敲击之后答案落在$[v1,v_i]$之间,则$n_0=1,v_0=v2$. 因为对 ...

  7. BZOJ4382 : [POI2015]Podział naszyjnika

    对于每种颜色,可以发现可以切的位置被分割成了若干段独立的区域. 给每个区域一个编号,将$m$种颜色的情况当成字符串来看,如果两个切口的字符串完全匹配,那么可以在这里切两刀. 可以构造hash函数,通过 ...

  8. Activiti工作流学习（二）流程实例、执行对象、任务

    一.前言 前面说明了基本的流程部署.定义,启动流程实例等基本操作,下面我们继续来学习流程实例.执行对象.任务. 二.流程实例.执行对象说明 整个Activiti的生命周期经过了如下的几个步骤: 1.流 ...

  9. ACM 矩形的个数

    矩形的个数 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 在一个3*2的矩形中,可以找到6个1*1的矩形,4个2*1的矩形3个1*2的矩形,2个2*2的矩形,2个3 ...

  10. Oracle常用监控SQL

    1.监控事例的等待: select event,sum(decode(wait_time,0,0,1)) prev, sum(decode(wait_time,0,1,0)) curr,count(* ...