百度编辑器Ueditor1.4.3的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/alert_Java_Song/article/details/79021356

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”

展开阅读全文

没有更多推荐了,返回首页