一、准备
1、下载百度编辑器
http://ueditor.baidu.com/website/download.html#ueditor
三个版本可供选择,UBuilder出bug了一直下载不了,这里选择开发版本进行使用配置。
2、搭建好本地ftp服务器为上传文件做准备,可自己百度搭建,教程很多。
3、创建一个maven项目。
二、搭建与配置
1、解压缩下载好的百度编辑器压缩包,在新建的项目文件下的webapp下创建一个文件夹ueditor,把解压好的文件全部复制进去,如下所示:
2、仅仅只是学习一下百度编辑器的使用,所以直接在项目webapp下新建一个jsp文件,index.jsp——直接运行项目可进入该页面。
3、导包,找到ueditor下的jsp文件夹下lib文件夹,把里面的jar包全部复制到WEB-INF/lib下,并鼠标右键build path添加到工程中。
4、在index页面导入百度编辑器。首先在该页面head标签中引入:
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
然后在body标签中加入:
<script id="editor" type="text/plain" style="width:1024px;height:500px;">
</script>
最后在页面末尾加入:
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor('editor');
</script>
有很多操作的javascript方法,可根据自己的需要自行加入。
4、运行项目,可看到该页面说明成功导入了编辑器
:
三、文件图片上传ftp配置:
1、图片上传本地项目配置:
修改ueditor.config.js文件:
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: "/lztWeb/ueditor/jsp/controller.jsp"
修改ueditor/jsp/config.json文件,找到
"imageUrlPrefix": "http://172.31.61.51/lztWeb", /* 图片访问路径前缀 */
"imagePathFormat": "/static/java/image/{yyyy}{mm}{dd}/{time}{rand:6}"
到这一步,可以把文件上传到本地项目中
显然把文件上传到本地是不实际的,那么如何把文件上传到ftp服务器呢?在网上找了很多,最终依据该博客得以实现图片文件视频上传功能。
http://www.cnblogs.com/AlexLiu1986/p/4699764.html
这篇博客说的很详细,值得注意的是在自己重新写那四个类的时候要特别注意导包,不要把jar包与自己重新写的类导入错误。
下面是我自己实验无误的配置类:
https://pan.baidu.com/s/1bpJEMgn