第一步, 引入文件

<script src="ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
<script src="ueditor/ueditor.all.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../jquery.min.js" type="text/javascript" charset="utf-8"></script>

第二步 html元素

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

调用的页面:
<input type="text" id="picture" name="cover" /><a href="javascript:void(0);" onclick="upImage();">上传图片</a>
<input type="text" id="file" /><a href="javascript:void(0);" onclick="upFiles();">上传文件</a>

第三步 编写js代码

<script type="text/javascript">

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();
}
</script>

第四步 最重要的一步, 修改bug

打开image插件的image.js 108行
editor.execCommand('insertimage', list);代码之前加入
editor.fireEvent('beforeinsertimage', list);然后问题搞定

在ueditor文件夹中找到文件dialogs\attachment\attachment.html中找到代码

editor.execCommand("insertHTML",str);代码之前加入

editor.fireEvent('afterUpfile', filesList);然后问题搞定

Ueditor 1.4.3 单独调用上传图片,或文件功能的更多相关文章

  1. ueditor单独调用上传附件和图片的功能

    javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以 ...

  2. 关于 百度 Ueditor (在chrome浏览器) 上传图片时 打开文件夹的延迟问题

    在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image ...

  3. 单独调用kindeditor的多图上传组件实现多图上传

    本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...

  4. ajax 提交所有表单内容及上传图片(文件),以及单独上传某个图片(文件)

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  5. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...

  6. sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数

    今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...

  7. Java调用第三方dll文件的使用方法 System.load()或System.loadLibrary()

    Java调用第三方dll文件的使用方法 public class OtherAdapter { static { //System.loadLibrary("Connector") ...

  8. [VB.NET]调用系统的文件夹选择对话框

    以下示例代码展示如何调用系统的文件夹选择对话框: Private Function SelectFolder(ByVal Describe As String, Optional ByVal Show ...

  9. delegate 集成在类中,还是单独写在.h文件中?

    转:http://stackoverflow.com/questions/11382057/declaring-a-delegate-protocol There definitely are sub ...

随机推荐

  1. 如何利用PhoneGap制作地图APP

    摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开发出移动平台上能使用的APP了! --------------- ...

  2. IIS配置相关

    转:让Windows Server 2008 + IIS 7+ ASP.NET 支持10万并发请求 http://www.cnblogs.com/dudu/archive/2009/11/10/160 ...

  3. 关于javascript中的 执行上下文和对象变量

    什么是执行上下文 当浏览器的解释器开始执行我们的js代码的时候,js代码运行所处的环境可以被认为是代码的执行上下文,执行上下文(简称-EC)是ECMA-262标准里的一个抽象概念,用于同可执行代码(e ...

  4. Can't find keyplane iOS模拟器键盘不显示解决办法

    静下心来学技术,新一波的问题再度来袭 学习swift的时候做一个app,需要用到数字键盘,但是在调试了几次后数字键盘便出不来了,控制台中弹出这样一个错误 Can't find keyplane tha ...

  5. .NET开发必备工具之-Reflector

    第一步,下载 第二步,解压缩下载的包,双击Reflector应用程序打开 第三步,设置默认程序集,可以不设定 第四步,找到你要反编译dll文件 第五步,把dll文件拷贝到方便的位置(我在桌面上新建了T ...

  6. MySQL数据库还原:路径必须用正斜杠?

    也是术业不精,其实之前也用命令行还原过几次MySQL数据库,但总记不清语法.这不,今天想把另一台电脑上备份的数据库还原过来,结果不停报错,如下图所示: 后来才发现,因为偷懒直接复制的路径名里,用的全是 ...

  7. [算法练习]最长公共子串(LCS)

    题目说明: 找两个字符串的最长公共子串,这个子串要求在原字符串中是连续的.比如"bab"和"caba"的最长公共子串是"ba"和" ...

  8. DPKG命令与软件安装、APT

    ====Linux软件包==== Linux系统中,软件通常以源代码或者预编译包的形式提供. 软件的源代码通常需要编译为二进制代码才可使用,安装比较耗时.用户可以自行调节编译选项,决定需要的功能或组件 ...

  9. jquery plugins —— Chosen

    官网地址:http://harvesthq.github.io/chosen/ Chosen (v1.4.2) Chosen has a number of options and attribute ...

  10. rfc 标准文档目录

    1.  xmpp的文档 (3920版本) https://tools.ietf.org/html/rfc3920 2. MQTT 3. SIP