温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

在springmvc中使用Ueditor

发布时间:2020-08-01 15:20:05 来源:网络 阅读:2164 作者:huamulanyiyi 栏目:开发技术


Ueditor下载地址:

http://ueditor.baidu.com/website/download.html



在springmvc中使用Ueditor



  下载后直接解压缩。我主要实现文件上传和form表单提交数据。


一、配置文件修改 


uedit.config.js

  var URL = window.UEDITOR_HOME_URL; //主要是本地ueditor文件目录

  serverUrl: URL + "jsp/config.jhtml"  // 服务器统一请求接口路径


conf.json


 "p_w_picpathUrlPrefix": "http://localhost:8080/fetchbaike/ueditor/jsp/upload/", /* 图片访问路径前缀 */



二 、页面修改


 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
 <script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
tyle type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>

<form id="form"  method="post" action="./textarea.jhtml">
        <input type="text" name="goodsname" value="goodsname"  />
        <script type="text/plain" id="myEditor" name="myEditor">
          <p>欢迎使用UEditor!</p>
     </script>
        <input type="submit" value="提交"/>
</form>

<!-- editor的初始化 -->
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
   
    var editor_a = UE.getEditor('myEditor',{ 
    initialFrameWidth : 400,
       initialFrameHeight: 300});
    
   
   <!--用于上传文件跳转到controller-->
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    
    UE.Editor.prototype.getActionUrl = function(action) {
  
        if (action == 'uploadp_w_picpath' || action == 'uploadscrawl' || action == 'uploadp_w_picpath'
                || action == 'uploadvideo' || action == 'uploadfile') {
            return './ueditor/uploadp_w_picpath.jhtml';
        }else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
    
</script>
</body>



三、后台操作


@Controller
@RequestMapping(value="/ueditor")
public class UeditorController {

@RequestMapping(value="/jsp/config")
public void config(HttpServletRequest request,HttpServletResponse response,String action) throws Exception {
   
    request.setCharacterEncoding("utf-8");
    response.setHeader("Content-Type", "text/html");
    String rootPath=request.getSession().getServletContext().getRealPath("/");
    //会加载conf.json文件,注意路径问题
    response.getWriter().write(new ActionEnter(request,rootPath).exec());
}

@RequestMapping(value="/uploadp_w_picpath")
@ResponseBody
public Map<String,Object> uploadp_w_picpath(@RequestParam("upfile") MultipartFile[] multipartFiles,  HttpServletRequest request,HttpServletResponse response) throws Exception {
    Map<String,Object> map=new HashMap<String,Object>();
    String path=request.getSession().getServletContext().getRealPath("/ueditor/jsp/upload/");
    System.out.println("path++"+path);
    if(multipartFiles!=null && multipartFiles.length>0){
        //循环遍历
        for (MultipartFile multipartFile : multipartFiles) {
        
            //原来图片的名称
            String OriginalFilename=multipartFile.getOriginalFilename();
            
            //获得图片新名称
            String newFileName=getFileNewName(OriginalFilename.substring(OriginalFilename.lastIndexOf(".")));
           
            //创建文件
            File targetFile=new File(path,newFileName);
            if(!targetFile.exists()){
                targetFile.mkdirs();
            }
            String state="SUCCESS";
            try {
                multipartFile.transferTo(targetFile);
                map.put("original", OriginalFilename);
                map.put("name",newFileName);
                //注意url会和conf.json中的路径配合找到图片
                map.put("url", newFileName);
                map.put("state", "SUCCESS");
            } catch (Exception e) {
            state="FAIL";
            }
        }
    }
    return map;
}











向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI