百度富文本编辑器ueditor/jsp版的简单使用，可上传图片和附件

~~经过一上午的时间，终于把ueditor编辑器搞出来了，仅做记录

#完成的样子

1，首先在官网下载对应的插件 【附下载地址：http://ueditor.baidu.com/website/download.html】

   本人使用的是Java语言 ，框架是ssm+maven

2，解压文件，在自己项目的根目录下新建文件夹 ueditor，把utf8-jsp中文件复制粘贴到ueditor文件夹下

3，新建一个ueditorTest.jsp，把文件夹中index.html中的HTML代码复制粘贴到这个jsp中，引入下面这四个js和css

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/tag.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
    <div>
    <h1>完整demo</h1>
    <textarea name="content"  id="editor"  style="width:820px;height:200px;"></textarea>
</div>　

　　<script type="text/javascript">
　　　　//实例化编辑器
　　　　var ue = UE.getEditor(‘editor‘);
　　</script

</body>
</html>

4，我使用的是maven管理jar，所以/ueditor/jsp/lib下的前四个jar包在pom.xml引入，ueditor-1.1.2.jar可放在/WEB-INF/下lib文件夹中（没有就新建一个），并bulidpath

5，修改配置文件ueditor.config.js中的两处代码

　　//【需要改的第一处：】
    var URL = window.UEDITOR_HOME_URL || "/xxxxx/ueditor/"; //xxxxx为你项目名称，即此处为ueditor文件夹相对项目的路径

  window.UEDITOR_CONFIG = {

        //【需要改的第二处：】
       , serverUrl: "/xxxx/upload/enter" //需要修改的第二处路径，xxxx同样是你的项目名称，　　　　　　　　　　　　　　//upload为你要新建的controller的访问路径，enter为入口方法，controller具体代码在下文

* 6，这个很重要，config.json文件放的路径一定要按照上面5中 serverUrl: "/xxxx/upload/enter" 对应，放在根路径下upload文件夹中（没有就新建一个文件夹），否则会一直报错：请求后台配置错误，上传功能将不能正常使用！

config.json中内容根据实际情况修改config.json文件中三个参数

"imageActionName": "uploadimage",
"imageFieldName": "upfile",

"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

如果上传的文件（图片或附件）位置不在自己项目中，可在"imageUrlPrefix": " "中加路径前缀访问到

7，接下来要新建一个controller.java（由于ueditor给的方案中，把Java代码写到了controller.jsp中了，为了方便，建此controller.java文件），作为ueditor上传图片和附件的入口函数。

其中有两个点需要注意：

(1)  上面代码中 , serverUrl: "/xxxx/upload/enter" 的 /upload 和 /enter跟下面代码中 mapper 对应

(2)  下面代码为controller.jsp中粘贴过来稍作改动而来

@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();
        }
    }

}

8，此时你可以访问ueditorTest.jsp，点击多图上传，会出现这个样子

　如果出现报错，说明第5步ueditor.config.js中路径配置错了

9，开始写上传图片和附件的代码了

首先在ueditor.jsp中的<script></script>标签中加入如下代码

//实例化编辑器
    var ue = UE.getEditor(‘editor‘);

//根据不同action上传图片和附件
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == ‘uploadimage‘) {
            return ‘${pageContext.request.contextPath}/upload/uploadimage‘;
        } else if (action == ‘uploadfile‘) {
            return ‘${pageContext.request.contextPath}/upload/uploadfile‘;
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

再在controller中写对应方法

    /**
     * ueditor上传图片的方法
     * @param upfile 上传图片的文件
     * @param request
     * @param response
     * @return
     */
    @RequestMapping(value="/uploadimage",method=RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> uploadNewsImg(@RequestParam(value="upfile",required=false) MultipartFile upfile,HttpServletRequest request,HttpServletResponse response) {
        Date date = new Date();
        String upLoadPath = "\\upload\\file\\"+new SimpleDateFormat("yyyy\\MM\\").format(date);
        String path = upLoadPath;
        //图片后缀
        String last = upfile.getOriginalFilename().substring(upfile.getOriginalFilename().lastIndexOf("."), upfile.getOriginalFilename().length());

        String uuid = UUID.randomUUID().toString().replace("-", "");
        String fileName = uuid+last;

        File fileT = new File(path,fileName);
        if(!fileT.exists()){
            fileT.mkdirs();
        }
        Map<String, Object> result = new HashMap<String,Object>();
        try {
            upfile.transferTo(fileT);
        } catch (IllegalStateException e) {
            logger.error("富文本编辑器图片上传失败，参数异常："+e);
        } catch (IOException e1) {
            logger.error("富文本编辑器图片上传失败io异常："+e1);
        }
        result.put("state", "SUCCESS");
        result.put("url",  upLoadPath.replace("\\", "/")+fileName);
        result.put("original", "");
        result.put("type", last);
        result.put("size", upfile.getSize());
        result.put("title", fileName);
        return result;
    }

    /**
     * ueditor文件上传方法
     * @param upfile
     * @param request
     * @param response
     * @return
     */
    @RequestMapping(value="/uploadfile",method=RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> uploadFile(@RequestParam(value="upfile",required=false) MultipartFile upfile,HttpServletRequest request,HttpServletResponse response) {
        Date date = new Date();
        String upLoadPath = "\\upload\\file\\"+new SimpleDateFormat("yyyy\\MM\\").format(date);
        String path = upLoadPath;
        //附件后缀
        String last = upfile.getOriginalFilename().substring(upfile.getOriginalFilename().lastIndexOf("."), upfile.getOriginalFilename().length());

        String uuid = UUID.randomUUID().toString().replace("-", "");
        String fileName = uuid+last;

        File fileT = new File(path,fileName);
        if(!fileT.exists()){
            fileT.mkdirs();
        }
        Map<String, Object> result = new HashMap<String,Object>();
        try {
            upfile.transferTo(fileT);
        } catch (IllegalStateException e) {
            logger.error("富文本编辑器文件上传失败，参数异常："+e);
        } catch (IOException e1) {
            logger.error("富文本编辑器文件上传失败io异常："+e1);
        }
        result.put("state", "SUCCESS");
        result.put("url", upLoadPath.replace("\\", "/")+fileName);
        result.put("original", "");
        result.put("type", last);
        result.put("size", upfile.getSize());
        result.put("title", fileName);
        return result;
    }

到此简单的上传图片和文件到此就完结了。有什么不足之处，欢迎指出！

原文地址：https://www.cnblogs.com/lichen-java0027/p/9133247.html

时间： 2024-10-15 04:23:48

百度富文本编辑器ueditor/jsp版的简单使用，可上传图片和附件的相关文章

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEdi

Jfinal整合百度富文本编辑器ueditor

ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的controller) 后台添加该路由指定的controller package com.sandu.mega.admin.ueditor; import com.jfinal.aop.Clear; import com.jfinal.core.Controller; import com.jfinal.kit.Ret; import com.jfinal.upload.UploadFile; im

百度富文本编辑器ueditor添加到pom

<!-- 百度富文本编辑start --> <dependency> <groupId>com.baidu</groupId> <artifactId>ueditor</artifactId> <version>1.1.2</version> <scope>system</scope> <systemPath>${project.basedir}/src/main/webap

使用百度富文本编辑器UEditor碰到的问题

前面使用的是kindEditor,但是发现这个已经不再维护,并且bug不少,而我又不会改,哈哈,所以我就放弃了. 原来想过要用百度的这个UEditor,但是在配置的时候遇到了很多问题,基本上加载不出来,但是最后还是硬着头皮把那些bug都解决了,顺利跑通. 问题1:按百度Demo的配置我发现连最基本的编辑器都不出来. 原因:下面的配置的顺序不能错,顺序错了可能会导致加载不出来的情况. <!-- 配置文件 --> <script type="text/javascript"

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 1.ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/website/document.html 下载地址:http://ueditor.baidu.com/website/download.html (这里可选开发版,或MINI版) 2. 从官网上下载完整源码包,解压

百度富文本编辑器UEDITOR

前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法.编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包,如下图,我下载的是1.2.6.1net版本的开发包. 配置: 1.将开发包放到mvc4项目中,在我的项目中我放到了Content目录下 2.在模板页中引入js和样式文件: 3.在页面中配置初始化编辑器,在页面中配置textarea显示为编辑器,编

解决百度富文本编辑器 UEditor 插入视频后没有路径的问题

在 Update ueditor.config.js 文件中,xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_url属性(用来存储视频url)_src/plugins/video.js里处理的是_url,而不是_src. 修改ueditor.config.js: img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-

百度富文本编辑器UEditor自定义上传图片接口

如下图:  然后修改ueditor.all.js 

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明] ----by 夏春涛 2014-02-20 ====================================================================== 运行环境: ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,