上次記錄了插入wangEditor抬吟，這次來記錄記錄插入百度的UEditor
怨念啊，百度的Ueditor功能多，兼容性也好缀程，用的人也多缺亮，雖然很久沒更新過了蜗字，不過這不重要盗迟，最重要的一點(diǎn)就是：顏值不行！惭蹂！目前接觸了三個(gè)富文本編輯器伞插，wangEditor，UEditor盾碗，layui的LayEdit媚污，哪個(gè)都能在顏值上完爆它。
進(jìn)入正題廷雅，剛開始接觸的時(shí)候杠步，以為這個(gè)UEditor挺麻煩的，沒想到如果只是基本的使用的話榜轿，挺簡單的。
首先
在官網(wǎng)下載壓縮包朵锣，官網(wǎng)地址：https://ueditor.baidu.com/website/download.html
我下載的是開發(fā)版的1.4.3.3 PHP的UTF-8版本谬盐。如下圖：
其次
將下載的壓縮包解壓到tp框架的public下的static下，如下圖：
至于為什么要解壓至這個(gè)文件夾呢诚些？? 因?yàn)閔tml引用的時(shí)候用__STATIC__就可以很方便的指引到這個(gè)目錄下了啊┐(′-｀)┌
講道理飞傀，一般來講皇型，你放在哪里都是可以的。
然后少少的幾行代碼就可以了
為了頁面好看砸烦，代碼放至文章末尾弃鸦。
非常的方便，如下圖：
效果圖：
至于精簡菜單欄幢痘？這個(gè)不在討論范圍唬格，因?yàn)檫@個(gè)編輯器的菜單欄功能實(shí)在太多了，自己去文檔看著減少吧颜说，
地址：http://fex.baidu.com/ueditor/#start-toolbar
內(nèi)容獲裙焊凇：
另，如果是form表單上傳门粪，或者是ajax自動獲取參數(shù)上傳的話喊积，后臺接收的參數(shù)是那個(gè)name，也就是input('content')玄妈，但假如是ajax手寫數(shù)據(jù)上傳的話乾吻，編輯器的內(nèi)容獲取是 ue.getContent();
如果是給編輯器賦值的話，可以直接在那個(gè)占位標(biāo)簽（也就是id為ueditor的script）的中間直接添加內(nèi)容拟蜻，也可以 ue.setContent('hello');設(shè)置編輯器內(nèi)容
截至為此绎签，已可以完成最基本的使用問題，可以選擇直接往最文章末尾獲取代碼使用瞭郑。
解釋一下幾個(gè)參數(shù)的意思
完整的請看文檔：http://fex.baidu.com/ueditor/#start-config
zIndex? ? ：UEditor的層次優(yōu)先級辜御，如果發(fā)現(xiàn)有被遮擋的情況，修改這個(gè)值就好屈张，默認(rèn)900擒权，數(shù)字越大，優(yōu)先級越高
maximumWords? ? ：最大輸入字節(jié)限制阁谆，默認(rèn)10000碳抄，超出后會紅字在右下角提示"字?jǐn)?shù)超出最大允許值，服務(wù)器可能拒絕保存场绿！"剖效，也可以通過?wordOverFlowMsg 這個(gè)屬性自定義內(nèi)容，不過要注意的是原版內(nèi)容皆支持中英文轉(zhuǎn)換焰盗，自定義的內(nèi)容就沒這個(gè)福利了璧尸，除非你去修改源碼和語言包
scaleEnabled? ? ：是否可以拉伸長高，但貌似輸入?yún)^(qū)域的寬度不會變熬拒，這可能是個(gè)bug爷光，慎用！
initialFrameWidth? ? ：編輯器的寬度
initialFrameHeight????：編輯器輸入?yún)^(qū)域的高度澎粟，并不包括工具欄
autoHeightEnabled? ? ：輸入?yún)^(qū)域是否自動長高
常用的大概就上面的幾個(gè)了蛀序，下面講講上傳文件：
一般來講欢瞪，解壓以后直接使用是沒有問題的，
默認(rèn)是上傳的文件保存在當(dāng)前域名下的/ueditor/php/upload目錄下面徐裸，并且根據(jù)文件類型自動新建文件夾遣鼓，且繼續(xù)生成{yyyy}{mm}{dd}格式的文件夾進(jìn)行保存
文件名格式則是{time}{rand:6}的格式。
例如編輯器在下面這個(gè)地址上傳文件的話重贺，文件則是保存在localhost也就是www下面的\ueditor\php\upload\image\20180403骑祟，如果是服務(wù)器的話，則在域名下的文件夾里
那么問題來了檬姥，假如我們想將上傳的文件保存在其他的文件夾怎么辦曾我？往下看：
目光轉(zhuǎn)至我們最初解壓出來的文件夾ueditor，在下面的php文件夾里有一個(gè)config.json健民，將它打開：
咳抒巢，歌詞忽略……
這里就是上傳文件的配置了，我們重點(diǎn)關(guān)注兩個(gè)內(nèi)容秉犹，一個(gè)是圖片訪問路徑前綴蛉谜，一個(gè)是上傳保存路徑，就是上圖紅框框里的代碼崇堵，我已經(jīng)將它改為了保存至我們框架下的public/ueditor/upload/image/{yyyy}{mm}{dd}里了型诚。訪問前綴可不改。
那么如果你需要修改的話鸳劳，可以像上面一樣修改狰贯，注意事項(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)先級，如果發(fā)現(xiàn)有被遮擋的情況幔摸，修改這個(gè)值就好
? ? ? // maximumWords 最大輸入字節(jié)限制摸柄，超出后會紅字在右下角提示"字?jǐn)?shù)超出最大允許值，服務(wù)器可能拒絕保存既忆！"
? ? ? // scaleEnabled 是否可以拉伸長高驱负，但貌似輸入?yún)^(qū)域的寬度不會變，這可能是個(gè)bug
? ? ? ? // initialFrameWidth 編輯器的寬度
? ? ? // initialFrameHeight 編輯器輸入?yún)^(qū)域的高度患雇，并不包括工具欄
? ? ? // autoHeightEnabled 輸入?yún)^(qū)域是否自動長高
? ? ? ? var ue = UE.getEditor('ueditor', {
? ? ? ? zIndex: 99,
? ? ? ? maximumWords: 999,
? ? ? ? scaleEnabled: true,
? ? ? ? initialFrameWidth: 800,
? ? ? ? initialFrameHeight: 300,
? ? ? ? autoHeightEnabled: false,}
? ? ? ? );
? ? </script>
</body>
</html>
大致就是這樣了跃脊，正常使用應(yīng)該是沒問題了。
以上苛吱。
