Core：基础类-后期所有的编辑修改类都继承于它
setStep：保存方法，所有的修改操作都会出触发，用于保存到后端及保存用户操作
_selectionNavUndo：撤消方法
_selectionNavRedo：回退方法
EditorText：继承于Core的修改文字的操作类（实例）
setText：EditorText的修改文字方法
编辑器修改流程
初始化基础类--->继承基础类--->建立监听--->修改内容--->保存操作--->上传后端（本地可忽略）
核心JS
var Core = function() {
}
Core.prototype = {
arrayPrevStep: [],
arrayNextStep: [],
triggerUndo: false,
triggerRedo: false,
_undo: null,
_redo: null,
setStep: function(func) {
if (this.triggerUndo) {
this.arrayNextStep.push(func);
if (this._redo.classList.contains('unactive')) {
this._redo.classList.remove('unactive');
}
} else {
if (!this.triggerRedo) Core.prototype.arrayNextStep = [];
this.arrayPrevStep.push(func);
if (this.arrayPrevStep.length > 20) {
this.arrayPrevStep.shift();
}
if (this._undo.classList.contains('unactive')) {
this._undo.classList.remove('unactive');
}
if (this.arrayNextStep.length < 1) {
this._redo.classList.add('unactive');
}
}
Core.prototype.triggerUndo = false;
Core.prototype.triggerRedo = false;
},
_selectionNavUndo: function() {
var _this = this;
_this._undo.addEventListener('click', function() {
var head = _this.arrayPrevStep.length - 1;
if (head !== -1) {
Core.prototype.triggerUndo = true;
try {
_this.arrayPrevStep[head]();
} catch (e) {
_this.arrayPrevStep = [];
}
Core.prototype.arrayPrevStep = _this.arrayPrevStep.slice(0, head);
if (_this.arrayPrevStep.length === 0 &&
!_this._undo.classList.contains('unactive')) {
_this._undo.classList.add('unactive');
}
}
});
},
_selectionNavRedo: function() {
var _this = this;
_this._redo.addEventListener('click', function() {
var head = _this.arrayNextStep.length - 1;
if (head !== -1) {
Core.prototype.triggerRedo = true;
try {
_this.arrayNextStep[head]();
Core.prototype.arrayNextStep = _this.arrayNextStep.slice(0, head);
} catch (e) {
Core.prototype.arrayPrevStep = [];
Core.prototype.arrayNextStep = [];
Core.prototype.triggerUndo = false;
Core.prototype.triggerRedo = false;
console.error(e);
}
if (_this.arrayNextStep.length === 0 &&
!_this._redo.classList.contains('unactive')) {
_this._redo.classList.add('unactive');
}
}
});
}
}
Core.prototype.constructor = Core;
Core.prototype._undo = document.querySelector('.undo');
Core.prototype._redo = document.querySelector('.redo');
Core.prototype._selectionNavUndo();
Core.prototype._selectionNavRedo();
var EditorText = function(el) {
var _this = this;
this._targetObject = el;
this._targetObject.addEventListener("change", function(e) {
var saveVal = _this._text;
_this._text = this.value;
_this.setText(_this._text, saveVal);
})
}
EditorText.prototype = Object.assign(Object.create(Core.prototype), {
_targetObject: null,
_text: "",
setText: function(newValue, oldValue) {
var _this = this;
_this._targetObject.value = newValue;
_this.setStep(function() {
_this.setText(oldValue, newValue)
})
}
})
EditorText.prototype.constructor = EditorText;
document.querySelectorAll("input").forEach(item => {
new EditorText(item);
});
HTML
<html lang="zh">
<body>
<style>
.main {
margin: 400px auto;
width: 500px;
}
.btn-box {
margin-top: 20px;
}
button{
background-color: #07c160;
color: #ffffff;
border: none;
padding: 6px 18px;
border-radius: 3px;
}
button.unactive{
cursor: no-drop;
background-color: #f6f6f6;
color: #999999;
}
</style>
<div class="main">
<div>
<input type="text" name="name" placeholder="请输入姓名">
<input type="text" name="age" placeholder="请输入年龄">
</div>
<div class="btn-box">
<button class="undo unactive">撤销</button>
<button class="redo unactive">恢复</button>
</div>
</div>
<script>
</script>
</body>
</html>
