ewebeditor图片新建选项卡自动图片缩放

修改ewebeditor实现图片的自动链接

目标就是实现上传图片后可以自动给图片添加新窗口链接，因为他使用的是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");

如果大家还想图片缩放到固定的大小可以改成这样也就可以限制图片显示尺寸啦

在ewebeditor目录下的dialog目录下的img.htm文件中找到关于图片上传的语句

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

将其改为：

sHTML = '<img id=eWebEditor_TempElement_Img onload="javascript:if(this.width>550)this.height=(this.height/this.width)*550;this.width=550;" src="'+sFromUrl+'"'+sHTML;

其中的550就是你所需要限制的图片的尺寸数据了，这样一来，如果用户上传的图片宽度尺寸超过了550，就会自动将其缩小到550*Y了。

当然了，这个方法仅仅是在页面显示的时候对其进行处理，并没有改变上传图片本身的大小，所以，最好的方法自然是将图片尺寸调好之后再上传了。

如果你需要又可以新打开又可以自动缩放那么代码就是

131行：
sHTML = '<a id=eWebEditor_TempElement_Href href='+sFromUrl+' target=_blank><img id=eWebEditor_TempElement_Img onload="javascript:if(this.width>550)this.height=(this.height/this.width)*550;this.width=550;" 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");

修改ewebeditor实现图片的自动链接

已有 769 位网友参与，快来吐槽：

取消回复发表评论