百度编辑器Ueditor1.4.3的使用

1、首先第一步去到http://ueditor.baidu.com/website/download.html下载并解压

[1.4.3.3 Jsp 版本]   UTF-8版   GBK版  

2、创建一个项目工程，在jsp文件中引入Ueditor相关的js文件

3、在ueditor文件夹下配置config.json文件，其中百度编辑器主要的配置项是 UrlPrefix 和 PathFormat 这两项：

1）、图片上传：imagePathFormat、imageUrlPrefix

2）、涂鸦上传：scrawlPathFormat、scrawlUrlPrefix

   3）、截屏上传：snapscreenPathFormat、snapscreenUrlPrefix

   4）、附件上传：filePathFormat、fileUrlPrefix

   5）、视频上传：videoPathFormat、videoUrlPrefix

4、ImagePathFormat 的介绍

      作用：指定文件上传路径和返回路径，支持格式化。

例如，假设网站根目录是："C://apache/temp/"，以下是 imagePathFormat 的配置值以及对应的存放目录。

"/upload/{filename}" --> "C://apache/temp/upload/"

"upload/{filename}" --> "C://apache/temp/upload/"

"./upload/{filename}" --> "C://apache/temp/upload/"

5、指定文件保存目录：上传路径可以使用绝对路径和相对路径，推荐使用绝对路径的配置。

1)、使用“/”开头的根路径

imagePathFormat参数推荐使用“/”开头的配置，这样的值对于网站根目录的位置。

例子：网站根目录是“C://apache/temp”,imagePathFormat参数设置为“/upload/image/{filename}”,那么上传的位置在“C://apache/temp/upload/image/”的目录下

2）、使用非“/”开头的相对路径

imagePathFormat参数使用非 “/”开头的相对路径时，上传位置也是相对于网站根目录。

例如：网站根目录是“C://apache/temp/”,imagePathFormat 参数设置为 “../upload/{filename}”,那么上传位置在“C://apache/upload/”目录下。

6、ImageUrlPrefix 的介绍

作用：指定图片访问路径的前缀

1)、使用相对路径时

"imageUrlPrefix"：“/项目名称”

2)、使用绝对路径时

“imageUrlPrefix”："http://localhost:8080/项目名称"，其中其中localhost可以修改为对应的服务器地址

7、修改ueditor-config.js

(function () {

    var URL = window.UEDITOR_HOME_URL || "/项目名称/ueditor的文件夹在项目中的位置/";

 window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL:URL
        
        // 服务器统一请求接口路径
        , serverUrl: URL + "jsp/controller.jsp"

8、可能会出现问题的地方：

"imagePathFormat"这个属性要注意，可以使用默认的路径，但是使用默认的路径时可能出现了一个问题，

一开始我找不到我上传的图片在哪里，后来发现是在tomcat的webapps文件夹下的项目中，

但是找到位置之后，我上传了图片，第二天打开电脑发现图片都不显示了，文件夹下图片都空了，

原因是因为tomcat重启的时候会将这些临时文件都清空，所以就没有了，那怎么办呢？

于是我就修改了这个地址将图片上传到和项目文件平行的文件夹下，

比如：

"imagePathFormat": "/../temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

这样做，图片就不会被删除了。

9、完整的使用例子

例：假设例子情况如下

网站根目录：“C://apache/temp/”

上传文件名称是：“图片.jpg”

上传日期是：2018年01月10日

配置项imagePathFormat和imageUrlPrefix的值为：

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

imageUrlPrefix：“http://localhost:8080/项目名称”

那么上传的结果可能是这样的：

上传文件名为：a.jpg

文件上传到：“C://apache/temp/upload/image/20180110/”目录下

后端返回给前端的图片链接为：

“/upload/image/20180110/a.jpg”

插入到编辑器的图片链接为：

“http://localhost:8080/项目名称/upload/image/20180110/a.jpg”