jsp+ssm+tomcat配置ueditor(单图片，视频上传)

Posted 2021-03-01 六元

一、下载ueditor资源

二、减压资源，将ueditor包(我项目里的utf8-jsp)放到项目的WebContent下的js文件夹里。

 

 

 

 

 把ueditor资源里 utf8-jsp\\jsp\\lib文件夹里的jar包拷贝到项目的lib里。(以idea为例)选择file--->Project Structure-->Libraries。导入ueditor-1.1.2.jar包。

三、在需要使用的ueditor的页面引用下图的js（顺序是固定的）

 

 

 在页面添加 <textarea name="titles" id="description"></textarea>标签。

建一个<script>

<script type="text/javascript">

    window.onload = function()
    {
       /* var ue=UE.getEditor("description");*/
        var editor =new UE.ui.Editor();
        editor.render("description");//创建ueditor富文本编辑器

        //根据不同action上传图片和附件
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == \'uploadImage\') {//uploadImage对应后面的config里的配置
　　　　　　　　//根据action判断是图片上传还是视频上传
　　　　　　　　return \'${ctx}/Order/uploadImg.do\';

　　　　　　　　} else if (action == \'uploadVideo\') {

                return \'${ctx}/Order/uploadVideo.do\';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }
    };

</script>
四、编辑controller.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" import="com.baidu.ueditor.ActionEnter"  pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%

    request.setCharacterEncoding( "utf-8" );
   response.setHeader("Content-Type" , "text/html");
   String rootPath = application.getRealPath( "/" );
   System.out.println(new ActionEnter( request, rootPath ).exec() );
   
%>
里面的东西不用动，这个主要是用来启用ueditor的。如果不习惯这样可以创建一个controller。例@Controller

@RequestMapping("/upload")
public class uploadController {
    @RequestMapping(value="/enter",method=RequestMethod.GET)
    public void enterUE(HttpServletRequest request, HttpServletResponse response) {
        try {
            request.setCharacterEncoding( "utf-8" );
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        response.setHeader("Content-Type" , "text/html");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
如果出现 import com.baidu.ueditor.ActionEnter; 这个报错说明没用导入ueditor-1.1.2.jar包。或者导入错误(第二部有说明)
在 ueditor.config.js中配置serverUrl路劲，（如果没用自己创建一个新的controller，serverUrl的路劲就修改为自己的路径）

// 服务器统一请求接口路径(项目名+controller+接口名)getRootPath()是获取项目名的方法.
, serverUrl:getRootPath()+"/upload/enter.do"
五、修改 ueditor.config.js
(1)，工具栏，默认工具栏只有一条(我是这样，不知道别人是不是)可用[]来分行工具栏。例如：

 toolbars: [[
         \'source\', \'|\', \'undo\', \'redo\', \'|\',
         \'bold\', \'italic\', \'underline\', \'fontborder\', \'strikethrough\',  \'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\'
     ]]
　　　　//我这里分了4行。
配置config.json  路劲在ueditor-->jsp

/* 上传图片配置项 */
 "imageActionName": "uploadImage", /* 执行上传图片的action名称 */
 "imageFieldName": "upload", /* 提交的图片表单名称 */
 "imageMaxSize": 5442880, /* 上传大小限制，单位B */
 "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
 "imageCompressEnable": true, /* 是否压缩图片,默认是true */
 "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
 "imageInsertAlign": "none", /* 插入的图片浮动方式 */
/* "imageUrlPrefix": "http://localhost:8080/hotelm", */ /*图片访问路径前缀 */
 "imagePathFormat": "../images/{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

(2)配置上传单图

,imagesUrl:getRootPath()+"/Order/uploadImg.do"//图片上传接口路劲 ：项目名+controller+方法名
,imageActionName:"uploadImage"//action名，就是在页面判断上传图片还是视频，然后返回访问路劲的action
,imageFieldName:"upload"//后台接收图片文件的名称
,imageMaxSize:5442880//图片最大上传限制 5MB
,imageUrlPrefix:"" //../images/{filename}//访问路劲前缀，默认http://localhost:8080
,imagePathFormat:"../images/{filename}"//显示图片路劲，(我研究了一下ueditor.all.js源码，貌似这个可以不用，因为我配置了这个路劲但是依旧不显示图片，所以就放弃它了)

 ,imageAllowFiles:[".png", ".jpg", ".jpeg", ".gif", ".bmp"]//上传图片类型判断

后台代码

@ResponseBody
@RequestMapping(value = "uploadImg", method = RequestMethod.POST)
public Object uploadImg(@RequestParam(value = "upload", required = false)MultipartFile upload) throws IOException {
    Map<String,Object> path=new HashMap<String,Object>();

        if (!upload.isEmpty()) {// 判断上传的文件是否为空
            String fileName = upload.getOriginalFilename();// 文件原名称
            //获取扩展名称
            String ext = fileName.substring(fileName.lastIndexOf("."));
            String newName = UUID.randomUUID().toString().replace("-", "") + ext;
            System.out.println("上传的文件原名称:" + fileName);
            // 判断文件类型
            String type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
            if (type != null) {// 判断文件类型是否为空
                if (imgs().contains(type.toLowerCase())) {//判断上传图片类型是否正确(然后前台有判断，但是以防万一还是判断一下)imgs()一个保存了图片类型的list
                    double fileSize = (double) upload.getSize() / 1024 / 1024;//MB
                    if (fileSize <= Double.valueOf(5)) {//判断资源是否小于5mb
                        String pathUrl = System.getProperty("bookdir");//获取项目绝对路劲（需在web.xml配置）
                        String url = pathUrl + "images";//images是保存图片的文件夹
                        //要上传的路径（包括存储的绝对路径和文件名.后缀）
                        File file1 = new File(url + "\\\\" + newName);
                        File file2 = new File(url);
                   
                        judeDirExists(file2);
                        try {
                            upload.transferTo(file1);//上传到服务器
                            path.put("state", "SUCCESS"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
                            path.put("url","../images/"+newName);//这个我自己研究的自定义路劲，因为我的照片保存在我项目里WebContent-->images。所以我页面访问图片的路劲可以使用../images/图片名
　　　　　　　　　　　　　　　　　　//(也可根据自己的图片路劲返回)　　
                           /* path.put("url",url + "\\\\" + newName);*///按照ueditor的原本应该返回图片路劲

path.put("title",newName);
                            path.put("original",newName);
                        } catch (Exception e) {
                            path.put("state", "failed"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
                            path.put("url","../images/"+newName);//同理上面success
                            path.put("title",newName);
                            path.put("original",newName);
                        }
                    }
                }
        }
    }
    Gson gson=new Gson();
    return gson.toJson(path);//需要返回json数据
}
//图片视频类型(不全)

public static Set<String> imgs(){
    Set<String> mFileTypes=new HashSet<String>();
    mFileTypes.add("jpg");
    mFileTypes.add("png");
    mFileTypes.add("gif");
    mFileTypes.add("tif");
    mFileTypes.add("bmp");
    //视频或音频类
    mFileTypes.add("avi");
    mFileTypes.add("mpg");
    mFileTypes.add("mov");
    mFileTypes.add("mp4");
    return mFileTypes;
}

到这里就完了。如果返回了ueditor原本图片路劲，并且config配置上传图片的回去图片路劲都正确还不显示图片，可以调试ueditor-all.js看看图片路劲有没有错误，查找simpleupload单图片上传。
这是图片上传成功回滚

function callback(){
    try{
        var link, json, loader,
            body = (iframe.contentDocument || iframe.contentWindow.document).body,
            result = body.innerText || body.textContent || \'\';
        json = (new Function("return " + result))();
       /* link = me.options.imageUrlPrefix + json.url;*///这是ueditor原本图片路劲 ：前缀+后台返回路劲
        if(json.state == \'SUCCESS\' && json.url) {
            loader = me.document.getElementById(loadingId);
            loader.setAttribute(\'src\', json.url);//自定义返回路劲 ../images/图片吗
            loader.setAttribute(\'_src\', json.url);

　　　　　　　　/*   loader.setAttribute(\'src\', link);//ueditor原配置
   　　　　　　　　loader.setAttribute(\'_src\', link);*///ueditor原配置

            loader.setAttribute(\'title\', json.title || \'\');
            loader.setAttribute(\'alt\', json.original || \'\');
            loader.removeAttribute(\'id\');
            domUtils.removeClasses(loader, \'loadingclass\');
        } else {
            showErrorLoader && showErrorLoader(json.state);
        }

　　图片上传到此结束。
(3)配置视频上传
配置ueditor-config.js

,videoActionName:"uploadVideo"
,videoFieldName:"upload",
      videoAllowFiles:[
          ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
      ]
配置config.json

/*上传视频配置 */
   "videoActionName": "uploadVideo",  /*执行上传视频的action名称 */
   "videoFieldName": "upload", /* 提交的视频表单名称 */
   "videoPathFormat": "../upload/{filename}",  /*上传保存路径,可以自定义保存路径和文件名格式 */
   "videoUrlPrefix": "",  /*视频访问路径前缀 */
   "videoMaxSize": 12240000,  /*上传大小限制，单位B，默认10MB*/
   "videoAllowFiles": [
       ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
       ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"] /* 上传视频格式显示 */

然后就是写后台代码啦，类似于图片上传

对了，如果出现编辑、修改时视频不显示问题。
修改
ueditor-all.js应该在17679行和17683行

 

把 image换成video

ok啦，其实还有一个问题，就是上传有一个bug就是如果你上传了照片，但是发现上传错了，在编辑器里删除照片，但是在服务器不会删除，就会出现无用照片，暂时还没想到好的解决方法！！！！