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

百度UEditor

資源與項(xiàng)目分離—完全教程

夏老師人真好

又求到一篇技術(shù)貼

來(lái)來(lái)來(lái)

繼續(xù)掏出小本本

什么是百度UEditor？

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

資源與項(xiàng)目分離的好處

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

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

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

前提1—下載百度UEditor

鏈接：

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

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

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

前提2—導(dǎo)入jar包

百度編輯器導(dǎo)入后會(huì)報(bào)錯(cuò)，是因?yàn)闆](méi)有導(dǎo)入jar包導(dǎo)致的，導(dǎo)入以下jar包

右鍵導(dǎo)入以上jar包即可

maven項(xiàng)目導(dǎo)入jar包操作(可選)

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

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

此處以u(píng)editor-1.1.2.jar作為演示

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

完成后我們就開始做資源與項(xiàng)目的分離操作

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

第一步：配置tomcat

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

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

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

因?yàn)榕渲昧颂摂M地址的原因，項(xiàng)目中但凡遇到圖片展示或上傳之類的需求，如果地址不對(duì)，則無(wú)法成功

在項(xiàng)目中配置文件存放的地方，新建一個(gè)配置文件“imgPath.properties”

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

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

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

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

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

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

第四步：修改百度源文件

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

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

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

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

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

修改為

/photo

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

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

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

需要在頁(yè)面頂部，也就是

標(biāo)簽內(nèi)，引入這樣一段js，這樣，js就不會(huì)報(bào)錯(cuò)了

圖片如下所示

body中這樣配置，form該怎么請(qǐng)求就怎么請(qǐng)求

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

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

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

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

在數(shù)據(jù)庫(kù)中最好使用longtext這種大文本字段來(lái)接收，因?yàn)閔tml字段太長(zhǎng)了，使用普通的varchar完全不夠用

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

首先需要一個(gè)隱藏域，否則，若是直接用js接收，則會(huì)被轉(zhuǎn)譯

html格式展示

與回顯相同，都需要一個(gè)隱藏域

然后需要使用div標(biāo)簽來(lái)包裹

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

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

如果直接用js來(lái)接收，則會(huì)出現(xiàn)

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

今天的課就上到這里

啾咪~拜

比較會(huì)裝傻會(huì)賣萌

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

責(zé)任編輯：

總結(jié)

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

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