手把手教你--百度富文本编辑器Ueditor的使用和上传图片/文件到项目外（ueditor自定义上传路径）

概述

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

官网地址：http://ueditor.baidu.com/website/ （学习编辑器最好之地）

其实官网的教程已经很全面了，所有的API也建议从官网学习，这里只是给大家介绍下简单使用，重头戏是后面介绍的如何将文件、图片保存至项目外，其实用到富文本编辑器，主要就是保存大文本数据值，里面的图片资源一般是要放到项目外或图片服务器路径中，网上找了很多，几乎都是一种解决方案，我将更细致的带你走到关键地点，及如何配置。

下载地址：http://ueditor.baidu.com/website/download.html#ueditor    下载对应的版本即可，源码想看的可以下源码。

 下载后，直接复制到项目里，我放在了js文件下，因为springMVC对静态文件的限制，所以放js目录下，客官随意放。

 

将jsp中的lib包复制到WEB-INF下的lib里。如图：记着将lib包添加built path中，ueditor.jar不带版本是因为，这里我替换了自己打的jar，后面有介绍，自己的jar包--下载地址：https://download.youkuaiyun.com/download/javayoucome/10644901   （1积分）

好了，可以开始创建测试页了。

按官网的提示建议，页面上要定义window.UEDITOR_HOME_URL来，这是前端配置文件中必须配置的路径，这个路径就是ueditor.config.js文件所在的目录，页面里设置好，ueditor.config.js文件就可以不用动了。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
    <script type="text/javascript">
   	 	window.UEDITOR_HOME_URL = "${basePath }/js/ueditor/"
    </script>
</head>
<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="${basePath }/js/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="${basePath }/js/ueditor/ueditor.all.min.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

ok，前端配置文件已经写好，运行项目，访问测试jsp，不出意外的页面。

至此，前端页面完成，如果你点击多图上传出现以下样子，图片、文件上传还需要后台配置文件的支持。

检查能不能访问到，若不行，请查看文档修改至可以访问，参考文档：http://fex.baidu.com/ueditor/#server-deploy。

在ueditor/jsp目录下的config.json就是后台上传功能的配置文件，先来看一眼。

官网上传路径的配置说明：http://fex.baidu.com/ueditor/#server-path

按需要只修改，配置项的最后一行即可，是保存到本项目下的路径。

如果，你的项目只需要将文件、图片保存到项目里，至此可结束。

---

如果你的项目要把文件放在指定目录下，如d:\image或linux中的“/data/image”中，则ueditor不改源码是做不到的了，网上找了很多资料，几乎都是出自一家写法，我也是参考了那个博主，链接：https://blog.youkuaiyun.com/zrk1000/article/details/49885789，大家可以学习改写。

本人已经把源码改好，并将源码打成jar包，如果，你着急使用，可以去下载我的ueditor.jar，直接将项目中的ueditor-1.1.2.jar替换为下载的ueditor.jar就ok了，当然后面配置参数还是需要改的。

下载地址：https://download.youkuaiyun.com/download/javayoucome/10644901   （1积分）（不贪图积分的人）

原理其实是将后台配置文件自定义一个配置项，然后文件上传时，提取配置的地址，将此地址和原本上传路径组合成新的“物理地址”，用此jar包，则需要在后台配置文件中一个添加“physicsPath”的配置项，此地址值“d:/data/image/www/product”会和imagePathFormat的值“/{yyyy}/...”组合后存在本机的“d:/data/image/www/product/2018/...”下。

如果上传成功后， 编辑器中不显示图片，如上图，其实只要是提示上传成功，文件上传已经ok，只是上传后，富文本编辑器会向你配置文件中配置项组合“imageUrlPrefix”和“imagePathFormat”发送http请求那张图片，例子里的配置会发送如http://img.eyaoshun.com/product/2018/09/04/1536043859648060089.png，肯定是没有的，真正在生产环境里，我们会有静态图片服务器，如域名指向到服务器的地址下，则“imageUrlPrefix”写指定到对应图片地址就好。本例子中用的ngix服务器，域名“http://img.eyaoshun.com”指向的是那台服务器的地址是"/data/image/www"。

所以先将图片上传完成是第一步，再考虑请求路径的问题，若是本地测试，可以修改tomcat的虚拟路径来实现在富文本框中的图片回显；如：在tomcat配置文件server.xml添加虚拟路径，即访问http://locahost:8080/product，就表示访问D:\data\image\www\product，控制好“imageUrlPrefix”和“imagePathFormat”的值，实现本地也可在编辑器显示图片了。

<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">
		<!-- 设置图片虚拟路径[访问时路径为/product -->  
         <Context path="/product" docBase="D:\data\image\www\product" reloadable="true" />  
      </Host>

好了，说了这么多废话了，有什么问题，留言吧。

（完）