原標題：百度富文本編輯器教程，從入門到放棄

百度UEditor

資源與項目分離—完全教程

夏老師人真好

又求到一篇技術貼

來來來

繼續(xù)掏出小本本

什么是百度UEditor？

百度UEditor是一款富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協(xié)議，允許自由使用和修改代碼…

資源與項目分離的好處

用戶要上傳和下載文件的話 一般上傳文件也是放在tomcat目錄或者Web服務器中。

但是隨著用戶上傳的文件增多，或者我們的靜態(tài)資源增加，會消耗Web服務器的性能，所以需要進行 靜態(tài)資源分離。

以Ubuntu16系統(tǒng)為例，Windows相同

前提1—下載百度UEditor

鏈接：

http://ueditor.baidu.com/website/download.html

在這里，我們選擇開發(fā)版中的Jsp版本，編碼選UTF-8版(如有GBK需求可選GBK)

下載好之后，解壓完成，然后復制整個文件夾到webroot下面，并將文件夾改名為baidu

前提2—導入jar包

百度編輯器導入后會報錯，是因為沒有導入jar包導致的，導入以下jar包

右鍵導入以上jar包即可

maven項目導入jar包操作(可選)

雖然此項是可選，但目前絕大多數(shù)項目都是maven項目，但是，有jar包，沒地址就沒法導入jar包，所以我們需要自己創(chuàng)建一個地址(注意，命令處有多處空格，最好用鼠標描一下，不聽勸告導致失敗，概不負責)

mvn install:install-file -Dfile=

/home/sweet/myeclipse2014_work/Peanut/src/main/webapp/baidu/jsp/lib/ueditor-1.1.

2.jar -DgroupId=com.baidu -DartifactId=ueditor -Dversion=1.1.2 -Dpackaging=jar

此處以ueditor-1.1.2.jar作為演示

在pom文件中使用如下配置，里面的內(nèi)容應和之前命令中的內(nèi)容一一對應完成后更新maven項目即可

完成后我們就開始做資源與項目的分離操作

在此處我是以linux系統(tǒng)作為演示，Java是跨平臺的語言，所以操作和windows平臺一樣

第一步：配置tomcat

在tomcat的conf文件夾下找到server.xml文件，打開，在最后的標簽上面輸入下面這條語句

第二步：編寫配置文件(可選操作)

項目在部署時，不同的系統(tǒng)可能使用的虛擬路徑不一樣，所以我們需要編寫配置文件，到時更改虛擬路徑時只需要更改配置文件即可

因為配置了虛擬地址的原因，項目中但凡遇到圖片展示或上傳之類的需求，如果地址不對，則無法成功

在項目中配置文件存放的地方，新建一個配置文件“imgPath.properties”

內(nèi)容輸入：workspacePath=/home/sweet/huasheng/img

配置文件搞定后，在網(wǎng)上down一個PropertiesUtils，讀取配置文件

注：windows下路徑是 而linux下路徑是 /,所以，若想路徑通用，則需要使用File.separator

第三步：更改config.json配置文件

具體位置在baidu/jsp文件夾下

只需要更改選中部分即可，每一個 ../ 都代表返回上級目錄，具體需要多少個，則需要看你的項目所在文件夾與頂級目錄的之間的距離，若你的虛擬路徑就在tomcat中，則需要達到與其平級目錄下

第四步：修改百度源文件

打開controller.jsp文件，與上面的配置文件處于同級目錄

通過上圖可以看到，百度是直接輸出了某些東西到頁面上的，我們通過攔截這些數(shù)據(jù)發(fā)現(xiàn)，其實是一段json字符串，第一次輸出：在剛進入百度編輯器頁面時會輸出一遍，通過查看抓取到的數(shù)據(jù)發(fā)現(xiàn)，沒有我們想要的東西(圖片內(nèi)容過于羅嗦而且沒用，這個階段就不放了)

于是我們開始上傳圖片，發(fā)現(xiàn)抓取到一串非常有用的字符串

首先狀態(tài)為success，通過這個可以發(fā)現(xiàn)，其實百度是通過異步來完成圖片上傳的，然后就看到url后面的一串../ 當回到編輯器的時候，我們發(fā)現(xiàn)這個圖片不能顯示，使用瀏覽器自帶的元素查看器發(fā)現(xiàn)，img的地址就是這個url，于是在元素查看器中嘗試修改代碼，將

../../../../../huasheng/img

修改為

/photo

然后發(fā)現(xiàn)圖片顯示出來了，所以我們就可以想到使用字符串替換功能，將上面的相對地址改為tomcat中配置的虛擬地址，所以我們就把這個jsp頁面修改為

這樣，我們就發(fā)現(xiàn)，無論怎么上傳圖片，圖片不僅會正確的上傳到相應的地址，還會正確的顯示，至此百度編輯器的資源與項目分離的教程結束。

第五步：頁面內(nèi)容配置

需要在頁面頂部，也就是

標簽內(nèi)，引入這樣一段js，這樣，js就不會報錯了

圖片如下所示

body中這樣配置，form該怎么請求就怎么請求

<>標簽里面需要設置一個屬性name，這里的name等于什么，后臺就用String類型的這種參數(shù)接收

例如圖片上name=”myEditor” 那么在springMVC里面直接用String myEditor 接收 就可以了上述圖片包含回顯方法

百度編輯器的原理及數(shù)據(jù)庫保存

其實百度編輯器就是將編輯好的html代碼返回給后臺，后臺使用String類型接收即可

在數(shù)據(jù)庫中最好使用longtext這種大文本字段來接收，因為html字段太長了，使用普通的varchar完全不夠用

編輯器數(shù)據(jù)回顯

首先需要一個隱藏域，否則，若是直接用js接收，則會被轉譯

html格式展示

與回顯相同，都需要一個隱藏域

然后需要使用div標簽來包裹

如果直接使用el表達式，則會出現(xiàn)頁面顯示html代碼的情況

所以需要一個隱藏域來接收他，然后使用innerHTML對這個div的內(nèi)容進行回寫即可

如果直接用js來接收，則會出現(xiàn)

使用隱藏域接收然后回寫到div，則可以正常顯示

今天的課就上到這里

啾咪~拜

比較會裝傻會賣萌

比較想你關注我(*￣?￣*)返回搜狐，查看更多

責任編輯：

總結

以上是生活随笔為你收集整理的百度富文本编辑jsp上传_百度富文本编辑器教程，从入门到放弃的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。