关键词：
http://blog.csdn.net/huangwenyi1010/article/details/51637427#comments
1.首先你可以到官网Ueditor，查看很详细的文档，包括如何安装到Eclipse，相关jar包和如何使用Ueditor，本文主要介绍如何实现单图片上传和利用自己的接口：
运行tomcat上，在google浏览器运行（Test是我的项目名称）：
http://localhost:8081/Test/jsp/config.json
出现一串长长的json的字符串，说明运行成功。
2.把WEB-INF/jsp/src下的Java源码copy到项目源码中，方便之后的调试代码，如上图
3.运行http://localhost:8081/Test/_examples/simpleDemo.html，可以打开看下这个文件:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
</head>
<body>
<h1>UEditor简单功能</h1>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor">
<p>这里我可以写一些输入提示</p>
</script>
<script type="text/javascript">
UE.getEditor(‘myEditor‘,{
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[[‘FullScreen‘, ‘Source‘, ‘Undo‘, ‘Redo‘,‘Bold‘,‘test‘]],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:300
//更多其他参数，请参考ueditor.config.js中的配置项
})
</script>
</body>
</html>
上面例子很简单，就是如何初始化一个富文本框，已经如何配置工具条等等
4.因为我们要实现图片上传功能，所有要把图片上传按钮搞上去，方法如下:
1）第一种方法：把simpleupload加到toolbars中:
toolbars:[[‘FullScreen‘,simpleupload ,‘Source‘, ‘Undo‘, ‘Redo‘,‘Bold‘,‘test‘]]
2）第二种方法：直接把toolbars注释掉
这时就会读取默认的配置文件ueditor.config.js，下面介绍，不过会把所有的按钮全部显示出来
重新运行http://localhost:8081/Test/_examples/simpleDemo.html
如图：
5.可是你会发现，点击图片上传按钮，一点反应都没有，尼玛有木有！
这里开始介绍ueditor.config.js文件，
首先，你会发现在这个文件可以配置很多，具体看下面即可
重点讲：serverUrl: URL + “PHP/controller.php”，没错，你没有看错，这个就是请求后端的统一接口路径，记得是统一接口路径，也就是说只有这个路径，没有第二个，会不会觉得很坑呢？
我们把路径改成jsp的：, serverUrl: URL + “jsp/controller.jsp”
我们把注释去掉，重新启动tomcat，刷新页面，点击图片上传按钮，
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL + "php/controller.php"
//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[
‘fullscreen‘, ‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘,
‘bold‘, ‘italic‘, ‘underline‘, ‘fontborder‘, ‘strikethrough‘, ‘superscript‘, ‘subscript‘, ‘removeformat‘, ‘formatmatch‘, ‘autotypeset‘, ‘blockquote‘, ‘pasteplain‘, ‘|‘, ‘forecolor‘, ‘backcolor‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘selectall‘, ‘cleardoc‘, ‘|‘,
‘rowspacingtop‘, ‘rowspacingbottom‘, ‘lineheight‘, ‘|‘,
‘customstyle‘, ‘paragraph‘, ‘fontfamily‘, ‘fontsize‘, ‘|‘,
‘directionalityltr‘, ‘directionalityrtl‘, ‘indent‘, ‘|‘,
‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘justifyjustify‘, ‘|‘, ‘touppercase‘, ‘tolowercase‘, ‘|‘,
‘link‘, ‘unlink‘, ‘anchor‘, ‘|‘, ‘imagenone‘, ‘imageleft‘, ‘imageright‘, ‘imagecenter‘, ‘|‘,
‘simpleupload‘, ‘insertimage‘, ‘emotion‘, ‘scrawl‘, ‘insertvideo‘, ‘music‘, ‘attachment‘, ‘map‘, ‘gmap‘, ‘insertframe‘, ‘insertcode‘, ‘webapp‘, ‘pagebreak‘, ‘template‘, ‘background‘, ‘|‘,
‘horizontal‘, ‘date‘, ‘time‘, ‘spechars‘, ‘snapscreen‘, ‘wordimage‘, ‘|‘,
‘inserttable‘, ‘deletetable‘, ‘insertparagraphbeforetable‘, ‘insertrow‘, ‘deleterow‘, ‘insertcol‘, ‘deletecol‘, ‘mergecells‘, ‘mergeright‘, ‘mergedown‘, ‘splittocells‘, ‘splittorows‘, ‘splittocols‘, ‘charts‘, ‘|‘,
‘print‘, ‘preview‘, ‘searchreplace‘, ‘drafts‘, ‘help‘
]]
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准
//,labelMap:{
// ‘anchor‘:‘‘, ‘undo‘:‘‘
//}
//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
//lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,langPath:URL +"lang/"
//主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
//现有如下皮肤:default
//,theme:‘default‘
//,themePath:URL +"themes/"
//,zIndex : 900 //编辑器层级的基数,默认是900
//针对getAllHtml方法，会在对应的head标签中增加该编码设置。
//,charset:"utf-8"
//若实例化编辑器的页面手动修改的domain，此处需要设置为true
//,customDomain:false
//常用配置项目
//,isShow : true //默认显示编辑器
//,textarea:‘editorValue‘ // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值
//,initialContent:‘欢迎使用ueditor!‘ //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
6.你会发现，你选择一张图片，我卡，图片上传不了
打开google浏览器调试，如下图：
7.说明还有些配置文件还没配好，我们看刚刚配置的后端请求路径
// 服务器统一请求接口路径
, serverUrl: URL + "jsp/controller.jsp"
记住，大家要把这个文件当作后端的java文件，一定要记住，很重要的。
controller.jsp会返回同目录下的config.json文件，大家要把它当作是后端返回的数据即可
这时，我们先看config.json文件:
只看部分配置，下面的配置都很重要，但我们先解决上面出现的问题：
上面的问题应该是图片的路径不对造成的，所以我们修改配置：imageUrlPrefix，把他改成下面的配置,重启，刷新：
"imageUrlPrefix" = http://localhost:8081/Test/
/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "http://localhost:8081/Test/", /* 图片访问路径前缀 */
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
图片如下：
ueditor学习
1.UEditor之实现配置简单的图片上传示例2.UEditor之图片上传如何和真实项目结合 查看详情
ueditor1.5版本单独调用图片上传如何实现？
ueditor1.5版本单独调用图片上传如何实现，网上找的添加修改image.jsfunctioninsertImage(imgObjs)editor.fireEvent('beforeInsertImage',imgObjs);editor.execCommand("insertImage",imgObjs);这个代码只适合老版本，新版本1.5的无效。在页面中引入UEdi... 查看详情
ueditor之图片上传如何和真实项目结合
1.首先，我们定义一个名为GetConfigServlet的Servlet，真实项目应该是一个Controller，一样的，这个类就是加载后端配置文件类packagecom.ay.servlet;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServl 查看详情
vue“欺骗”ueditor，实现图片上传(代码片段)
一、环境介绍@vue/cli4.3.1webpack4.43.0ueditor1.4.3.3jsp版二、springboot集成ueditor，实现分布式图片上传参考我的另一篇博客，《微服务迁移记（五）：WEB层搭建(5)-集成ueditor编辑器，伪分布式图片上传》配置完成后，有一个http://192.168.43.8... 查看详情
ueditor图片上传配置
ueditor图片上传配置文件为ueditor/php/config.json/*上传图片配置项*/"imageActionName":"uploadimage",/*运行上传图片的action名称*/"imageFieldName":"upfile",/*提交的图片表单名称*/"imageMaxSize":2048000,/*上传限制大小，单位B*/"imageAllowFiles":[".pn 查看详情
ueditor上传附件火狐不兼容报304
...能用火狐的上传附件304求大神在线等！！！！！！！ ueditor上传附件火狐不兼容报304，这个是浏览器设置问题。某些IE8用户使用搜狗浏览器出现无法上传附件。具体解决方法如下： 1.首先修改editor_config.js； 2.修改imageU... 查看详情
ueditor自定义图片视频尺寸校验(代码片段)
UEditor支持单图、多图以及视频上传，编辑器配置项支持文件格式、文件大小校验，对于文件宽高尺寸校验暂不支持。这里记录一下自定义图片、视频尺寸校验过程，内容核心主要是扩展校验逻辑和增加自定义提示文本。单图上... 查看详情
ueditor上传图片
0.前言：我用过ckeditor,kingeditor还是感觉ueditor最好用，功能强大，经常更新。之前因为升级了struts2到2.5的了，原本的kingeditor已经不能共存，于是找到了uditor。开始比较迷茫的使用，各种百度，没有我满意的答案，明明可以很简单... 查看详情
ueditor+七牛，实现图片直连上传
...近做的项目，涉及到使用富文本编辑器，我选择了百度的UEditor。同时，我们的图片放在七牛云存储上。关于这两者间的集成，我写下一些个人的经验，与大家分享。 图片上传方案目前来说，Web端基于七牛等云存储的图片上... 查看详情
ueditor配置图片上传
...功能，因为之前的kingeditor功能过于简陋，所以决定换成Ueditor，前端已经配置好了，这个是后台配置1,确定前台已经配置好了2,将编辑器的插件包下载下来，将里面文件夹拷到网站的静态资源目录3,文件夹里面包含一个PHP文件夹，... 查看详情
关于ueditor的使用配置（图片上传配置）
...，需要在平台上使用富文本编辑器，我这次选择了百度的UEditor 在官网上下载l.net版本的1.4.3开发版本http://ueditor.baidu.com/website/download.html但是在配置时始终出现问题Handler的子类始终报错找不到Handler的命名空间，搜索一番也没... 查看详情
修改ueditor的图片上传地址
文件地址：ueditro/php/config.json/*前后端通信相关的配置,注释只允许使用多行方式*/{/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"upfile",/*提交的图片表单名称*/"imageMaxSize":2048000,/*上传大小限... 查看详情
ueditor调用上传图片上传文件等模块
...nblogs.com/lhm166/articles/6079973.html 说到百度富文本编辑器ueditor（下面简称ue），我不得不给它一个大大的赞。我们在网站建设、前端开发时，网站的内容管理就使用了它。对于它的多图片上传和附件上传，个人感觉很好用，我就... 查看详情
ueditor单独图片上传
在UEditor里点击图片图标的时候先弹出属性框然后图片url地址栏旁边加一个按钮点击那个按钮的时候弹出选择图片窗口选完之后光把地址传到图片URL地址栏面点击确定的时候再吧信息发送到编辑器里面能实现吗？请大虾们帮帮搞... 查看详情
百度ueditor的图片上传，前后端交互使用(代码片段)
百度ueditor的使用 一个文本编辑器，看了网上很多文档写的很乱，这里拾人牙慧，整理下怎么使用。这个东西如果不涉及到图片附件上传，其实很简单，就是几个前端文件，直接引用，然后配置下ueditor.config.js即可。这里就不... 查看详情
ueditor之前后端源码的学习和简单的研究
...很明显，会调用后端的controller.jsp代码，因为我们已经在ueditor.config配置了：//服务器统一请求接口路径,serverUrl:URL+"jsp/contro 查看详情
百度ueditor富文本上传图片(代码片段)
项目中使用UEditor发现设置图片自定义保存路径会出现《请求后台配置项http错误，上传功能将不能正常使用！错误》/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"inputForm",/*提交的图片表单... 查看详情
php版ueditor如何实现文章图片一起上传
就是这样的参考技术Aueditor里存放的是图片的url地址，提交时不用做任何处理的，只要你处理好异步上传图片路径的php处理文件就行了，就是返回的图片路径是绝对路径，放那里都没问题啦追问那如何获取图片的url，谢谢追答图... 查看详情