上次記錄了插入wangEditor，這次來(lái)記錄記錄插入百度的UEditor
怨念啊，百度的Ueditor功能多，兼容性也好，用的人也多，雖然很久沒(méi)更新過(guò)了，不過(guò)這不重要，最重要的一點(diǎn)就是：顏值不行??！目前接觸了三個(gè)富文本編輯器，wangEditor，UEditor，layui的LayEdit，哪個(gè)都能在顏值上完爆它。
進(jìn)入正題，剛開(kāi)始接觸的時(shí)候，以為這個(gè)UEditor挺麻煩的，沒(méi)想到如果只是基本的使用的話，挺簡(jiǎn)單的。
首先
在官網(wǎng)下載壓縮包，官網(wǎng)地址：https://ueditor.baidu.com/website/download.html
我下載的是開(kāi)發(fā)版的1.4.3.3 PHP的UTF-8版本。如下圖：
其次
將下載的壓縮包解壓到tp框架的public下的static下，如下圖：
至于為什么要解壓至這個(gè)文件夾呢？? 因?yàn)閔tml引用的時(shí)候用__STATIC__就可以很方便的指引到這個(gè)目錄下了啊┐(′-｀)┌
講道理，一般來(lái)講，你放在哪里都是可以的。
然后少少的幾行代碼就可以了
為了頁(yè)面好看，代碼放至文章末尾。
非常的方便，如下圖：
效果圖：
至于精簡(jiǎn)菜單欄？這個(gè)不在討論范圍，因?yàn)檫@個(gè)編輯器的菜單欄功能實(shí)在太多了，自己去文檔看著減少吧，
地址：http://fex.baidu.com/ueditor/#start-toolbar
內(nèi)容獲?。?/h4>
另，如果是form表單上傳，或者是ajax自動(dòng)獲取參數(shù)上傳的話，后臺(tái)接收的參數(shù)是那個(gè)name，也就是input('content')，但假如是ajax手寫(xiě)數(shù)據(jù)上傳的話，編輯器的內(nèi)容獲取是
ue.getContent();
如果是給編輯器賦值的話，可以直接在那個(gè)占位標(biāo)簽（也就是id為ueditor的script）的中間直接添加內(nèi)容，也可以
ue.setContent('hello');設(shè)置編輯器內(nèi)容
另，如果是form表單上傳，或者是ajax自動(dòng)獲取參數(shù)上傳的話，后臺(tái)接收的參數(shù)是那個(gè)name，也就是input('content')，但假如是ajax手寫(xiě)數(shù)據(jù)上傳的話，編輯器的內(nèi)容獲取是 ue.getContent();
如果是給編輯器賦值的話，可以直接在那個(gè)占位標(biāo)簽（也就是id為ueditor的script）的中間直接添加內(nèi)容，也可以 ue.setContent('hello');設(shè)置編輯器內(nèi)容
截至為此，已可以完成最基本的使用問(wèn)題，可以選擇直接往最文章末尾獲取代碼使用。
解釋一下幾個(gè)參數(shù)的意思
完整的請(qǐng)看文檔：http://fex.baidu.com/ueditor/#start-config
zIndex? ? ：UEditor的層次優(yōu)先級(jí)，如果發(fā)現(xiàn)有被遮擋的情況，修改這個(gè)值就好，默認(rèn)900，數(shù)字越大，優(yōu)先級(jí)越高
maximumWords? ? ：最大輸入字節(jié)限制，默認(rèn)10000，超出后會(huì)紅字在右下角提示"字?jǐn)?shù)超出最大允許值，服務(wù)器可能拒絕保存！"，也可以通過(guò)?wordOverFlowMsg 這個(gè)屬性自定義內(nèi)容，不過(guò)要注意的是原版內(nèi)容皆支持中英文轉(zhuǎn)換，自定義的內(nèi)容就沒(méi)這個(gè)福利了，除非你去修改源碼和語(yǔ)言包
scaleEnabled? ? ：是否可以拉伸長(zhǎng)高，但貌似輸入?yún)^(qū)域的寬度不會(huì)變，這可能是個(gè)bug，慎用！
initialFrameWidth? ? ：編輯器的寬度
initialFrameHeight????：編輯器輸入?yún)^(qū)域的高度，并不包括工具欄
autoHeightEnabled? ? ：輸入?yún)^(qū)域是否自動(dòng)長(zhǎng)高
常用的大概就上面的幾個(gè)了，下面講講上傳文件：
一般來(lái)講，解壓以后直接使用是沒(méi)有問(wèn)題的，
默認(rèn)是上傳的文件保存在當(dāng)前域名下的/ueditor/php/upload目錄下面，并且根據(jù)文件類(lèi)型自動(dòng)新建文件夾，且繼續(xù)生成{yyyy}{mm}{dd}格式的文件夾進(jìn)行保存
文件名格式則是{time}{rand:6}的格式。
例如編輯器在下面這個(gè)地址上傳文件的話，文件則是保存在localhost也就是www下面的\ueditor\php\upload\image\20180403，如果是服務(wù)器的話，則在域名下的文件夾里
那么問(wèn)題來(lái)了，假如我們想將上傳的文件保存在其他的文件夾怎么辦？往下看：
目光轉(zhuǎn)至我們最初解壓出來(lái)的文件夾ueditor，在下面的php文件夾里有一個(gè)config.json，將它打開(kāi)：
咳，歌詞忽略……
這里就是上傳文件的配置了，我們重點(diǎn)關(guān)注兩個(gè)內(nèi)容，一個(gè)是圖片訪問(wèn)路徑前綴，一個(gè)是上傳保存路徑，就是上圖紅框框里的代碼，我已經(jīng)將它改為了保存至我們框架下的public/ueditor/upload/image/{yyyy}{mm}{dd}里了。訪問(wèn)前綴可不改。
那么如果你需要修改的話，可以像上面一樣修改，注意事項(xiàng)有倆，一：目錄基于域名或localhost目錄下，而不是框架根目錄。二：每種上傳方式都得修改一次┐(′-｀)┌
附上代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>百度富文本編輯器</title>
</head>
<body>
<!-- UEditor的位置 -->
<script id="ueditor" name="content" type="text/plain"></script>
<!-- 百度富文本編輯器 -->
? ? <!-- 配置文件 -->
? ? <script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
? ? <!-- 編輯器源碼文件 -->
? ? <script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
? ? <!-- 實(shí)例化編輯器 -->
? ? <script type="text/javascript">
? ? ? ? // zIndex UEditor的層次優(yōu)先級(jí)，如果發(fā)現(xiàn)有被遮擋的情況，修改這個(gè)值就好
? ? ? // maximumWords 最大輸入字節(jié)限制，超出后會(huì)紅字在右下角提示"字?jǐn)?shù)超出最大允許值，服務(wù)器可能拒絕保存！"
? ? ? // scaleEnabled 是否可以拉伸長(zhǎng)高，但貌似輸入?yún)^(qū)域的寬度不會(huì)變，這可能是個(gè)bug
? ? ? ? // initialFrameWidth 編輯器的寬度
? ? ? // initialFrameHeight 編輯器輸入?yún)^(qū)域的高度，并不包括工具欄
? ? ? // autoHeightEnabled 輸入?yún)^(qū)域是否自動(dòng)長(zhǎng)高
? ? ? ? var ue = UE.getEditor('ueditor', {
? ? ? ? zIndex: 99,
? ? ? ? maximumWords: 999,
? ? ? ? scaleEnabled: true,
? ? ? ? initialFrameWidth: 800,
? ? ? ? initialFrameHeight: 300,
? ? ? ? autoHeightEnabled: false,}
? ? ? ? );
? ? </script>
</body>
</html>
大致就是這樣了，正常使用應(yīng)該是沒(méi)問(wèn)題了。
以上。
