在官网上下载最新的UEditor压缩包,官网下载地址:http://ueditor.baidu.com/website/download.html
在解压后的文件夹中找到下图中相同的文件并添加到项目中:
其中.java文件在:ueditor-1.4.3.3\jsp\src\com\baidu\ueditor
fileUpload.js、ueditor.all.min.js在下载的压缩包里没有
添加好所有文件后,需要配置ueditor.config.js文件里的serverUrl属性:
serverUrl: URL + "jsp/controller.jsp"
如果在添加.java文件时出现这两个包报错,是因为缺少了jar包:
import org.json.JSONArray;
import org.json.JSONObject;
解决方法:
在pom.xml中添加如下代码,让maven下载其依赖包即可:
<!-- JSON -->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20180130</version>
</dependency>
在jsp中如何使用ueditor ?
在需要使用的jsp中引用UEditor的js
<table class="formTable">
<tr>
<td>内容:</td>
<td>
<textarea style="display: none" name="content" id="content">${aboutUs.content }</textarea>
</td>
<td name="uecontent" id="uecontent"></td>
</tr>
</table>
<script type="text/javascript" src="URL/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="URL/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
UE.delEditor("uecontent");
var editUE = UE.getEditor('uecontent', {
autoHeight: true,
initialFrameWidth: '100%'
});
editUE.addListener("ready", function () {
editUE.setContent('${aboutUs.content}');
});
</script>
使用UEditor时遇到的问题:
解决方法:在方法里添加如下几行代码即可
onOpen:function(){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
onMove:function(left,top){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
onResize:function(width,height){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
示例:
function createContent(){
d=$("#dlg").dialog({
title: '添加内容',
width: 600,
height: 500,
href:'',
maximizable:true,
modal:false,
onOpen:function(){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
onMove:function(left,top){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
onResize:function(width,height){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
buttons:[{
text:'确认',
handler:function(){
$("#mainform").submit();
}
},{
text:'取消',
handler:function(){
d.panel('close');
}
}]
});
}
效果如图:
上传图片并显示图片:
解决方法:
1、先检查ueditor.config.js文件中的serverUrl是否在自己目录的对应位置,Controller.jsp文件在下载的ueditor解压后的位置是:ueditor/jsp/:
serverUrl: URL + "jsp/controller.jsp"
2、配置图片访问路径前缀和上传保存路径。
为了能够让图片在编辑器里面显示,我们还需要配置图片访问路径前缀和上传保存路径。
1)打开ueditor/jsp文件夹下面的config.json文件,需要修改的属性有:
/* 假设项目名称为:LeeSystem */
/* 上传图片配置项 */
"imageUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */
"imagePathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* 涂鸦图片上传配置项 */
"scrawlPathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"scrawlUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */
/* 截图工具上传 */
"snapscreenPathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"snapscreenUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */
/* 抓取远程图片配置 */
"catcherPathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */
/* 上传视频配置 */
"videoPathFormat": "/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "/LeeSystem", /* 视频访问路径前缀 */
/* 上传文件配置 */
"filePathFormat": "/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"fileUrlPrefix": "/LeeSystem", /* 文件访问路径前缀 */
/* 列出指定目录下的图片 */
"imageManagerListPath": "/upload/image/", /* 指定要列出图片的目录 */
"imageManagerUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */
/* 列出指定目录下的文件 */
"fileManagerListPath": "/upload/file/", /* 指定要列出文件的目录 */
"fileManagerUrlPrefix": "/LeeSystem", /* 文件访问路径前缀 */
修改完这些配置信息时,照片就可以显示出来了,如图: