纯js实现编辑器撤消/重做（回退）功能 undo/redo

thj13896076523

已于 2022-08-25 11:07:43 修改

阅读量2.7k

点赞数

文章标签： javascript 前端 js html

于 2022-07-04 14:35:39 首次发布

本文链接：https://blog.csdn.net/thj13896076523/article/details/125599495

版权

这里写目录标题

- HTML

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);
				})
			}
			
			// 继承Core基础类,并新增EditorText特有方法
			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>
			//核心js
		</script>
	</body>
</html>