maven中整合ueditor步驟與常見問題(一)

整合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中添加其依賴即可


發佈了101 篇原創文章 · 獲贊 123 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章