开发iframe富文本编辑器的一点体会Word下载.docx
- 文档编号:18242693
- 上传时间:2022-12-14
- 格式:DOCX
- 页数:7
- 大小:19.96KB
开发iframe富文本编辑器的一点体会Word下载.docx
《开发iframe富文本编辑器的一点体会Word下载.docx》由会员分享,可在线阅读,更多相关《开发iframe富文本编辑器的一点体会Word下载.docx(7页珍藏版)》请在冰豆网上搜索。
p{width:
600px;
text-align:
left;
text-indent:
2em;
line-height:
20px;
font-size:
12px}
textarea{width:
height:
100px;
12px;
overflow:
auto}
/style>
/head>
body>
spanstyle="
display:
block;
150px;
font-size:
150%"
信息<
/span>
scripttype="
text/javascript"
functioncreateEditor(){
variframe=document.createElement('
iframe'
);
iframe.id='
;
iframe.frameBorder=1;
iframe.width=400;
iframe.height=200;
document.body.appendChild(iframe);
returniframe;
}
varbind=function(element,eventType,fn,useCapture){
useCapture=useCapture||false;
if(arguments.length<
3){
returntrue
};
if(window.addEventListener){
element.addEventListener(eventType,fn,useCapture);
}else{
element.attachEvent('
on'
+eventType,fn,useCapture);
//from司徒正美
varcss=document.defaultView?
function(el,style){
returndocument.defaultView.getComputedStyle(el,null).getPropertyValue(style)
}:
style=style.replace(/\-(\w)/g,function($,$1){
return$1.toUpperCase();
});
returnel.currentStyle[style];
functionbindEditor(){
variframe=createEditor();
varifr_win=iframe.contentWindow;
varifr_doc=ifr_win.document;
vareditorContent='
font-family:
黑体;
font-weight:
bold;
"
阿四大四大四<
大<
font-style:
italic;
text-decoration:
underline;
四大四大打算<
打打<
color:
#ff0000;
双打萨斯<
大师'
ifr_doc.designMode='
On'
//可编辑
ifr_doc.contentEditable=true;
ifr_doc.open();
ifr_doc.writeln('
body{padding:
10px;
margin:
0;
13px;
宋体;
left;
auto;
word-wrap:
break-word;
cursor:
text;
background-color:
transparent;
}body,p,font,div,ul,li{line-height:
1.5;
}p,font,div,ul,li{line-height:
padding:
0}a{color:
#548DD4}<
'
+editorContent+'
/body>
/html>
ifr_doc.close();
vargetRange=function(){
varrange=window.getSelection?
ifr_win.getSelection():
ifr_win.document.selection;
if(!
range){
return{
node:
null,
range:
text:
null
range=range.createRange?
range.createRange():
range.getRangeAt(0);
vartext=window.getSelection?
range:
range.text;
varrangeNode=null;
if(monAncestorContainer){
rangeNode=monAncestorContainer;
}else{
if(range.parentElement)rangeNode=range.parentElement();
rangeNode,
range,
text
varinfo=document.getElementsByTagName('
span'
)[0];
vargetStyle=function(node){
//console.log(node)
varhtml='
html+='
+css(node,'
font-family'
)+'
字体:
)+'
br/>
color:
color'
颜色:
font-style'
斜体:
font-weight:
font-weight'
粗体:
text-decoration:
text-decoration'
下划线:
tagName:
+node.tagName+'
style:
+node.getAttribute('
style'
info.innerHTML=html;
//当光标位置改变时候执行
varonselectionchange=function(event){
vare=event||window.event;
if(!
e.keyCode)e.keyCode=e.which;
//方向键移动光标,获取光标位置的dom
if((e.keyCode>
=37&
&
e.keyCode<
=40)||e.type=="
click"
){
varnode=getRange().node;
//获取光标位置元素
if(node!
==null){
while(node.nodeType!
=1){
node=node.parentNode;
getStyle(node);
bind(ifr_doc,'
click'
onselectionchange,false);
keydown'
window.onload=function(){
bindEditor();
/script>
2.ie不能保持光标位置,这个是在添加超链接时候出现的问题,当不使用浏览器内置的输入框,光标移动其他的文本域里,ie会失去所选中的部分,无法对选中的部分加链接了,解决办法就是:
利用range的getBookmark和moveToBookmark,然后给iframe的document绑定onbeforedeactivate(getBookmark)、onactivate(moveTo),这2个事件的大致意思就是,当被激活和失去激活状态。
增加事件之后,就不必保存lastRang或者再其他地方设置bookmark了,可以让ie像其他浏览器一样自动保持光标位置了
if(Util.browser.msie){
Util.bind(this.E.ifr_win.document,"
beforedeactivate"
function(){
varRng=_self.getRange().range;
_self.rangeBookMark=Rng.getBookmark();
activate"
Rng.moveToBookmark(_self.rangeBookMark);
Rng.select();
_self.rangeBookMark=null;
3.ie中的撤销与重做。
当iframe外部有弹出窗口、或者修改html撤销、重做功能将失效。
只能归为ie的bug了。
。
也许ie没分清iframe和页面的document,把他们的撤销、重做混道义了。
如下:
divid="
J_tool"
inputtype="
button"
command="
Undo"
value="
撤销"
unselectable="
on"
/>
Redo"
重做"
Bold"
粗体"
Italic"
斜体"
/div>
onclick="
changeLayout()"
点击下,ie将无法撤销、重做"
functionchangeLayout(){
varpopwin=document.getElementById('
popwin'
popwin){
popwin=document.createElement('
div'
popwin.id='
popwin.style.cssText='
none;
width:
300px;
#ccc;
position:
absolute;
left:
top:
0px;
center;
popwin.innerHTML='
改变了layoud渲染,ie将无法撤销、重做'
document.body.appendChild(popwin);
popwin.onclick=function(){this.style.display='
none'
popwin.style.display=popwin.style.display=='
?
'
block'
:
varnode
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 开发 iframe 文本 编辑器 一点 体会