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

标签: 百度富文本编辑器  百度ueditor使用  ueditor图片上传项目外  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.csdn.net/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.csdn.net/zrk1000/article/details/49885789,大家可以学习改写。

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

下载地址:https://download.csdn.net/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>

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

(完)

原文链接:加载失败,请重新获取