第一步：先配置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 ...
-
百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
-
百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
随机推荐
-
Android 与Unity交互之Toast消息
Toast.makeText(MainActivity.this,message.obj.toString(),Toast.LENGTH_SHORT).show();这一句代码不能直接放在 publi ...
-
golang的连接池例子
github.com/jolestar/go-commons-pool 测试代码 package main import ( "github.com/jolestar/go-commons- ...
-
检测SqlServer服务器CPU是否瓶颈
初次写博文,分享个人心得,欢迎大虾小虾来拍砖. 系统自带的性能监视器 在开始命令框中输入perfmon按enter键即可打开性能监视器 可以通过监视 % Processor Time 的值察看cpu是 ...
-
剑指offer-面试题.二叉树的镜像
题目:请完成一个函数,输入一个二叉树,该函数输出它的镜像. 二叉树节点定义如下: strcut BinaryTreeNode { int val; strcut BinaryTreeNode* m_ ...
-
SMO实现
#include "stdio.h" #include <vector> using namespace std; float function(float alfa[ ...
-
查看当前Jquery版本
<script type="text/javascript"> $(document).ready(function(){ alert(jQuery.fn.jquery ...
-
PHP函数注释规范
<?php/*** @name 名字* @abstract 申明变量/类/方法* @access 指明这个变量.类.函数/方法的存取权限* @author 函数作者的名字和邮箱地址* @cate ...
-
碰到故障大全---cd
office已安装32位,无法安装64位?解决方案:开始→运行→输入regedit,打开注册表编辑器,找到HKEY_CLASSES_ROOT\\Installer\\Products\ \000021 ...
-
[SoapUI] 设置Excel的第一行为自动过滤
import org.apache.poi.ss.util.* XSSFWorkbook workbook = new XSSFWorkbook() XSSFSheet sheet = workboo ...
-
SpringBoot非官方教程 | 第十一篇：springboot集成swagger2，构建优雅的Restful API
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot-swagger2/ 本文出自方志朋的博客 swa ...