最近專案中用到了Ueditor富文字編輯器,趁還沒忘記,整理處理給需要的朋友;

專案環境

語言: Java(web)

工具:Eclipse, Ueditor

專案架構:SSM(springMVC, mybatis, spring)

使用步驟:

1:先去Ueditor官網下載其檔案包,(下載就不演示了)

2:目錄介紹(扒的是Ueditor官網的,具體的詳見Ueditor官網)

• dialogs: 彈出對話方塊對應的資源和JS檔案
• lang: 編輯器國際化顯示的檔案
• php或jsp或asp或net: 涉及到伺服器端操作的後臺檔案
• themes: 樣式圖片和樣式檔案
• third-party: 第三方外掛(包括程式碼高亮，原始碼編輯等元件）
• ueditor.all.js: 開發版程式碼合併的結果,目錄下所有檔案的打包檔案
• ueditor.all.min.js: ueditor.all.js檔案的壓縮版，建議在正式部署時採用
• ueditor.config.js: 編輯器的配置檔案，建議和編輯器例項化頁面置於同一目錄
• ueditor.parse.js: 編輯的內容顯示頁面引用，會自動載入表格、列表、程式碼高亮等樣式
• ueditor.parse.min.js: ueditor.parse.js檔案的壓縮版，建議在內容展示頁正式部署時採用

3:將下載的Ueditor編輯器的檔案包,拷貝進專案中,放在WebB-Root/js/下

4:在需要使用Ueditor編輯器的jsp引入相關的js檔案以及對編輯器初始化

4.1) 先引入js

<!-- 百度的UEditor富文字編輯器配置檔案 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_2/ueditor.config.js">

</script>
	<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_2/ueditor.all.min.js">
 

</script>

<!- 載入編輯器的容器 -->
	<script id="container" name="content" type="text/plain"></script>

	//初始化---這是js程式碼
	var ue = UE.getEditor('container',{
		toolbars:[//設定選單
			['anchor','|','undo','redo','bold','indent','italic','underline','strikethrough',]
		],
	autoHeightEnabled: false,//如果是false方可達到當編輯器內容很多時有滾動條
	    autoFloatEnabled: true,
	    initialFrameHeight: 300//設定編輯器高度
	});

目前只完成了整個功能的一半

5:修改Ueditor檔案包中幾個js檔案的配置

5.1:ueditor/jsp/config.js(此檔案負責編輯器所有上傳配置,此處只以圖片上傳為例,其它類似)

imageUrlPrefix:表示上傳後它會把圖片插入到編輯框中並展示,這個就是制定圖片訪問路徑(就是你上傳後的路徑);
imagePathFormat:表示圖片上傳目錄和圖片名字命名方式以及訪問主路徑的一部分,

只需要更改這兩個配置項即可,其它預設;

5.2:ueditor.config.js只需要修改:window.UEDITOR_HOME_URL || "/專案名/js/ueditor1_4_3_2/";

6效果展示