百度开源富文本编辑器 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 ...
随机推荐
- C语言连接SQLSERVER数据库
第一步:配置ODBC.在配置ODBC时有用户DSN.系统DSN.和文件DSN三种方法,为了稳妥起见,采用系统DSN. DSN的名字叫LocalServer,帐号:sa,密码123456 第二步:打开V ...
- Swift3.0语言教程字符串大小写转化
Swift3.0语言教程字符串大小写转化 Swift3.0语言教程字符串大小写转化,在字符串中,字符串的格式是很重要的,例如首字母大写,全部大写以及全部小写等.当字符串中字符很多时,通过人为一个一个的 ...
- DAY7L2【C001】
出自附中练习场[难度C]————————————————————————————————————————————————————————————— [试题描述]有 N 个任务, 每个任务最多只能完成一 ...
- iOS Debug日志 viewhierarchy调试笔记
Debut - View Debugging - Capture View Hierarchy 当视图没有正常显示时,用view hierarchy进行调试,查看左边的分支里有没有加载对应的视图. 如 ...
- CF# Educational Codeforces Round 3 E. Minimum spanning tree for each edge
E. Minimum spanning tree for each edge time limit per test 2 seconds memory limit per test 256 megab ...
- 完全卸载Oracle方法、步骤
完全卸载Oracle方法: 软件环境: 1.Windows XP + Oracle 10g 2.Oracle安装路径为:d:\Oracle 1.如果数据库配置了自动存储管理(ASM),应该先删除聚集同 ...
- sdoi 2009 & 状态压缩
是不是平时在手机里玩吃豆豆游戏玩腻了呢?最近MOKIA手机上推出了一种新的围豆豆游戏,大家一起来试一试吧. 游戏的规则非常简单,在一个N×M的矩阵方格内分布着D颗豆子,每颗豆有不同的分值Vi.游戏者可 ...
- ReLu(Rectified Linear Units)激活函数
论文参考:Deep Sparse Rectifier Neural Networks (很有趣的一篇paper) 起源:传统激活函数.脑神经元激活频率研究.稀疏激活性 传统Sigmoid系激活函数 传 ...
- Android作业分组与选题
期末大作业 序号 题目 组员分工 完成度 1 基于安卓系统的游戏开发 2 设计一个安卓手机小游戏 3 Android平台应用——音乐播放器设计 4 基于Android技术的个人博客 5 电子阅读器 6 ...
- Let’s encrypt 计划为网站提供免费的基本 SSL 证书，以加速互联网从 HTTP 向 HTTPS 过渡。
Let’s encrypt 计划为网站提供免费的基本 SSL 证书,以加速互联网从 HTTP 向 HTTPS 过渡. 该项目由Mozilla.Cisco.Akamai.IdenTrust.EFF 和密 ...