百度编辑器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”

百度编辑器Ueditor1.4.3的使用相关推荐

百度编辑器上传图片自定义路径，访问路径动态加载
在用百度编辑器时发现他以前的上传图片只能上传到项目的根目录下这叫人很郁闷,在网上找了一些资料,现在记录一下. 1.首先在config.json中添加root路径,这里我起名叫uploadRoot字段 ...
百度编辑器百度编辑器
百度编辑器(UEditor)开发教程--教你如何二次开发扩展插件(按钮插件) 技术朱言俊 2016-10-29 阅读:1513 发送到手机对于网站建设中使用的富文本编辑器不得不提百度的富文本编辑 ...
springmvc整合百度编辑器
前言最近搭建个人博客站,少不了编辑器的整合,现在就分享下springMVC整合百度编辑器的一些心得. 简单步骤 1.百度编辑器官网下载开发版的完整源码.官网地址,点我进去可以选择最新的jsp的ut ...
ueditor百度编辑器上传图片出现后端未配置好，不能正常加载插件
项目使用百度编辑器,上传图片的时候出现后端未配置好,不能正常加载插件: 主要原因就是百度编辑器下面需要的几个jar并没有引用到项目的lib文件夹下红框的这几个插件都需要加入到lib文件夹下,我的是m ...
关于百度编辑器UEditor在asp.net中的使用方法！
为了完成自己想要的功能效果,在项目中使用到了百度编辑器,为了搞明白,苦心学习查资料搞了整整一天,总结一下. 在asp.net 的项目中目前我觉得有两种情况,一种是没有使用模板页的,一种是使用了模板页的 ...
DWZ(J-UI)整合百度编辑器(UEditor)
首先,在dwz.ui.js中找到 if($.fn.xheditor){ $("textarea.editor",$p).each(function(){ var $this=$(t ...
yii2-Ueditor百度编辑器
今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考. 资源下载 yii2.0-ueditor下载路径: https://link.jiansh ...
百度编辑器（ueditor）@功能之获取坐标
//获取百度编辑器的工具类var domUtils = UE.dom.domUtils;//获取编辑器的坐标var $ueditor_offset = $("#ueditor_0" ...
编辑按钮 php,自定义百度编辑器菜单按钮
首先打开自定义字段中的百度编辑器字段属性,如下图选择自定义,然后在工具栏中写上想要的按钮英文字符,格式如下:'按钮字母', '按钮字母2', '按钮字母3' 完整的按钮表:'undo', 'redo ...

百度编辑器Ueditor1.4.3的使用

百度编辑器Ueditor1.4.3的使用相关推荐

最新文章

热门文章