百度开源富文本编辑器 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配置：图片上传和文件上传独立使用方法的更多相关文章
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- 使用百度的富文本编辑器UEditor遇到的问题总结
1.下载地址:http://ueditor.baidu.com/website/download.html(我下载的是.net版本) 下载后要先看一下ueditor.config.js和 net/co ...
- 百度的富文本编辑器UEDITOR
还是百度的ueditor 比较好用,文件导入后,基本不用配置就可以直接使用图片,文件上传等功能. CKeditor要注意的地方太多了 .但是相对ckeditor 样式比较好看.
- 百度的富文本编辑器UEditor批量添加图片自动加上宽度和高度的属性
若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸 所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件 在image.js中 ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 富文本编辑器UEditor自定义工具栏（二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符）
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- 关于富文本编辑器—UEditor（java版）的使用，以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
随机推荐
- 系统表达式(z变换、DTFT、差分方程)之间的关系
- psql-01基本介绍
安装与启动 安装: apt-get install postgresql / yum install postgresql.XXX; 启动: mac下直接打开 linux service postgr ...
- 提取Windows用户密钥文件cachedump
提取Windows用户密钥文件cachedump Windows系统将用户信息和密钥存储在系统存档文件(System hive)和安全存档(Security hive)中.只要提取这些内容,就可以 ...
- Python基础7- 流程控制之循环
循环: 把一段代码重复性的执行N次,直到满足某个条件为止. 为了在合适的时候,停止重复执行,需要让程序出现满足停止循环的条件.Python中有三种循环(实质只有两种): while循环 for循环 嵌 ...
- Visual Studio 2010: 调试引用的dll的代码？
right click the solution in the Solution Explorer-> Properties-> Debug ->Enable Debuggers- ...
- django base.html
<!DOCTYPE html> <html> <head> <title>{% block title %}默认标题{% endblock %} - 自 ...
- BZOJ3553 : [Shoi2014]三叉神经树
设val[i]为i连出去的树突中输出值为0的个数 如果val[x]<=1,输出值为1,否则输出值为0 修改x就相当于val[f[i]]++或者val[f[i]]-- 用Link-cut Tree ...
- awk 学习
1. awk用例 今天用awk来统计一个字符出现的次数,总是比实际多一个.查了半天才发现问题所在. 文本tt.txt如下: <lst name="responseHeader" ...
- Qt搭建多线程Server
起因是MySQL在Android上没有驱动.也就是说,移动端想要访问远程数据库,必须通过一台(或多台)PC进行中转. 中转PC作为Server,接受来自移动端Socket访问数据库的要求,Server ...
- html5代码,获取地理位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...