|
最近在有幾個(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編輯器,，主要用于讓用戶在網(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ò)誤。 |
|
|
來(lái)自： 緣夢(mèng)書(shū)摘 > 《JavaScript》
