整合ueditor步驟(這裏使用的1.1.2版本的ueditor)
1.在jsp頁面中引入相關的文件
<!-- 富文本編輯器引入文件 -->
<script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
2.下載ueditor,解壓後將ueditor目錄複製到自己項目路徑下
3.創建編輯器實例及其DOM容器,先在jsp頁面中添加一個<textarea>容器,再用腳本創建ueditor編輯器
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/header.jsp" %>
<!-- 富文本編輯器引入文件 -->
<script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
<style>
body {
background: #f0f4ff;
}
</style>
<body style="width:95%;height:100% ;overflow:auto">
<div style="padding:10px 10px 20px 10px">
<form id="actionform" method="post">
<table cellpadding="5" style="font-size: 14px">
<tr>
<td>新聞內容:</td>
<td><textarea name="news" id="news"></textarea></td>
</tr>
</table>
</form>
</div>
</body>
<script>
//ueditor編輯器
UE.getEditor('news');
</script>
<!-- 富文本編輯器引入文件 -->
<script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
<style>
body {
background: #f0f4ff;
}
</style>
<body style="width:95%;height:100% ;overflow:auto">
<div style="padding:10px 10px 20px 10px">
<form id="actionform" method="post">
<table cellpadding="5" style="font-size: 14px">
<tr>
<td>新聞內容:</td>
<td><textarea name="news" id="news"></textarea></td>
</tr>
</table>
</form>
</div>
</body>
<script>
//ueditor編輯器
UE.getEditor('news');
</script>
這裏需要注意的是紅色字體標示的部分,這麼寫可以解決ueditor工具欄被懸置在頁面頂端無法下來的問題,如下圖所示:
4.做到這裏ueditor還沒有配置完成,還需要在pom.xml中加載ueditor的依賴,先運行整合ueditor的頁面,可看到後臺報錯如下:
現在在pom.xml中加載ueditor的依賴jar包:
<!-- 添加Ueditor依賴 -->
<dependency>
<groupId>com.baidu</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
</dependency>
5.到這裏,ueditor基本配置完成,這裏再介紹可能遇到的問題:
後臺報org.json.JSONObject找不到類的錯誤,只需要在pom.xml中添加其依賴即可