海南世纪云图网络科技有限公司
咨询热线:400-822-8458 技术支持:0898-66754910 客户服务:0898-32183600

eWebeditor上传图片后自动给图片增加链接

发表于:2011-07-06 00:00:00来源:SOUAB.COM人气:2013

目标就是实现上传图片后可以自动给图片添加新窗口链接,因为他使用的是ewebeditor2.8的免费版,所以就要看看ewebeditor是怎么实现的啦。
大致分析了一下,应该都是在/dialog/img.htm里控制的:
 

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

在这里加入图片的超链接应该就可以解决问题:

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

看起来是不错的解决了问题,不过却有一个小毛病,那就是经过了154行处理以后img的地址是相对地址,href的地址却是完整地址。

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

再往下看,发现后面对img进行了独立的处理:

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

看起来在insertHTML中处理是一样的。
下午这块东西没详细看是怎么回事,刚才翻了一下ewebeditor2.8的文件,在include/editor.js中看到insertHTML的内容如下:

 

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

前面的都没什么好说的,主要是利用了selection.createRange().pasteHTML(html)来把相对路径处理成了完整路径。看起来跟下午猜得差不多。
关于pasteHTML可以参考一下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>随便框选几个字,然后点提交看看。By AcOol!</p>
<input id="m" type="button" value="提交" onclick="replace();">
</body>
</html>

言归正传,继续。应该也要对href也作一下处理,翻了一下google,找到一个类似的,顺便看了一下img.htm所在的目录,发现/dialog/file.htm中有对href的处理过程,照猫画虎搞了一下就好了。
最终代码为:

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

文章整理: 世纪云图  https://www.yuntop.cc/

以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

版权申明:本站文章部份来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!

特别注意:本站部份转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。

微信
网站建设
软件业务
网络营销
400电话