UMEditor配置

Posted 2020-10-09

UMEditor配置

最近项目中需要用到富文本客户端。确定使用umeditor。首先在官网下载相应文件

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

笔者选择的jsp版本的。

目录结构如下

下面讲讲配置整合的经过。

 

引入相应js 及css。要注意顺序。

jquery.min.js  
third-party/template.min.js  
umeditor.min.js
umeditor.config.js
themes/default/css/umeditor.min.css

页面定义div

<div type="text/plain"id="career" name="career" style="width:100%;height:300px;" Readonly="true">
    <script type="text/javascript">
        mini.parse();
        var um = UM.getEditor(‘career‘);
 </script>

 整合完毕

umeditor.config.js是相应的配置文件，里面的说明比较全面。笔者需要自定义国际化和图片存储路径

写了两个js

  function getPath () {
//根路径
        varpathName=location.pathname;
       var host = ‘http://‘+location.host;
        returnhost+pathName.substring(0,pathName.substr(1).indexOf(‘/‘)+1);
 }
 
function getLanguage() {
     var language =getCookie("language");
     if(null ==language|| ""==language){
       language = navigator.browserLanguage?navigator.browserLanguage:navigator.language;
     }
     language =language.substring(0,2);
      if(language!="zh"){
        language ="en";
      }else{
        language ="zh-cn";
      }
     return language;
}

在umeditor.config.js 配置时进行引用

,imagePath: getPath()+"/"     //是取图片时的路径
,lang: getLanguage()
,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
imageUrl 这个参数是imageUp.jsp 所在路径，如果配置不对上传图片会404（可以不改）

本人将图片另放一个自定义目录

首先修改imageUp.jsp 中上传路径

注意要引入

<%@ page import="com.manage.common.util.Uploader" %>

注意自己的路径

默认是upload

修改setSavePath("img/upload") 中参数即可

同时还需修改Uploader.java 中获取绝对路径的方法

 private String getPhysicalPath(String path) {
       
       /*String servletPath =this.request.getServletPath();
       String realPath =this.request.getSession().getServletContext()
              .getRealPath(servletPath);
       return new File(realPath).getParent() +"/" +path;*/
       
       returnthis.request.getSession().getServletContext().getRealPath("/") + "/" + path;
        }

自此完成配置图片上传自定义位置

本文出自 “乔” 博客，请务必保留此出处http://thlovesky.blog.51cto.com/2297178/1970565