javascript开发随笔3 开发iframe富文本编辑器的一点体会（浏览器中javascript开启有什么好处）速看

p{width:600px;text-align: left;text-indent:2em;line-height:20px;font-size:12px}

textarea{width:600px;height:100px;font-size:12px;overflow:auto}

信息

function changeLayout(){

var popwin=document.getElementById(‘popwin’);

if(!popwin){

popwin=document.createElement(‘div’);

popwin.id=’popwin’;

popwin.style.cssText=’display:none;width:300px;height:150px;background-color:#ccc;position:absolute;left:0;top:0px;text-align:center;line-height:150px;’;

popwin.innerHTML=’改变了layoud渲染，ie将无法撤销、重做’;

document.body.appendChild(popwin);

popwin.onclick=function(){this.style.display=’none’};

}

popwin.style.display=popwin.style.display==’none’ ? ‘block’ : ‘none’;

}

function createEditor(){

var iframe=document.createElement(‘iframe’);

iframe.id=’iframe’;

iframe.frameBorder=1;

iframe.width=400;

iframe.height=200;

document.body.appendChild(iframe);

return iframe;

}

var bind=function(element,eventType,fn,useCapture){

useCapture=useCapture || false;

if(arguments.length < 3){

return true

};

if(window.addEventListener){

element.addEventListener(eventType, fn, useCapture);

}else{

element.attachEvent(‘on’+eventType,fn, useCapture);

}

}

//from 司徒正美

var css=document.defaultView ? function(el,style){

return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)

} : function(el,style){

style=style.replace(/\-(\w)/g, function($, $1){

return $1.toUpperCase();

});

return el.currentStyle[style];

}

function bindEditor(){

var iframe=createEditor();

var ifr_win=iframe.contentWindow;

var ifr_doc=ifr_win.document;

var editorContent=’阿四大四大四大四大四大打算打打双打萨斯大师’;

ifr_doc.designMode=’On’;//可编辑

ifr_doc.contentEditable=true;

ifr_doc.open();

ifr_doc.writeln(‘

‘+ editorContent +”);

ifr_doc.close();

var getRange=function(){

var range=window.getSelection ? ifr_win.getSelection() : ifr_win.document.selection;

if (!range) {

return {

node : null,

range : null,

text : null

};

}

range=range.createRange ? range.createRange() : range.getRangeAt(0);

var text=window.getSelection ? range : range.text;

var rangeNode=null;

if (range.commonAncestorContainer) {

rangeNode=range.commonAncestorContainer;

} else {

if (range.parentElement) rangeNode=range.parentElement();

}

return {

node : rangeNode,

range : range,

text : text

}

}

var info=document.getElementsByTagName(‘span’)[0];

var getStyle=function(node){

//console.log(node)

var html=”;

html+=’字体:’+ css(node,’font-family’) + ‘‘;

html+=’颜色：’+ css(node,’color’) + ‘‘;

html+=’斜体：’+ css(node,’font-style’) + ‘‘;

html+=’粗体：’+ css(node,’font-weight’) + ‘‘;

html+=’下划线：’+ css(node,’text-decoration’) + ‘‘;

html+=’tagName:’+ node.tagName + ‘,style:’+ node.getAttribute(‘style’) +”;

info.innerHTML=html;

}

//当光标位置改变时候执行

var onselectionchange=function(event){

var e=event || window.event;

if(!e.keyCode)e.keyCode=e.which;

//方向键移动光标,获取光标位置的dom

if((e.keyCode >=37 && e.keyCode <=40 )|| e.type==”click”){

var node=getRange().node;//获取光标位置元素

if(node !==null){

while(node.nodeType !=1){

node=node.parentNode;

}

getStyle(node);

}

}

}

bind(ifr_doc,’click’,onselectionchange,false);

bind(ifr_doc,’keydown’,onselectionchange,false);

bind(document.getElementById(‘J_tool’),’click’,function(event){

event=event || window.event;

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

var command=target.getAttribute(‘command’);

var param=target.getAttribute(‘param’) || ”;

ifr_doc.execCommand(command,false,param);

return false;

})

}

window.onload=function(){

bindEditor();

}