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