js实现撤销恢复_slate.js源码分析（四）- 历史记录机制

最新推荐文章于 2024-05-25 09:40:45 发布
最新推荐文章于 2024-05-25 09:40:45 发布
阅读量709 收藏 2
点赞数
文章标签： js实现撤销恢复
本文详细解析了slate.js实现撤销恢复的历史记录机制，包括MVC模式、撤销重做思路、指令设计以及模型操作。slatejs通过记录用户操作并执行逆向指令来实现状态回滚，同时支持合并操作，确保高效的历史管理。
摘要由CSDN通过智能技术生成

36697c4b8acdcf18c81db9b085dfae79.png

slate历史记录机制

应用中往往可以看到一些撤销、重做的功能，在编辑器中尤为常见

看似很常见，很简单的功能，但实现起来好像也不是那么容易

mvc

在开始介绍撤销、重做的功能设计前，需要先简单复习下 mvc 设计模式

MVC模式（Model–view–controller）是软件工程中的一种软件架构模式

MVC模式最早在1978年提出，一直流行至今
  • 模型（Model）：管理应用的行为和数据
  • 视图（View）：管理作为位图展示到屏幕上的图形和文字输出
  • 控制器（Controller）：翻译用户的输入并依照用户的输入操作模型和视图

2378e983bec175a2b42ad3c59a0f20ed.png

撤销重做

用户的一系列操作会改变页面的状态

最低0.47元/天 解锁文章
weixin_39606911
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 基于栈和命令模式的撤销恢复操作
白瑕 的博客
01-06 1316
JavaScript基于栈和命令模式完成操作的撤销与恢复.
vb.net的事件触发机制_slate.js源码分析（一） —— slate渲染机制
weixin_39668527的博客
11-30 182
富文本的可见内容主要有2块组成：文档内容，光标。本文主要介绍slate中文档内容和光标的渲染机制slate 文档数据结构slate 文档中的节点分为2类：Element 和 Text，其中 Element 可以在 children 中包含 Elment 和 Text，类似 dom 树；可以在Element 和 Text上扩展属性，提供渲染节点所需要的数据interface Element { ...
js实现文本撤销-恢复功能
08-02
js实现文本撤销-恢复功能，亲测有用
推荐开源项目：基于SlateJS的富文本编辑器 —— slate-editor
最新发布
gitblog_00011的博客
05-25 494
推荐开源项目：基于SlateJS的富文本编辑器 —— slate-editor 项目地址:https://gitcode.com/nossas/slate-editor 1、项目介绍 slate-editor 是一个基于 SlateJS 框架构建的完整富文本编辑器，由巴西团队 Nossas 开发并维护。这个编辑器提供了多种插件，可以轻松地扩展其功能，满足各种复杂场景的需求。 2、项目技术分析 核...
js实现撤销恢复功能
热门推荐
u011175079的博客
06-07 1万+
Js实现撤销恢复功能 之前一个项目要自己写个前端插件，其中一个的功能是实现对表格（table）的撤销和恢复功能，在网上百度了一大堆也没有找到合适的方法，后来灵光一闪，想到了一个简单的方法：用数组保存之前对表格的操作，执行撤销和恢复的时候去取数组的最后一个里面的信息实现操作。 1.      先定义2个数组，分别对应撤销操作和恢复操作。 var __gridundo = [];
js 自定义撤销和恢复
我见青山多妩媚,料青山见我应如是
09-02 1021
js 自定义撤销和恢复
再涨个姿势，我们常用的撤销和恢复功能，你知道它们使用了什么设计模式实现吗？...
Java知音
08-14 872
作者：滴水微澜cnblogs.com/zhou--fei/p/9905536.html现有场景描述：现在无论是系统自带的键盘还是第三方的键盘一般都自带撤销和恢复功能，你知道它们是用的什么...
PyPI 官网下载 | SlappPy_Slate-1.3.1-py3-none-any.whl
02-05
《PyPI官网下载：SlappPy_Slate-1.3.1-py3-none-any.whl》 在Python的世界里，PyPI（Python Package Index）是最重要的资源库，它为全球的开发者提供了一个集中地来发布、分享和发现Python软件包。PyPI中的...
Python库 | DolaBot_Slate-1.0.1-py3-none-any.whl
05-31
资源分类：Python库 所属语言：Python 使用前提：需要解压 资源全名：DolaBot_Slate-1.0.1-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
Node.js-slate为您的API生成漂亮的静态文档
08-10
Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行环境，它让开发者能够在服务器端使用 JavaScript 进行编程，极大地推动了全栈开发的流行。在 Node.js 开发过程中，API 文档的编写是必不可少的一环，因为它有助...
js实现撤销恢复_电脑硬盘丢失的资料怎么恢复？选对方法是关键
weixin_39825941的博客
12-01 72
电脑硬盘丢失的资料怎么恢复？对电脑有一定了解的小小伙伴都知道，电脑硬盘是存储重要数据资料的地方。当前，主流的硬盘主要分为移动硬盘和固态硬盘。但是，不管您的重要资料存储在哪一种硬盘当中，都会因为硬盘自己的原因或者一些人为的原因，导致硬盘里的资料丢失了。那么，如果我们遇到类似的问题该怎么应对呢？电脑硬盘丢失的资料怎么恢复呢？请放宽心，选对方法是关键！这里也将为大家分享两种，一起来看下吧。电脑硬盘丢失的...
基于 Immutable.js 实现撤销重做功能的实例代码
11-26
浏览器的功能越来越强大，许多原来由其他客户端提供的功能渐渐转移到了前端，前端应用也越来越复杂。许多前端应用，尤其是一些在线编辑软件，运行时需要不断处理用户的交互，提供了撤消重做功能来保证交互的流畅性。不过为一个应用实现撤销重做功能并不是一件容易的事情。 Redux官方文档中 介绍了如何在 redux 应用中实现撤销重做功能。基于 redux 的撤销功能是一个自顶向下的方案：引入 redux-undo 之后所有的操作都变为了「可撤销的」，然后我们不断修改其配置使得撤销功能变得越来越好用（这也是 redux-undo 有那么多配置项 的原因)。 本文将采用自底向上的思路，以一个简易的在线画图工具为
slate-editor:基于SlateJS框架的完整的RTF编辑器
05-13
板岩编辑器 基于框架的完整的RTF编辑器 安装 slate-editor可作为。 yarn add slate-editor 用法 您可以使用所需的插件。 无需使用。 在下面的示例中，我们仅在工具栏中添加带有其按钮的插件。 基本例子 import React from 'react' import { SlateEditor , SlateToolbar , SlateContent } from 'slate-editor' import { BoldPlugin , BoldButton } from '@slate-editor/bold-plugin' const plugins = [ BoldPlugin ( ) ] const SlateRichTextEditor = ( ) => ( < SlateEditor xss=removed>
SlateVim:一个基于slate.js的共享vim编辑器，供狂热者使用！
05-22
:open_book: 介绍 一个基于slate.js的共享vim编辑器，适合那些发烧友！ 协作工具是小时的需求。 诸如google docs之类的服务效果很好，但是开发人员有时需要快速共享和他们习惯的环境。 这是SlateVim进来的地方。 使用Slate.js时，它提供了出色的文本编辑器以及vim著名的命令。 它将Vim的强大功能与舒适的Google Docs打包在一起。 :gear: 初赛 安装与设置 确保已安装 。 确保已安装 。 > npm install yarn > yarn --version 1.22.4 克隆存储库。 > git clone https://github.com/ridhambhat/SlateVim.git && cd SlateVim 用yarn安装所需的依赖项。 > yarn install 启动开发客户端。 > npm start 导航到 。
slate一个完全可定制的框架用来构建富文本编辑器在浏览器中
08-07
slate：一个完全可定制的框架用来构建富文本编辑器在浏览器中
js实现撤销恢复_Dom节点变动检测并录制的简单实现
weixin_39731107的博客
11-28 612
点击上方蓝字关注我们关键技术MutationObserverMutationObserver使用来监测某个范围内DOM的变动，如节点的增减、属性的变动，文本节点的变化等。相当于DOM的改变就会触发MutationObserver这个事件，但是这个事件是异步触发的，会把DOM的变动封装成一个数组进行统一更新的，这点和react中的setState非常相像。构造函数var observer ...
客户端JavaScript实战撤销恢复功能总结
James Ren的专栏
03-19 1699
      撤销和恢复功能，英文为：Undo和Redo，快捷键分别为Ctrl+Z和Ctrl+Y。它们是一组很常见的功能，在很多系统和软件中都有这两个功能。随着浏览器的功能越来越强，Web App将越来越占据重要位置，基于客户端JavaScript实现的撤销和恢复功能将越来越多，最近在工作中，完成了一个web系统的撤销和恢复功能，特写下一些心得以供分享。       首先介绍一下我们系统基本内容：...
js实现撤销恢复_Git撤销之世上真有后悔药
weixin_39941620的博客
11-30 118
前言大家在代码提交的时候有时会遇到过如下情况： 错误将一些Demo代码误提交 分支合并错误 提交有冲突代码 ………这时需要有颗后悔药来拯救；世上真的有后悔药吗？下面我们一起来吃次后悔药撤销之来吃颗后悔药前置说明 演示所用的Git服务端：码云 目标：在reset分支上撤销之前N次提交撤销步骤 把代码clone到本地仓库 git clone https://gitee.com/zhanghan_ja...
AttributeError: module 'win32com.gen_py.91493440-5A91-11CF-8700-00AA0060263Bx0x2x12' has no attribute 'CLSIDToClassMap'
09-14
根据您的描述，您遇到了两个问题。首先，在安装 Slate 和 PyCurl 过程中，遇到了类似的错误报告，即 "Check the logs for full command"。其次，在使用 sys.getframe().f_code.co_name 时，报告了 "AttributeError: module 'win32com.gen_py.91493440-5A91-11CF-8700-00AA0060263Bx0x2x12' has no attribute 'CLSIDToClassMap'" 的错误。 对于第一个问题，"Check the logs for full command" 错误通常表示在安装过程中发生了一些问题，而实际的错误信息可能保存在日志文件中。要解决这个问题，您可以尝试以下步骤： 1. 检查您的环境是否满足 Slate 和 PyCurl 的安装要求，例如 Python 版本、依赖库等。 2. 确保您以管理员身份运行安装命令，并尝试使用 pip 或者 conda 安装 Slate 和 PyCurl。 3. 在安装过程中，如果提示有错误信息，请查看相关日志文件，通常可以在当前目录下的 "logs" 文件夹或者系统的临时文件夹中找到。查看日志文件可以帮助您了解实际的错误原因，并采取相应的解决措施。 对于第二个问题，"AttributeError: module 'win32com.gen_py.91493440-5A91-11CF-8700-00AA0060263Bx0x2x12' has no attribute 'CLSIDToClassMap'" 错误提示表明在当前模块中找不到 'CLSIDToClassMap' 属性。 要解决这个问题，您可以尝试以下方法： 1. 检查您是否正确导入了 win32com.gen_py 模块，并且确保该模块已经正确安装。 2. 确保您正在正确使用 sys.getframe().f_code.co_name 来获取函数名称，并且确认当前代码中存在该函数。 3. 检查您的代码逻辑，确保在使用 sys.getframe().f_code.co_name 前，已经正确执行了相关的初始化或导入操作。 4. 如果问题仍然存在，您可以尝试更新 win32com.gen_py 模块，或者查阅相关文档和社区讨论，以获得更多关于此错误的解决方案。 希望以上信息能帮助您解决问题。如果您有任何其他疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值