最近在有幾個(gè)網(wǎng)站的項(xiàng)目，需要用到富文本編輯器，服務(wù)器端采用的是PHP語(yǔ)言，之前知道國(guó)外有幾款比較好，如TinyMCE。但是由于沒(méi)有接觸過(guò)，估計(jì)配置起來(lái)需要一點(diǎn)精力。于是百度了一下，找到了百度自家的富文本編輯器UEditor?？戳艘幌?，還不錯(cuò)，功能非常齊全，于是就用到項(xiàng)目中。
關(guān)于UEditor
UEditor是一套開(kāi)源的在線HTML編輯器，主要用于讓用戶(hù)在網(wǎng)站上獲得所見(jiàn)即所得編輯效果，開(kāi)發(fā)人員可以用 UEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。UEditor 使用 JavaScript 編寫(xiě)，可以無(wú)縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。
UEditor的項(xiàng)目主頁(yè)為：http://ueditor.baidu.com/，可以在項(xiàng)目主頁(yè)下載完整源碼包。
關(guān)于在項(xiàng)目網(wǎng)站已有的介紹，本文簡(jiǎn)單略過(guò)。本文主要講述我在UEditor的安裝與使用過(guò)程中遇到的一些問(wèn)題，及需要注意的事項(xiàng)，特別是文件上傳中的路徑問(wèn)題。如果你連網(wǎng)站路徑或者說(shuō)網(wǎng)站目錄這些基本概念都不清楚，建議你不要繼續(xù)看下去了。
安裝與部署
第一步：下載UEditor到相應(yīng)的目錄。（后續(xù)路徑請(qǐng)視自己的情況修改）
第二步：引入入口js文件。在需要使用的頁(yè)面頭部引入。
第三步：使用js創(chuàng)建編輯器實(shí)例及其DOM容器。（注意使用textarea的id初始化）
第四步（重要）：修改editor_config.js文件，主要是URL變量，在最上面加上以下內(nèi)容。（根據(jù)自己的路徑寫(xiě)）
window.UEDITOR_HOME_URL = "/kx/share/ueditor/";
注意：如果將該路徑寫(xiě)錯(cuò)了，將導(dǎo)致無(wú)法加載編輯器。
OK，經(jīng)過(guò)以上四步即可完成配置，并且默認(rèn)情況下，上傳文件功能均可正常運(yùn)行。
自定義配置
默認(rèn)情況下，可以在項(xiàng)目下載頁(yè)進(jìn)行配置，但是沒(méi)有手工寫(xiě)來(lái)的簡(jiǎn)便?？梢栽趧?chuàng)建編輯器實(shí)例的時(shí)候，進(jìn)行初始化配置。也就在是“安裝與部署”的第三步，利用js創(chuàng)建實(shí)例的時(shí)候，傳入json格式的配置參數(shù)即可。
例如，我的配置如下：
UE.getEditor('content',
{toolbars:[["source",'|',"undo","redo",'|',"bold","italic","underline","strikethrough",'|', 'insertorderedlist', 'insertunorderedlist', '|',"superscript","subscript",'|',"justifyleft","justifycenter","justifyright","justifyjustify",'|',"indent","rowspacingbottom","rowspacingtop","lineheight","|",'selectall', 'cleardoc'],["fontfamily","fontsize", '|',"forecolor","backcolor", '|',"pasteplain",'removeformat', 'formatmatch',"autotypeset",'|',"insertimage",'music', 'insertvideo',"attachment",'|',"link","unlink","spechars",'|',"inserttable","deletetable"],['gmap', 'insertframe','highlightcode', 'template','background',"|",'horizontal', 'date', 'time', '|', 'print', 'searchreplace', 'preview', "fullscreen"]]
,initialFrameWidth:750 //初始化編輯器寬度,默認(rèn)1000
,initialFrameHeight:400 //初始化編輯器高度,默認(rèn)320
,initialContent:'' //初始化編輯器的內(nèi)容,也可以通過(guò)textarea/script給值，看官網(wǎng)例子
,wordCount:true //是否開(kāi)啟字?jǐn)?shù)統(tǒng)計(jì)
,maximumWords:10000 //允許的最大字符數(shù)
,autoHeightEnabled:false // 是否自動(dòng)長(zhǎng)高,默認(rèn)true
,elementPathEnabled:false //左下角顯示元素路徑
,autoFloatEnabled:false //工具欄浮動(dòng)
,textarea:"content"
,initialStyle:'body{font-size:14px}' //編輯器內(nèi)部樣式,可以用來(lái)改變字體等
});
如果需要更多的配置，可以參看editor_config.js文件，里面羅列了所有可配置的參數(shù)及說(shuō)明，并且有了默認(rèn)的參數(shù)。當(dāng)然你也可以直接修改editor_config.js文件，不過(guò)不推薦，還是建議初始化的時(shí)候進(jìn)行自定義配置。
修改上傳路徑
PHP版本的上傳，官方寫(xiě)的很爛。默認(rèn)把文件上傳到了ueditor\php的子目錄下，很糟糕，對(duì)于網(wǎng)站遷移很不利，特別是更換成其他的編輯器。
下面講述如何將圖像上傳到網(wǎng)站的根目錄下（對(duì)于文件上傳也一樣修改），這里我把UEditor放在如下的目錄/kx/share/ueditor/，網(wǎng)站訪問(wèn)的地址是127.0.0.1/kx/，其實(shí)是一個(gè)二級(jí)目錄。
打開(kāi)ueditor\php\imageUp.php， 找到
"savePath" => ($path == "1" ? "upload/" : "upload1/"),
改為
"savePath" => ($path == "1" ? "../../../upload/" : "../../../upload1/"),
注意：這里的upload1是另一個(gè)上傳目錄，在上傳的時(shí)候可以通過(guò)html網(wǎng)頁(yè)的option選，雖然比較靈活，但是我覺(jué)得比較雞肋，一看就是程序員寫(xiě)的半成品。哎，百度的程序員也不過(guò)如此啊。
這樣修改以后，就可以將文件上傳到網(wǎng)站根目錄了，其實(shí)也不是最好的辦法，因?yàn)闀?huì)出現(xiàn)很多冗余。如上傳一個(gè)文件后，它的地址為：/kx/share/ueditor/php/../../../upload/20130501/201305011130205278.zip。可以看到，是從根目錄遍歷，但是先到下面ueditor所在的子目錄，再回溯到上層目錄，多走了一道路，重復(fù)了，所以說(shuō)不是最佳的解決方法，但是不影響使用。
注意這里修改以后，還需要修改圖片“在線管理”的路徑，否則，無(wú)法在編輯器中進(jìn)行歷史圖片的查看。打開(kāi)ueditor\php\imageManager.php， 找到
$paths = array('upload/','upload1/');
改為
$paths = array('../../../upload/','../../../upload1/');
特別說(shuō)明：圖片路徑不能含有中文，否則不能顯示。
同樣需要修改“圖片遠(yuǎn)程抓取”的路徑。打開(kāi)ueditor\php\getRemoteImage.php，找到
"savePath" => "upload/" , //保存路徑
改為
"savePath" => "../../../upload/" , //保存路徑
注意，這里遠(yuǎn)程抓取的圖片保存在了upload根目錄下，要想保存在upload的子目錄下，例如每個(gè)月份的文件夾下，則需要找到以下代碼
//創(chuàng)建保存位置
$savePath = $config[ 'savePath' ];
改為：
//創(chuàng)建保存位置
$savePath = $config[ 'savePath' ].date( "Ym" )."/";
這是最簡(jiǎn)便的修改方法，具有通用性，如果想做到完美，可以再進(jìn)行細(xì)致的修改，這里不便贅述。
修改上傳的文件夾和文件名
默認(rèn)情況下，會(huì)為每天上傳文件新建一個(gè)文件夾，如20130501。這樣，如果上傳頻繁的話，導(dǎo)致子目錄非常多，不是很合理，于是改為按照每月新建上傳的文件夾。打開(kāi)ueditor\php\Uploader.class.php，在靠近最后找到
$pathStr .= date( "Ymd" );
改為
$pathStr .= date( "Ym" );
另外默認(rèn)是按照unix時(shí)間戳重命名上傳的文件名，不夠直觀，改成直接使用自然時(shí)間格式顯示。同樣，打開(kāi)ueditor\php\Uploader.class.php文件，找到：
return $this->fileName = time() . rand( 1 , 10000 ) . $this->getFileExt();
改為
return $this->fileName = date("YmdHis") . rand( 1 , 10000 ) . $this->getFileExt();
注意，這后面還有一個(gè)隨機(jī)數(shù)，防止同一時(shí)間上傳的重復(fù)
OK，經(jīng)過(guò)以上修改，基本算是比較合理了。強(qiáng)烈提醒，在網(wǎng)站遷移的時(shí)候，一定要注意編輯器的路徑配置，本機(jī)與服務(wù)器路徑一定相同，否則很可能造成文件路徑錯(cuò)誤。
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
