海南世紀雲圖網絡科技有限公司
咨詢熱(rè)線:400-822-8458 客戶服務:0898-32183600

eWebeditor上傳圖片後自(zì)動給圖片增加鏈接

發表于:2011-07-06 00:00:00來(lái)源:SOUAB.COM人(rén)氣:3603

目标就(jiù)是實現上傳圖片後可(kě)以自(zì)動給圖片添加新窗(chuāng)口鏈接,因爲他(tā)使用的是ewebeditor2.8的免費版,所以就(jiù)要看(kàn)看(kàn)ewebeditor是怎麽實現的啦。
大(dà)緻分(fēn)析了一下,應該都(dōu)是在/dialog/img.htm裡(lǐ)控制的:
 

131行:
sHTML = '<img id=eWebEditor_TempElement_Img src="'+sFromUrl+'"'+sHTML;

在這裡(lǐ)加入圖片的超鏈接應該就(jiù)可(kě)以解決問(wèn)題:

sHTML = '<a href='+sFromUrl+' target=_blank><img id=eWebEditor_TempElement_Img src="'+sFromUrl+'"'+sHTML;

看(kàn)起來(lái)是不錯的解決了問(wèn)題,不過卻有一個小毛病,那就(jiù)是經過了154行處理(lǐ)以後img的地址是相(xiàng)對地址,href的地址卻是完整地址。

dialogArguments.insertHTML(sHTML);
img:
/xxx/xxx.gif
href:
http://www.xxx.com/xxx/xxx.gif

再往下看(kàn),發現後面對img進行了獨立的處理(lǐ):

156~158
var oTempElement = dialogArguments.eWebEditor.document.getElementById("eWebEditor_TempElement_Img");
oTempElement.src = sFromUrl;
oTempElement.removeAttribute("id");

看(kàn)起來(lái)在insertHTML中處理(lǐ)是一樣的。
下午這塊東西沒詳細看(kàn)是怎麽回事(shì),剛才翻了一下ewebeditor2.8的文件(jiàn),在include/editor.js中看(kàn)到insertHTML的内容如(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) ; 
}

前面的都(dōu)沒什麽好說(shuō)的,主要是利用了selection.createRange().pasteHTML(html)來(lái)把相(xiàng)對路(lù)徑處理(lǐ)成了完整路(lù)徑。看(kàn)起來(lái)跟下午猜得(de)差不多。
關于pasteHTML可(kě)以參考一下msdn的介紹:
http://msdn2.microsoft.com/en-us/library/ms536656.aspx
另外舉個簡單的例子:

<html>
<body>
<script language="JavaScript">
function replace() {
  var myRange = document.selection.createRange().pasteHTML('<p><b>www.coolersky.com</b></p>');
} 
</script>
<p>随便框選幾個字,然後點提交看(kàn)看(kàn)。By AcOol!</p>
<input id="m" type="button" value="提交" onclick="replace();">
</body>
</html>

言歸正傳,繼續。應該也要對href也作(zuò)一下處理(lǐ),翻了一下google,找到一個類似的,順便看(kàn)了一下img.htm所在的目錄,發現/dialog/file.htm中有對href的處理(lǐ)過程,照(zhào)貓畫(huà)虎搞了一下就(jiù)好了。
最終代碼爲:

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");

文章(zhāng)整理(lǐ): 世紀雲圖  /

以上信息與文章(zhāng)正文是不可(kě)分(fēn)割的一部分(fēn),如(rú)果您要轉載本文章(zhāng),請(qǐng)保留以上信息,謝謝!

版權申明:本站(zhàn)文章(zhāng)部份來(lái)自(zì)網絡,如(rú)有侵權,請(qǐng)聯系我們,我們收到後立即删除,謝謝!

特别注意:本站(zhàn)部份轉載文章(zhāng)言論不代表本站(zhàn)觀點,本站(zhàn)所提供的攝影(yǐng)照(zhào)片,插畫(huà),設計(jì)作(zuò)品,如(rú)需使用,請(qǐng)與原作(zuò)者聯系,版權歸原作(zuò)者所有。

微信
網站(zhàn)建設
軟件(jiàn)業務
網絡營銷
400電話(huà)