UEditor 自定义上传 远程服务器 Jsp Java

终于是搞定了UEditor自定义上传...

上班的时间写这个，不知道会不会被骂死...

现在公司正在做的一个项目，需要用到HTML编辑器，在UEditor之前，使用的是Ckeditor+Ckfinder。

CK这个编辑器和UEditor一样，都是首次使用，所以在网上也翻了写资料，发现大家都只是本地服务器上传。

但项目有个要求：图片文件，需要上传至图片服务器，需要使用的时候也从图片服务器上下载，这样可以相对减轻web服务器的压力,也使文件资源更安全，使用更灵活。

那么需求提出来，就开始做了，CK是国外的富文本编辑器，找了很多资料，都是English看的是脑袋发胀(大家英语应该学好)。

后面才看到一段官方的回答，外国码友提问的，大意是：ck是否支持上传到远程服务器。得到的官方回答是不支持，需要自己去重写某东西。

在寻找CK资料的时候有瞄到UEditor。

虽然有自己扩展了CK的图片上传，但是有两个问题：

1、扩展的图片上传，使用图片上传，它不去调用设置的controller(框架是SpringMVC)，直接把文件上传到本地服务器；

2、直接修改文本编辑器本身自带的图片上传功能，从服务器上获取图片列表后，不知道如何把图片嵌入文本编辑器中(因为需要直接做一个页面来展示这些图片)；

 

这也是最终放弃的原因，不知道哪里没有配置，或者配错，也找不到类似资料，再研究下去太花时间，于是在看到官方回答后，决定放弃。

上周五下午就下载了UEditor，但是本人有个坏习惯，就是不喜欢看文档，然后就开始瞎搞。

昨天在UEditor群里问了点问题，但似乎都没有人做和一样的需求，找了很多资料也都只是简单的本地服务器上传。

那么现在把实现的方式介绍给大家，使用的是最新的UEditor版本1.4.3.1,建议大家去官网下载。

1、下载UEditor后，解压，把它放到工程里，还有它的Jar包也要放进去，1.4.3.1结构是这样的

Jar包放在WEB-INF/lib下面

===================================

A、先讲前端

===================================

2、在你的全局脚本jsp中或者你需要用UEditor的jsp中引入UEditor的js

<scripttype="text/javascript"charset="utf-8"src="${yourPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"src="${yourPath}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript"charset="utf-8"src="${yourPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

这时候已经可以开始使用UEditor了

3、在Jsp中使用，在你需要放编辑器的地方插入下面的语句

第一行script就是UEditor面板，你只需要修改name就行，对应的是表单的name(此时表单中就不需要设置了，它就代表你表单的那一项)

第二行脚本域里面，实际上就是自定义上传的核心，var ue = UE.getEditor('editor'); 就是创建面板用的，一定要有；如果不使用自定义上传，那么下面的也就不需要了，只要创建面板那一句就够了。

简单介绍：

UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; 是用来获取Action的，照写就行，然后就是下面的 UE.Editor.prototype.getActionUrl=function(action){....}  这里面的if语句，就是用来设置自定义action的，这里叫Controller，Struts2里面才叫action；

下面先看看，ueditor下jsp里面的config.json，以下截取的一部分，看这些就够了，

你会发现，下面有个imageActionName，这个xxxxActionName，开始以为是需要把自定义上传Controller设置在这边，所以我点击上传的时候就报，错误的Action还是未知的Action  忘了它是怎么提示的，反正意思就是，你的Action不正确，实际上这是UEditor默认的Action，上面我们有看到 if (action == 'uploadimage' ||action== 'uploadscrawl' || action == 'uploadimage') {....} else if(action =='uploadvideo') {....} else if(action == 'listimage'){....} else{returnthis._bkGetActionUrl.call(this, action);}}

 if语句里面的这些，对应的就是默认的action名称，说到这里，大家应该知道了吧， 要自定义上传什么就在这个script里面加if语句来判断即可，实在没有，它就返回       this._bkGetActionUrl.call(this,action);  这个东西我想你应该要有，否则没找到你设置的action它本地也上传不了。

======================config.jsonStart========================================

======================config.jsonEnd==========================================

那么，这样在前端就已经介绍完。

 

===================================

B、接下来看看后端

===================================

后端Controllerd代码直接贴出来，因为图片上传不了，这个优快云有问题啊！！

以下是Controller层方法，以图片上传为例，这边只需要图片上传，其它的就不贴了。

这里代码还没优化。

多图上传也是调用这个方法即可。

=======================ControllerStart=====================================================

             /**
              * 上传图片
          &n