当前位置:文档之家› Java web工程里UEditor网页编辑器的使用

Java web工程里UEditor网页编辑器的使用

Java web工程里UEditor网页编辑器的使用
第一步:
在UEditor官网下载开发版本中jsp版本的资源包,得到
ueditor1_2_6_1-utf8-jsp.zip
/website/download.html
第二步:
在工程WebRoot目录下新建文件夹ueditor,解压资源包,将得到的所有资源全部拷贝到WebRoot/ueditor/中。

第三步:
在src下创建包路径mon,将解压得到的jsp文件夹里Uploader.java拷贝到common中去。

第四步:
将解压得到的jsp文件夹里commons-fileupload-1.2.2.jar、ueditor.jar拷贝到WebRoot/WEB-INF/lib中以添加到工程。

第五步:
Ueditor默认是将文件imageUp.jsp所在目录作为上传文件的根目录,若需要修改保存根目录,则可以将uploader.java中方法private String getPhysicalPath(String path)的方法体代码修改为:
//此处我修改为工程根目录/upload/日期/文件名这种格式
String realPath = this.request.getSession().getServletContext().getRealPath("/");
return new File(realPath) +"/" +path;
如果要修改upload这一级目录,可以修改uploader.java中private String savePath = "upload";该值得配置。

第六步:
回到jsp中,首先编写以下js代码:
<script type="text/javascript">
//修正上传控件根路径
window.UEDITOR_HOME_URL =
"${pageContext.request.contextPath}/ueditor/";
//工程根路径,便于上传成功图片地址回传并显示图片
window.REAL_PATH = "${pageContext.request.contextPath}/";
</script>
再引入三个js文件ueditor.all.js、ueditor.config.js、lang/zh-cn/zh-cn.js,一定是在以上代码之后引入。

在需要使用编辑器的位置,添加代码如下:
<textarea id="myEditor" name="content">这里写你的初始化内容</textarea> <script type="text/javascript">
UE.getEditor("myEditor");
</script>
其中name值为服务器获取表单值所需的key。

第七步:
如果编辑器大小没有被撑开或者不是你想要的大小,可以在配置文件中找到以下两行代码取消前面的”//”注释,按照需要修改高宽配置:
,initialFrameWidth:800
,initialFrameHeight:320
注意保留”,”号。

第八步:
ueditor配置文件为ueditor.config.js,在该文件中找到代码行imagePath: URL + "jsp/",将其修改为imagePath:window.REAL_PATH,目的在于修正上传成功后图片地址回传显示所需的根目录。

相关主题