让IE8和IE9支持eWebEditor在线编辑器的方法

最近在做网站的时候,发现eWebEditor在线文本编辑器不支持IE9,点击编辑器中的按钮都没有反应,之前本站发布过一篇《解决IE8不支持eWebEditor在线文本编辑器的方法》,但貌似在IE9下方法就失效了,在网上找到了终级解决方法,拿来给大家分享。

个人小白,对jsp不太熟悉,做一个网站,遇到了点问题,在线等牛人解答
SEP_PADDING = 5;
HANDLE_PADDING = 7;

1.事件目标: 事件目标 target –> event.target  真正触发事件的对象

兼容性写法

正常浏览器:event.target

IE6、7、8: event.srcElement

var target = event.target || event.srcElement;

首先找到eWebEditor编辑器所在的目录,然后搜索到editor.js文件并用文本编辑器打开,然后找到BtnMouseUp()函数,将该函数代码替换成如下代码即可:复制代码 代码如下:function BtnMouseUp() { if
(event.srcElement.tagName != “IMG”) { event.cancelBubble = true; return
false; }

var yToolbars = new Array();

2.添加事件的新方式

1.通过添加事件监听器的方式注册事件:addEventListener

参数1:事件名称    参数2:事件处理函数    参数3:是否使用捕获

2、IE678添加事件监听器:attachEvent(事件名称,事件处理函数 )

代码写法

var btn1 = document.getElementById(“btn1”);

var btn2 = document.getElementById(“btn2”);

btn1.attachEvent(“onclick”,function(){alert(“1”)})//ie6.7.8可使用,谷歌不用使用

btn2.addEventListener(“click”,function(){alert(“2”)},false)谷歌可使用

注意事项:

attachEvent 用onclick,两个参数

addEventListener 用click,三个参数

不管是onclick还是click都是字符串,需要加上””

兼容性所有浏览器的函数写法

//封装 兼容所有浏览器的添加事件的函数

//element要绑定事件的元素对象 eventName是字符串而且不加on
listener事件处理函数

function addEvent(element, eventName, listener) {

if (element.addEventListener) {

element.addEventListener(eventName, listener, false);

} else if (element.attachEvent) {

element.attachEvent(“on” + eventName, listener);

} else {

//element.onclick = listener;

//element[“onclick”] = listener;

element[“on” + eventName] = listener;

}

}

var image = event.srcElement; var element = image.parentElement;

var YInitialized = false;

3.移除事件的新方式

  1. 重新定义,覆盖前面的注册事件

  2. 移除事件监听器:

removeEventListener  参数与绑定时相同

detachEvent          IE678

兼容性所有浏览器的函数写法

封装 兼容所有浏览器的移除事件的函数

function removeEvent(element, eventName, listener) {

if (element.removeEventListener) {

element.removeEventListener(eventName, listener, false);

} else if (element.detachEvent) {

element.detachEvent(“on” + eventName, listener);

} else {

element[“on” + eventName] = null;

}

}

事件对象的兼容处理

1、获取事件对象:getEvent

2、获取鼠标页面座标: pageX、pageY

3、阻止冒泡函数 stopPropagation( )

4、返回事件目标:getTarget

代码如下:

document.onclick = function (event) {

var event = getEvent(event);

var pageX = getPageX(event);

var pageY = getPageY(event);

stopPropagation(event);

var target = getTarget(event);

};

//封装获取事件对象的兼容方式

function getEvent(event) {

return event || window.event;

}

//封装获取鼠标在页面上的水平坐标的兼容方式

function getPageX(event) {

return event.pageX || event.clientX +
document.documentElement.scrollLeft;

}

//封装获取鼠标在页面上的竖直坐标的兼容方式

function getPageY(event) {

return event.pageY || event.clientY +
document.documentElement.scrollTop;

}

//封装阻止冒泡的兼容方式

function stopPropagation(event) {

if (event.stopPropagation) {

event.stopPropagation();

澳门新葡萄京官网注册 ,} else {

event.cancelBubble = true;

}

}

//封装获取事件目标的兼容方式

function getTarget(event) {

return event.target || event.srcElement;

}

事件对象兼容处理的进一步封装

  1. 声明一个对象:eventUtil 来存储方法

  2. 刚刚的兼容方法都写在对象里面

  3. 好处:  1.方便  2.避免了全局变量的命名冲突污染

document.onclick = function (event) {

var event = eventUtils.getEvent(event);

var pageX = eventUtils.getPageX(event);

var pageY = eventUtils.getPageY(event);

eventUtils.stopPropagation(event);

var target = eventUtils.getTarget(event);

};

var eventUtils = {

getEvent: function (event) {

return event || window.event;

},

getPageX: function (event) {

return event.pageX || event.clientX +
document.documentElement.scrollLeft;

},

getPageY: function (event) {

return event.pageY || event.clientY +
document.documentElement.scrollTop;

},

stopPropagation: function (event) {

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

},

getTarget: function (event) {

return event.target || event.srcElement;

}

};

try{ if (element.YUSERONCLICK) eval(element.YUSERONCLICK +
“anonymous()”); } catch(e){ if (element.YUSERONCLICK)
eval(element.YUSERONCLICK + “onclick(event)”); }

function temp()
{

4.鼠标事件和键盘事件

1、onkeydown:键盘按下相同  摁下不放一直执行

2、onkeypress:键盘按下  onkeydown最本质的区别是键盘码

3、onkeyup:键盘弹起

4、onkeydownonkeyup使用的是键盘码  onkeypress使用的是Ascll码

element.className = “BtnMouseOverUp”; image.className = “Ico”;

}
function insertHtml
{
var
win=window.editor.Composition.document;//其中编辑区域是gledit.jsp中的一个iframe,id是idEditbox
window.editor.Composition.focus();//是编辑器获得焦点,防止代码插入在编辑器外地方
win.selection.createRange().pasteHTML;//在光标的位置插入html代码
}

5.按回车键切换文本框

1、检测按下的是哪个键:e.keyCode === 13

2、元素获取焦点:obj.focus();

event.cancelBubble = true; return
false;}说明:以上代码中蓝色部分为eWebEditor在线文本编辑器兼容IE9IE8的核心代码,大家也可以根据实际情况更换BtnMouseUp()函数中的相应代码。

function document.onreadystatechange()
{
if (YInitialized) return;
YInitialized = true;

6.按esc关闭

1、检测按下的键对应的值:e.keyCode === 27

2、键盘按键对  就隐藏盒子

7.表单事件

onfocus 获取焦点

onblur 失去焦点

oninput 在输入的时候执行

onchange 失去焦点后如果表单元素的内容发生了改变 这个时候就会执行

小提示:如果你的eWebEditor在线文本编辑器版本过老,在IE9下根本都无法打开eWebEditor界面,你可以在IE9中设置成浏览器兼容模式,即可正常在IE9中使用eWebEditor了。

var i, s, curr;

for (i=0; i<document.body.all.length; i++)
{
curr=document.body.all[i];
if (curr.className == “yToolbar”)
{
InitTB;
yToolbars[yToolbars.length] = curr;
}
}

DoLayout();
window.onresize = DoLayout;

Composition.document.open();
Composition.document.write(“

body {font-size: 10.8pt}”);
Composition.document.close();
Composition.document.designMode=”On”;
}

function InitBtn
{
btn.onmouseover = BtnMouseOver;
btn.onmouseout = BtnMouseOut;
btn.onmousedown = BtnMouseDown;
btn.onmouseup = BtnMouseUp;
btn.ondragstart = YCancelEvent;
btn.onselectstart = YCancelEvent;
btn.onselect = YCancelEvent;
btn.YUSERONCLICK = btn.onclick;
btn.onclick = YCancelEvent;
btn.YINITIALIZED = true;
return true;
}

function InitTB
{
y.TBWidth = 0;

if (! PopulateTB return false;

y.style.posWidth = y.TBWidth;

return true;
}

function YCancelEvent()
{
event.returnValue=false;
event.cancelBubble=true;
return false;
}

function BtnMouseOver()
{
if (event.srcElement.tagName != “IMG”) return false;
var image = event.srcElement;
var element = image.parentElement;

if (image.className == “Ico”) element.className = “BtnMouseOverUp”;
else if (image.className == “IcoDown”) element.className =
“BtnMouseOverDown”;

event.cancelBubble = true;
}

function BtnMouseOut()
{
if (event.srcElement.tagName != “IMG”) {
event.cancelBubble = true;
return false;
}

var image = event.srcElement;
var element = image.parentElement;
yRaisedElement = null;

element.className = “Btn”;
image.className = “Ico”;

event.cancelBubble = true;
}

function BtnMouseDown()
{
if (event.srcElement.tagName != “IMG”) {
event.cancelBubble = true;
event.returnValue=false;
return false;
}

var image = event.srcElement;
var element = image.parentElement;

element.className = “BtnMouseOverDown”;
image.className = “IcoDown”;

event.cancelBubble = true;
event.returnValue=false;
return false;
}

function BtnMouseUp()
{
if (event.srcElement.tagName != “IMG”) {
event.cancelBubble = true;
return false;
}

var image = event.srcElement;
var element = image.parentElement;

if (element.YUSERONCLICK) eval(element.YUSERONCLICK + “anonymous;

element.className = “BtnMouseOverUp”;
image.className = “Ico”;

event.cancelBubble = true;
return false;
}

function PopulateTB
{
var i, elements, element;

elements = y.children;
for (i=0; i<elements.length; i++) {
element = elements[i];
if (element.tagName == “SCRIPT” || element.tagName == “!”) continue;

switch (element.className) {case "Btn": if (element.YINITIALIZED == null) { if (! InitBtn return false; } element.style.posLeft = y.TBWidth; y.TBWidth += element.offsetWidth + 1; break;case "TBGen": element.style.posLeft = y.TBWidth; y.TBWidth += element.offsetWidth + 1; break;case "TBSep": element.style.posLeft = y.TBWidth + 2; y.TBWidth += SEP_PADDING; break;case "TBHandle": element.style.posLeft = 2; y.TBWidth += element.offsetWidth + HANDLE_PADDING; break;default: return false;}

}

y.TBWidth += 1;
return true;
}

function DebugObject
{
var msg = “”;
for (var i in TB) {
ans=prompt(i+”=”+TB[i]+”n”);
if break;
}
}

function LayoutTBs()
{
NumTBs = yToolbars.length;

if (NumTBs == 0) return;

var i;
var ScrWid = (document.body.offsetWidth) – 6;
var TotalLen = ScrWid;
for (i = 0 ; i < NumTBs ; i++) {
TB = yToolbars[i];
if (TB.TBWidth > TotalLen) TotalLen = TB.TBWidth;
}

var PrevTB;
var LastStart = 0;
var RelTop = 0;
var LastWid, CurrWid;

var TB = yToolbars[0];
TB.style.posTop = 0;
TB.style.posLeft = 0;

var Start = TB.TBWidth;
for (i = 1 ; i < yToolbars.length ; i++) {
PrevTB = TB;
TB = yToolbars[i];
CurrWid = TB.TBWidth;

if ((Start + CurrWid) > ScrWid) { Start = 0; LastWid = TotalLen - LastStart;}else { LastWid = PrevTB.TBWidth; RelTop -= TB.offsetHeight;}TB.style.posTop = RelTop;TB.style.posLeft = Start;PrevTB.style.width = LastWid;LastStart = Start;Start += CurrWid;

}

TB.style.width = TotalLen – LastStart;

i–;
TB = yToolbars[i];
var TBInd = TB.sourceIndex;
var A = TB.document.all;
var item;
for {
item = A.item;
if continue;
if (! item.style) continue;
if (item.sourceIndex <= TBInd) continue;
if (item.style.position == “absolute”) continue;
item.style.posTop = RelTop;
}
}

function DoLayout()
{
LayoutTBs();
}

function validateMode()
{
if (! bTextMode) return true;
alert(“请取消“使用 HTML 语法书写”选项再使用系统编辑功能!”);
Composition.focus();
return false;
}

function format1
{
if (opt==”removeFormat”)
{
what=opt;
opt=null;
}

if (opt==null) Composition.document.execCommand;
else Composition.document.execCommand(what,””,opt);

pureText = false;
Composition.focus();
}

function format
{
if (!validateMode return;

format1;
}

function setMode
{
bTextMode = newMode;
var cont;
if (bTextMode) {
cleanHtml();
cleanHtml();

cont=Composition.document.body.innerHTML;Composition.document.body.innerText=cont;

} else {
cont=Composition.document.body.innerText;
Composition.document.body.innerHTML=cont;
}

Composition.focus();
}

function getEl(sTag,start)
{
while ((start!=null) && (start.tagName!=sTag)) start =
start.parentElement;
return start;
}

function UserDialog
{
if (!validateMode return;

Composition.document.execCommand(what, true);

pureText = false;
Composition.focus();
}

function foreColor()
{
if (! validateMode return;
var arr = showModalDialog(“selcolor.htm”, “”, “dialogWidth:18.5em;
dialogHeight:17.5em; status:0”);
if (arr != null) format(‘forecolor’, arr);
else Composition.focus();
}

function fortable()
{
if (! validateMode return;
var arr = showModalDialog(“table.htm”, “”, “dialogWidth:18.5em;
dialogHeight:11.5em; status:0”);

if (arr != null){
var ss;
ss=arr.split
row=ss[0];
col=ss[1];
var string;
string=”

“;
for(i=1;i<=row;i++){
string=string+”

“;
for(j=1;j<=col;j++){
string=string+”

发表评论

电子邮件地址不会被公开。 必填项已用*标注