本文探讨了HTML在线编辑器中Undo/Redo功能失效的原因，并提供了一个自定义实现Undo/Redo功能的方法，包括代码示例。
今天遇到个问题，我的mocolaeditor之前有效的 undo / redo 功能突然失效了，这应该是编写html在线编辑器的pg都会遇到的一个问题。
先看看这个问题是什么：
<script>
function onchange(){
info.innertext=editor.innertext;
}
</script>
</head>
<body>
<div style="width:500px;height:500px;border:1px solid #cccccc" contenteditable="true" ></div>
<div style="width:500px;height:50px;padding:4px;background-color:#f0f0f0"></div>
</body>
运行上面这段代码，你会发现，你的编辑器 将无法 undo和redo。
为什么会这样？
原因在于 info.innertext=editor.innertext; 这一脚本，改变了当前html渲染。起初我以为编辑器放在iframe里就没事了，结果发现，放哪里都一样。
<script>
function onchange(){
info.innertext=editor.document.body.innertext;
}
window.οnlοad=function(){
editor.document.designmode="on";
editor.document.οnkeyup=onchange;
}
</script>
</head>
<body>
<iframe style="width:500px;height:500px;border:1px solid #cccccc"></iframe>
<div style="width:500px;height:50px;padding:4px;background-color:#f0f0f0"></div>
</body>
google的writly (http://docs.google.com),有相同的问题。他的操作界面的弹出窗口都是用 div 来实现的。这样在显示和关闭的时候 必然会做一些dom的操作，结果是只要弹出过窗口，undo/redo就失效了。
问题到此，应该很清楚了。那么如何解决呢？
既然浏览器的undo/redo不行了，那我就自己来写一个undo/redo方法。
每次文档发生改变的时候，我们可以把其htmlcode 和 selection 选区一起保存。存入一个数组里，只要数据都存好了，想undo/redo都是很轻松的事情了。
小tips: 可以通过 document.selection.createrange().getbookmark()方来 来保存选区状态。
undo的时候用 document.selection.createrange().movetobookmark()方法来恢复选区。
以下是网上找的一段undo/redo 类。typeing是为了对打字进行一些特殊处理，因为没有必要每输入一个字就增加一个undostep,这样太浪费内存空间了。 这里还需要对document.onkeydown函数做一些配合处理。
原文：[url=http://www.mockte.com/rewrite.php/read-30.html]http://www.mockte.com/rewrite.php/read-30.html[/url]
先看看这个问题是什么：
<script>
function onchange(){
info.innertext=editor.innertext;
}
</script>
</head>
<body>
<div style="width:500px;height:500px;border:1px solid #cccccc" contenteditable="true" ></div>
<div style="width:500px;height:50px;padding:4px;background-color:#f0f0f0"></div>
</body>
运行上面这段代码，你会发现，你的编辑器 将无法 undo和redo。
为什么会这样？
原因在于 info.innertext=editor.innertext; 这一脚本，改变了当前html渲染。起初我以为编辑器放在iframe里就没事了，结果发现，放哪里都一样。
<script>
function onchange(){
info.innertext=editor.document.body.innertext;
}
window.οnlοad=function(){
editor.document.designmode="on";
editor.document.οnkeyup=onchange;
}
</script>
</head>
<body>
<iframe style="width:500px;height:500px;border:1px solid #cccccc"></iframe>
<div style="width:500px;height:50px;padding:4px;background-color:#f0f0f0"></div>
</body>
google的writly (http://docs.google.com),有相同的问题。他的操作界面的弹出窗口都是用 div 来实现的。这样在显示和关闭的时候 必然会做一些dom的操作，结果是只要弹出过窗口，undo/redo就失效了。
问题到此，应该很清楚了。那么如何解决呢？
既然浏览器的undo/redo不行了，那我就自己来写一个undo/redo方法。
每次文档发生改变的时候，我们可以把其htmlcode 和 selection 选区一起保存。存入一个数组里，只要数据都存好了，想undo/redo都是很轻松的事情了。
小tips: 可以通过 document.selection.createrange().getbookmark()方来 来保存选区状态。
undo的时候用 document.selection.createrange().movetobookmark()方法来恢复选区。
以下是网上找的一段undo/redo 类。typeing是为了对打字进行一些特殊处理，因为没有必要每输入一个字就增加一个undostep,这样太浪费内存空间了。 这里还需要对document.onkeydown函数做一些配合处理。
var cmsundo=new object();cmsundo.undolevels=new array();cmsundo.currentstep=0;cmsundo.maxlevel=20;cmsundo.typing=false;cmsundo.typingcount=cmsundo.typingmaxcount=25;cmsundo.saveundostep=function(){ if(emode == "code") return; this.undolevels[this.currentstep]=this.getsavedata(); this.currentstep++; this.undolevels=this.undolevels.slice(0,this.currentstep); if(this.undolevels>this.maxlevel) this.undolevels.shift(); this.currentstep=this.undolevels.length;}cmsundo.redo=function(){ if(this.currentstep<this.undolevels.length-1) this.applyundolevel(this.undolevels[++this.currentstep]);}cmsundo.undo=function(){ if(this.undolevels.length<1) return; if(this.currentstep==this.undolevels.length) this.saveundostep(); if(this.currentstep>0) this.applyundolevel(this.undolevels[--this.currentstep]);}cmsundo.applyundolevel=function(cstep){ editordesigncontent.body.innerhtml=cstep.htmlcode; if(cstep.selrange) { var range=editordesigncontent.selection.createrange() range.movetobookmark(cstep.selrange) range.select(); oneditcontentselchange(); } this.typescount=0; this.typing=false;}cmsundo.getsavedata=function(){ var cstep=new object(); cstep.htmlcode=editordesigncontent.body.innerhtml; if (editordesigncontent.selection.type=='text') cstep.selrange=editordesigncontent.selection.createrange().getbookmark(); return cstep;}原文：[url=http://www.mockte.com/rewrite.php/read-30.html]http://www.mockte.com/rewrite.php/read-30.html[/url]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
