当前位置：网站首页>直播平台怎么搭建，原生js实现编辑器撤消/恢复功能

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

2022-08-09 22:29:00 【云豹网络科技】

	<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>
			
			//基类
			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);
			});
		</script>
	</body>
</html>

以上就是直播平台怎么搭建，原生js实现编辑器撤消/恢复功能，更多内容欢迎关注之后的文章

原网站

版权声明
本文为[云豹网络科技]所创，转载请带上原文链接，感谢
https://yunbaozhibo.blog.csdn.net/article/details/126246571

当前位置：网站首页>直播平台怎么搭建，原生js实现编辑器撤消/恢复功能

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

边栏推荐

猜你喜欢

随机推荐