直播平台怎么搭建，原生js实现编辑器撤消/恢复功能

<html><br><body><br><style><br>.main {<br>margin: 400px auto;<br>width: 500px;<br>}<br>.btn-box {<br>margin-top: 20px;<br>}<br>button{<br><br>color: #ffffff;<br>border: none;<br>padding: 6px 18px;<br>border-radius: 3px;<br>}<br>button.unactive{<br>cursor: no-drop;<br>background-color: #f6f6f6;<br>color: #999999;<br>}<br></style><br><div><br><div><br><input type="text" name="name" placeholder="请输入姓名"><br><input type="text" name="age" placeholder="请输入年龄"><br></div><br><div><br><button class="undo unactive">撤销</button><br><button class="redo unactive">恢复</button><br></div><br></div><br><script><br>//基类<br>var Core = function() {}<br>Core.prototype = {<br>arrayPrevStep: [], //存放撤消操作方法列表<br>arrayNextStep: [], //存放恢复操作方法列表<br>triggerUndo: false, //撤消操作标记<br>triggerRedo: false, //恢复操作标记<br>_undo: null, //撤消按钮<br>_redo: null, //恢复按钮<br>setStep: function(func) {   //操作之后触发保存的方法（调用后台保存方法）<br>if (this.triggerUndo) {<br>this.arrayNextStep.push(func);<br>if (this._redo.classList.contains('unactive')) {<br>this._redo.classList.remove('unactive');<br>}<br>} else {<br>if (!this.triggerRedo) Core.prototype.arrayNextStep = [];<br>this.arrayPrevStep.push(func);<br>if (this.arrayPrevStep.length > 20) {<br>this.arrayPrevStep.shift();<br>}<br>if (this._undo.classList.contains('unactive')) {<br>this._undo.classList.remove('unactive');<br>}<br>if (this.arrayNextStep.length < 1) {<br>this._redo.classList.add('unactive');<br>}<br>}<br>Core.prototype.triggerUndo = false;<br>Core.prototype.triggerRedo = false;<br>},<br>_selectionNavUndo: function() {<br>var _this = this;<br>_this._undo.addEventListener('click', function() {<br>var head = _this.arrayPrevStep.length - 1;<br>if (head !== -1) {<br>Core.prototype.triggerUndo = true;<br>try {<br>_this.arrayPrevStep[head]();<br>} catch (e) {<br>_this.arrayPrevStep = [];<br>}<br>Core.prototype.arrayPrevStep = _this.arrayPrevStep.slice(0, head);<br>if (_this.arrayPrevStep.length === 0 &&<br>!_this._undo.classList.contains('unactive')) {<br>_this._undo.classList.add('unactive');<br>}<br>}<br>});<br>},<br>_selectionNavRedo: function() {<br>var _this = this;<br>_this._redo.addEventListener('click', function() {<br>var head = _this.arrayNextStep.length - 1;<br>if (head !== -1) {<br>Core.prototype.triggerRedo = true;<br>try {<br>_this.arrayNextStep[head]();<br>Core.prototype.arrayNextStep = _this.arrayNextStep.slice(0, head);<br>} catch (e) {<br>Core.prototype.arrayPrevStep = [];<br>Core.prototype.arrayNextStep = [];<br>Core.prototype.triggerUndo = false;<br>Core.prototype.triggerRedo = false;<br>console.error(e);<br>}<br>if (_this.arrayNextStep.length === 0 &&<br>!_this._redo.classList.contains('unactive')) {<br>_this._redo.classList.add('unactive');<br>}<br>}<br>});<br>}<br>}<br>Core.prototype.constructor = Core;<br>Core.prototype._undo = document.querySelector('.undo');<br>Core.prototype._redo = document.querySelector('.redo');<br>// 初始化撤消／恢复按钮<br>Core.prototype._selectionNavUndo();<br>Core.prototype._selectionNavRedo();<br>// 操作场景(输入框改变)<br>var EditorText = function(el) {<br>var _this = this;<br>this._targetObject = el;<br>this._targetObject.addEventListener("change", function(e) {<br>var saveVal = _this._text;<br>_this._text = this.value;<br>_this.setText(_this._text, saveVal);<br>})<br>}<br>// 继承Core基础类,并新增EditorText特有方法<br>EditorText.prototype = Object.assign(Object.create(Core.prototype), {<br>_targetObject: null,<br>_text: "",<br>setText: function(newValue, oldValue) {<br>var _this = this;<br>_this._targetObject.value = newValue;<br>_this.setStep(function() {<br>_this.setText(oldValue, newValue)<br>})<br>}<br>})<br>EditorText.prototype.constructor = EditorText;<br>document.querySelectorAll("input").forEach(item => {<br>// 建立监听<br>new EditorText(item);<br>});<br></script><br></body><br></html>