文章摘要
这篇文章主要展示了如何在HTML/CSS中实现一个具有编辑功能的iframe，其核心内容包括：
1. **功能实现**：文章通过JavaScript编写了多个函数，实现了在iframe中动态显示文字的字体、颜色、斜体、粗体、下划线等属性，并且在光标移动时实时更新显示。
2. **实现细节**：在iframe的空白页面上创建一个编辑区域，并绑定键盘事件和鼠标事件，使得用户可以通过键盘或鼠标操作来改变文字属性。同时，文章还实现了对文字内容的动态分析功能。
3. **跨浏览器兼容性**：文章提到了该实现在Chrome等现代浏览器中表现良好，但在IE等旧版本浏览器中可能会出现无法撤销或重做操作的问题。
4. **代码结构**：文章详细展示了JavaScript代码的编写过程，包括事件绑定、CSS样式、动态属性更新等技术细节。
总结来看，这篇文章通过代码实现了跨平台的文本编辑功能，并在动态交互中展示文字属性的变化。
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();
}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
