發表于:2011-07-06 00:00:00來源:SOUAB.COM人氣:3521
目标就是實現上傳圖片後可(kě)以自(zì)動給圖片添加新窗口鏈接,因為(wèi)他使用的(de)是ewebeditor2.8的(de)免費版,所以就要看看ewebeditor是怎麽實現的(de)啦。
大緻分析了一(yī)下,應該都是在/dialog/img.htm裏控制的(de):
131行: sHTML = '<img id=eWebEditor_TempElement_Img src="'+sFromUrl+'"'+sHTML;
在這裏加入圖片的(de)超鏈接應該就可(kě)以解決問題:
sHTML = '<a href='+sFromUrl+' target=_blank><img id=eWebEditor_TempElement_Img src="'+sFromUrl+'"'+sHTML;
看起來是不錯的(de)解決了問題,不過卻有一(yī)個小毛病,那就是經過了154行處理(lǐ)以後img的(de)地(dì)址是相對地(dì)址,href的(de)地(dì)址卻是完整地(dì)址。
dialogArguments.insertHTML(sHTML); img: /xxx/xxx.gif href: http://www.xxx.com/xxx/xxx.gif
再往下看,發現後面對img進行了獨立的(de)處理(lǐ):
156~158 var oTempElement = dialogArguments.eWebEditor.document.getElementById("eWebEditor_TempElement_Img"); oTempElement.src = sFromUrl; oTempElement.removeAttribute("id");
看起來在insertHTML中處理(lǐ)是一(yī)樣的(de)。
下午這塊東西沒詳細看是怎麽回事,剛才翻了一(yī)下ewebeditor2.8的(de)文件,在include/editor.js中看到insertHTML的(de)內(nèi)容如(rú)下:
410行: // 在當前文檔位置插入. function insertHTML(html) { if (isModeView()) return false; if (eWebEditor.document.selection.type.toLowerCase() != "none"){ eWebEditor.document.selection.clear() ; } if (sCurrMode!="EDIT"){ html=HTMLEncode(html); } eWebEditor.document.selection.createRange().pasteHTML(html) ; }
前面的(de)都沒什麽好說的(de),主要是利用了selection.createRange().pasteHTML(html)來把相對路徑處理(lǐ)成了完整路徑。看起來跟下午猜得差不多。
關于pasteHTML可(kě)以參考一(yī)下msdn的(de)介紹:
http://msdn2.microsoft.com/en-us/library/ms536656.aspx
另外舉個簡單的(de)例子(zǐ):
<html> <body> <script language="JavaScript"> function replace() { var myRange = document.selection.createRange().pasteHTML('<p><b>www.coolersky.com</b></p>'); } </script> <p>随便框選幾個字,然後點提交看看。By AcOol!</p> <input id="m" type="button" value="提交" onclick="replace();"> </body> </html>
言歸正傳,繼續。應該也要對href也作一(yī)下處理(lǐ),翻了一(yī)下google,找到一(yī)個類似的(de),順便看了一(yī)下img.htm所在的(de)目錄,發現/dialog/file.htm中有對href的(de)處理(lǐ)過程,照貓畫虎搞了一(yī)下就好了。
最終代碼為(wèi):
131行: sHTML = '<a id=eWebEditor_TempElement_Href href='+sFromUrl+' target=_blank><img id=eWebEditor_TempElement_Img src="'+sFromUrl+'"'+sHTML; ...... 156行: var oTempElement = dialogArguments.eWebEditor.document.getElementById("eWebEditor_TempElement_Img"); oTempElement.src = sFromUrl; oTempElement.removeAttribute("id"); oTempElement = dialogArguments.eWebEditor.document.getElementById("eWebEditor_TempElement_Href"); oTempElement.href = sFromUrl; oTempElement.removeAttribute("id");