Java maven项目集成ueditor实例

1，首先需要下载ueditor包我下载的是 ueditor1_4_3_3-utf8-jsp ，我使用的jsp页面编码是utf-8，然后引入项目里面把相关的js和css 配置到配置文件中

下载地址：http://ueditor.baidu.com/website/download.html

截图：

在pom.xml中加入


<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>

</dependency>

在WEB-INF的lib下加入jar包，ueditor-1.1.2.jar

2.前台页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>写博客页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/static/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="Assets/ueditor-ts/lang/zh-cn/zh-cn.js"></script>



<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/static/ueditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">

function submitData(){
var title=$("#title").val();
var blogTypeId=$("#blogTypeId").combobox("getValue")
var content=UE.getEditor('editor').getContent()
var keyWord=$("#keyWord").val();

if(title==null || title==''){
alert("请输入标题！");
}else if(blogTypeId==null || blogTypeId==''){
alert("请选择博客类别！");
}else if(content==null || content==''){
alert("请填写内容！");
}else{
$.post("${pageContext.request.contextPath}/admin/blog/save.do",{'title':title,'blogType.id':blogTypeId,
'content':content,'summary':UE.getEditor('editor').getContentTxt().substr(0,155),'keyWord':keyWord},function(result){
if(result.success){
alert("博客发布成功！");
resultValue();
}else{
alert("博客发布失败！");
}
},"json");
}
}

function resultValue(){
$("#title").val("");
$("#blogTypeId").combobox("setValue","");
UE.getEditor('editor').setContent('');
$("#keyWord").val("");
}
</script>
</head>
<body style="margin: 10px">

<div id="p" class="easyui-panel" title="编写博客" style="padding: 10px">
<table cellspacing="20px">
<tr>
<td width="80px">博客标题：</td>
<td>
<input type="text" id="title" name="title" style="width: 400px"/>
</td>
</tr>
<tr>
<td>所属类别：</td>
<td>
<select class="easyui-combobox" style="width: 154px" id="blogTypeId" name="blogType.id" editable="false" panelHeight="auto">
<option value="">请选择博客类别...</option>
<c:forEach var="blogType" items="${blogTypeCountList }">
<option value="${blogType.id }">${blogType.typeName }</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td valign="top">博客内容：</td>
<td>
<script id="editor" name="content" type="text/plain" style="width:100%;height:500px;"></script>
</td>
</tr>
<tr>
<td>关键字：</td>
<td>
<input type="text" id="keyWord" name="keyWord" style="width: 400px"/> (多个关键字中间用空格隔开)
</td>
</tr>
<tr>
<td></td>
<td>
<a href="javascript:submitData()" class="easyui-linkbutton" data-options="iconCls:'icon-submit'">发布博客</a>
</td>
</tr>
</table>
</div>

<script type="text/javascript">
var ue = UE.getEditor('editor');

</script>
</body>

</html>：

前台页面效果如上图

3.图片的上传，以及各种配置

配置ueditor/jsp/lib/config.json

图片上传默认地址：

/* 上传图片配置项 */

"imagePathFormat": "/static/userImages/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

/* 截图工具上传 */

"snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

/* 上传文件配置 */

"filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

按自己需求来上传图片到指定目录下就行

我放在static/userImages下，我自己修改配置文件如下：

修改一下配置文件：ueditor/jsp/lib/config.json

"imagePathFormat": "/static/userImages/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"snapscreenPathFormat": "/static/userImages/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

4.不懂ueditor编辑器的常用接口的话自己去官网看一下：地址：http://ueditor.baidu.com/website/umeditor.html

Java maven项目集成ueditor实例

猜你喜欢