百度开源富文本编辑器 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 ...
随机推荐
- 车销送货上门专用无线开单器-自带PDA无线移动开单系统 与云服务器连接
浩瀚技术配套PDA终端软件 本软件与 数据采集器搭配销售,PDA端软件不单独销售也不含电脑端管理软件 数据采集器 一维扫描头+WIFI+蓝牙+一体打印+PDA软件. 产品特点: 1:通过操作移动手持 ...
- Oil Deposits(dfs)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- Android应用帧率--FPS测试
Android应用帧率FPS是衡量应用流畅度的一个非常重要的指标,可以根据FPS对应用做一些优化,那么在开发过程中如何来测试我们的应用的FPS呢? 准备工具:Eclipse + Android测试终端 ...
- mvn exec用法，运行jar后台驻留进程
java工程如果打包成war,那依赖的jar包都会被包含进去. 不过如果开发java的后台驻留进程,那一般会打包成jar包的形式,要想在运行进程的时候找到所有的依赖包,基本有如下两种方式: 方式一: ...
- Codeforces 675E Trains and Statistic（DP + 贪心 + 线段树）
题目大概说有n(<=10W)个车站,每个车站i卖到车站i+1...a[i]的票,p[i][j]表示从车站i到车站j所需买的最少车票数,求所有的p[i][j](i<j)的和. 好难,不会写. ...
- BZOJ2758 : [SCOI2012]Blinker的噩梦
首先将包含关系建树. 方法是将每个图形拆成上半边和下半边,从左往右扫描线,用Splay从下到上维护扫描线上所有图形. 每次加入一个新的图形$x$的时候,看看它下方第一个图形$y$,如果$y$是上半边, ...
- CentOS6.4 安装OpenResty和Redis 并在Nginx中利用lua简单读取Redis数据
1.下载OpenResty和Redis OpenResty下载地址:wget http://openresty.org/download/ngx_openresty-1.4.3.6.tar.gz Re ...
- 【noiOJ】p7914(..)
08:不重复地输出数 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 输入n个数,从小到大将它们输出,重复的数只输出一次.保证不同的数不超过500个. 输入 ...
- Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
Bootstrap 的 carousel.js 插件并没有支持手势. 3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $(&quo ...
- 广播变量、累加器、collect
广播变量.累加器.collect spark集群由两类集群构成:一个驱动程序,多个执行程序. 1.广播变量 broadcast 广播变量为只读变量,它由运行sparkContext的驱动程序创建后发送 ...