我在做的一个富文本编辑,做回退,恢复的算法网上找了下资料,不过效果不太理想,而且有些复杂,还要考虑IE兼容,所以我就自己实现了,在vue项目中:

HTML:

<button @click="back_">回退</button>

<button @click="go_">前进</button>

<div CONTENTEDITABLE="true" @input="codeword_text($event)"ref="dele" />

js:

data(){

return {

backitems:[],

goItems:[],

}

},

methods:{

codeword_text(e){

this.backitems.push(e.target.innerHTML)//保存为innerHTML,图片等都可以进行撤销操作

},

back_(){

//pop 是将数组最后一个元素删除,同时返回原来的值给你,删除所有,数组变成undefined

let val=this.backItems.pop();

if (this.backItems.length>=0&&val!==undefined) {

this.goItems.push(val);

//将回退的数据保存,作为前进恢复的数据.

let backvalue=this.backItems[this.backItems.length - 1];

//回退数据删除完成后,数据变成undefined,所以将其值变为空,避免输出到富文本

if (backvalue==undefined){

backvalue="";

}

this.$refs.dele.innerHTML = backvalue

}

},

go_(){

if (this.goItems.length!==0) {

//每次前进就将最后一个数据填进去

this.$refs.dele.innerHTML = this.goItems[this.goItems.length - 1];

//同样,将前进的计入后退的统计中

this.backItems.push(this.goItems[this.goItems.length - 1])

//每次前进时就删除已经前进展示的数据,这样就保证每次前进都是最后那个的衔接数据

this.goItems.splice(this.goItems.length - 1, 1)

}

}，

//重置

re_(){

this.backItems=[];

this.goItems=[];

}

}

总结;

1,思路就是将变化保存到数组,回退时重新渲染每一步;恢复数据就要把回退时删除的,保存,然后进行操作。

2,div的编辑保存,需要innerHTML进行填充,这样可以对图片插入等进行回退和恢复操作,如果使用innerText,只能对文字数据进行回退,不符合要求;

3，在页面不刷新情况下，数组数据不会清空，当你需要切换其他编辑时，需要作出一个数据数据清空的方法，进行重置，往往将这个方法丢进文章编辑的切换事件中;

经过上述的算法，能够实现我想要的，但是我并没有考虑其他问题，当然了上述实现了功能，你也可以在此基础上进行回退，前进的步数逻辑设计等......

缺点:

1,光标不能跟踪,我觉得这个并不是问题,当你点击回退时,光标消失,你要编辑再点一下就是了。

2,当执行大量的操作时,保存上体量较大,但是也不是什么问题,可以设置数组长度上限,进行自动清空多少长度,思路是很清晰的。

希望本文能够对别人的一些需求有用;对于我的项目是很好用的,欢迎大家讨论之处不足。