图片 MergeTree在处理大规模数据删除和更新操作时，会先将要删除或更新的数据标记为删除状态，而不是立即删除或更新数据。...MergeTree在处理大规模数据删除和更新操作具体过程如下： 删除操作： 当执行删除操作时，MergeTree会将需要删除的数据的主键添加到一个名为all_columns.is_del的布尔类型列中，...这样可以避免实际删除数据的开销，同时保持数据文件的紧凑性。 更新操作： 当执行更新操作时，MergeTree会将需要更新的数据的主键添加到一个新的文件中，并在该文件中存储更新后的数据。...这样的处理方式对性能有以下影响： 删除操作： MergeTree的删除操作只是在添加一个删除标记，而不是实际删除数据。...MergeTree处理大规模数据删除和更新操作的方式使得删除操作高效，更新操作对查询性能影响较小，但会增加硬盘空间的利用率。 除了MergeTree，ClickHouse还有其他存储引擎。
索引和约束： 删除表可能会导致与该表相关的索引和约束失效。在删除表之前，应该考虑删除相关的索引和约束，或者在删除后重新创建它们。 事务处理： 如果在删除表的操作中使用了事务，请确保事务的处理符合预期。...关联视图和存储过程： 如果有与表关联的视图或存储过程，删除表可能会影响到这些对象。在删除表之前，需要检查和更新相关的视图和存储过程。...这是一个简单的删除数据的例子，通过类似的方式，你可以根据实际需求删除表中的数据。 五、总结 在SQL中，插入数据使用INSERT INTO语句，可插入单行或多行数据，指定列和对应数值。...更新数据使用UPDATE语句，可更新整个表、特定行或列，通过条件更新。删除数据使用DELETE语句，可删除整个表、特定行或满足条件的数据。谨慎操作删除，需备份数据、处理依赖关系、考虑权限等。...通过实例，展示了插入、更新、删除数据的基本语法和常见用法。
Slate.js slate是一个仅仅提供引擎的富文本core，简单来说他本身并不提供各种富文本编辑功能，所有的富文本功能都需要自己来通过其提供的API来实现，甚至他的插件机制也需要通过自己来拓展，所以使用...与DOM相同，slate的数据模型基于DOM，文档是一个嵌套的树，其使用文本选区selections和范围ranges，并且公开所有的标准事件处理函数，这意味着像是表格或者是嵌套引用这样的高级特性是可能的...在quill的文档中有对于框架的设计原则上的描述： API驱动设计，quill所有的功能都是通过API来实现的并且可以直观的通过API来获得数据的变化，以文本为中心的基础上构建的API，不需要解析HTML...声明式富文本，draft无缝融入React，使用React用户熟悉的声明式的API抽象出渲染、选择和输入行为的细节。...不可变的编辑器状态，draft模型是使用immutable.js构建的，提供具有功能状态更新的API，并积极利用数据持久性来实现可扩展的内存使用。 示例 这样一段文本的数据结构如下所示。
后端 Spring Boot 和前端 Vue 实现文章发布与富文本编辑功能的具体实现方法，可以分为以下几个步骤： 1、后端 Spring Boot 实现 (1) 创建 Spring Boot 项目，并添加相关依赖...接口并实现自定义方法，以提供与数据库交互的接口； (4) 创建 ArticleController 类，定义 HTTP 请求处理接口，如新增、更新、删除、查询单篇、查询多篇文章等。...其中，涉及到发布和更新文章内容时，需要将请求体转换成合适的格式，并保存到数据库中； (5) 使用快速构建工具（如 Lombok）简化代码编写。...同时，使用 axios 库发送 HTTP 请求到后端 Spring Boot 接口，以实现文章的新增、更新、删除等操作； (5) 对文章列表页面进行分页和搜索等功能的开发。...组件里面包含一个包装表单的HTML模板、一些组件级别的数据和方法。当用户提交表单时，`submitArticle()`方法会被触发。
我试用了市面上所有主流富文本编辑器，筛掉长期不更新，bug 明显，社区活跃度低，功能单一的编辑器，把最好、最有特点的 6 款编辑器挑出来，分享给大家。...但它比其他编辑器更棒的地方在于多人在线实时编辑。类似于谷歌文档那种效果，所有使用者在同一个页面彼此能看到对方的光标位置和名字，大家同时在线协同编辑。...作为老牌富文本编辑器，Quill 还有一个比较大的开发者社区以及围绕 Quill 开发的插件和集成的生态系统。 五....Froala - 插件丰富，UI友好，编辑器里的苹果 Froala 被喜欢它的用户称之为史上最牛富文本编辑器，干净的 UI 和简洁的设计，极其丰富的插件，可自定义配置，功能非常强大，API 和文档非常全面...Trumbowyg - 超轻量，体积小巧，仅 8KB Trumbowyg 是一个超级轻量级可定制的 jQuery 富文本编辑器，可生成语义化代码，针对 HTML5 优化，对主流浏览器友好支持， API
大家好，我是小富~ 在这个微服务的世界里，后端API的一致性设计是必不可少的。 今天，我们将讨论一些可遵循的最佳实践。我们将保持简短和甜蜜——所以系好安全带，出发咯！...使用API设计工具 有许多好的API设计工具用于编写好的文档，例如： API蓝图：https://apiblueprint.org/ Swagger：https://swagger.io/ 拥有良好而详细的文档可以为...获取字段查询参数 返回的数据量也应该考虑在内。添加一个fields参数，只公开API中必需的字段。 例子： 只返回商店的名称，地址和联系方式。 GET /shops?...GET：检索资源的表示形式。 POST：创建新的资源和子资源。 PUT：更新现有资源。 PATCH：更新现有资源，它只更新提供的字段，而不更新其他字段。 DELETE：删除已存在的资源。 18....例子包括无效的身份验证凭证、不正确的参数、未知的版本id等。 当由于一个或多个服务错误而拒绝客户端请求时，一定要返回4xx HTTP错误代码。 考虑处理所有属性，然后在单个响应中返回多个验证问题。
原理篇 WordPress 与 REST API WordPress 在4.4 版本后推出了 REST API， REST API 简单来说就是一种通过 HTTP 请求来获取、更新、删除数据的一种连接客户端与服务端的交互方式...从用户体验上考虑，不应该一开始就向用户申请授权，而是有需要的页面才申请；同时也应该做好用户不允许授权的优雅处理。在这里因为小程序的坑以及个人关系第一版处理得不是很完美，代码就不展示了。...6月14日更新：处理授权相关的内容参考本文《提升用户体验，微信小程序“授权失败”场景的优雅处理》 记录的文章阅读历史数据是以LocalStorage 的形式保存在客户端而非云端，一句“阅读记录仅保存在本设备...最后还需要在log.js 的onShow生命周期绑定一个更新数据的函数： // https://devework.com/wordpress-rest-api-weixin-weapp.html updateData...建议在设计icon 的时候稍微留点透明的padding 占位，不然会导致图标在真机上会放得很大。
3.2 设计思路 我们最初设计Page-佩奇平台的初心其实很简单，为了给产品和运营提供一个通过富文本编辑器快速制作并发布网页的工具。...同时支持以HTTP、Thrift方式的开放API供大家选择，支持客户端、后端调用开放API。 内容风险审核：严谨高效的审核机制。...3.3.4 多平台接入 Page-佩奇平台也可以作为一个完善的富文本编辑器供业务系统使用，支持内嵌到其他系统内。作为消息发布等功能承载，减少重复的开发工作，同时我们配备完善的SDK供大家选择使用。...Page-佩奇平台进行页面的发布，同时想要拿到发布的内容做一些自定义的处理。...描述：提供开放API，支持业务自定义和样式渲染到业务系统，同时解决了iframe体验问题。 场景：客户端、后端、小程序的同学，可根据API渲染文案，实现动态化管理富文本信息。
这几年来我们在不断地进行需求迭代，同时也没忘了搭建更适合业务发展的架构设计，技术方案也在不断地演化，每天都能学到新东西。今天跟大家分享下一个 Excel 项目到底可以有多好玩。...冲突处理冲突处理的解决方案其实已经相对成熟，包括：编辑锁：当有人在编辑某个文档时，系统会将这个文档锁定，避免其他人同时编辑。...但文档和一般的房间聊天不一样的地方在于，用户的操作不可丢失，同时还需要有严格的版本顺序的保证。用户的操作内容可能会很大，例如用户复制粘贴了一个10W、20W的表格内容，这样的消息显然无法一次性传输完。...那么，对于一个子表来说，我们的操作可能会包括：插入重命名移动删除更新内容...只要拆分得足够仔细，对于子表的所有用户行为，都可以由这些操作来组合成最终的效果，这些不再可拆分的操作便是最终的原子操作。...例如，复制粘贴一张子表，可以拆分为插入-重命名-更新内容；剪切一张子表，可以拆分为插入-更新内容-删除-移动其他子表。
同时，可以将某个工作表（Worksheet）的配置 rightToLeft 为 true，将从整体外观上形成从右到左的形式，如下图： 富文本支持项目符号列表 作为富文本格式的一部分，现在支持使用无序项目符号和有序编号列表...我们向 Shape 和 Shape Base 类添加了一个名为 toImageSrc 的新 API。对于图表和切片器来说也是如此。...这样，设计器中就有了一个用于设置 AutoFit 属性的新 API 和一个新界面设置： 页总计 报表插件的 R.V 函数生成工作表中溢出单元格的值。在新版本中，添加了另一个参数来指定当前页面。...表 自定义样式 新版本中，SpreadJS 允许用户自定义表格样式 集算表 预定义列 SpreadJS 集算表新版本支持添加、更新和删除具有有意义的列类型的列，以帮助轻松设计表格。...运行时 UI 操作：类似于工作表操作，如单元格编辑、添加/删除行/列、剪贴板操作、拖动/移动行/列等 集算表 API：大多数更改数据或设置的 API 操作（setDataView 方法除外） 同样，在表格编辑器中也支持撤销重做
（axure，某刀，mastergo等） 文档办公类 （飞书文档，钉钉文档，石墨文档等） 设计工具（即时设计，figma等） 主要目的是实现多个人同时编辑一份共享资源, 来提高工作效率。...抛开已有技术本身，我们拿最简单的富文本编辑器为例子， 如果我们想让它实现多人同时编辑，有哪些可以想到的方案呢？...跨平台：支持 Windows、macOS 和 Linux，让开发者可以在各种操作系统上工作。 文档齐全：提供详细的 API 文档和示例代码，便于理解和使用。...的数据转换成文档数据，另一个协作方就能看到对方内容的更新。...事务是共享文档上的一系列更改，这些更改会在一个事务中进行处理，以保证数据的一致性和正确性。每个事务都会触发Observer调用和update事件，我们可以在这些事件中进行相应的处理。
API 常见的使用场景； 什么是观察者设计模式及如何使用 TS 实现观察者设计模式。...比如我们希望在富文本编辑器中高亮 # 符号后的内容，这时候我们就可以通过 MutationObserver API 来监听用户输入的内容，发现用户输入 # 时自动对输入的内容进行高亮处理。...Editor.js 是一个 Block-Styled 编辑器，以 JSON 格式输出数据的富文本和媒体编辑器。...在 Editor.js 编辑器内部，它通过 MutationObserver API 来监听富文本框的内容异动，然后触发 change 事件，使得外部可以对变动进行响应和处理。...四、观察者设计模式 4.1 简介 观察者模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
-- 富文本输入框 --> documennt.execCommand('bold'); //操作 复制代码 L1 L1 在 L0 的基础上继续使用浏览器的特性、DOM 的 API 来自主实现...MVC模式】 传统模式 DOM 树等于数据，使用 DOM API 直接操作（CKEditor 4、TineMCE、UEditor） MVC模式 数据和渲染分离，数据模型发生变更后，数据才发生变更（Slate...、CKEditor 5、Quil.js） L2 自定义输入和操作，包括光标、输入法、删除等基础动作，具备绘图布局等能力。...良好的MVC架构，创建一个在 DOM 与模型之间的映射，并且拥有完整的分层 在文档模型上能够定义表现良好的编辑操作（operation）。...化的关键能力 关键设计 command 的原子操作抽象和设计 大型前端软件的架构分层，面向扩展开放，面向修改封闭
富文本编辑器（MVP） 2.24 Feature：删除文字 2.24.1 算法 监听input元素的compositionstart和compositionend事件。...当事件触发： 如果此时用户没有正在使用输入法 & 用户按下的是Backspace键：删除光标前的一个字符 否则，不做任何操作 当要删除光标前的一个字符时： 如果光标处于不显示状态，不做任何操作 如果光标处于所有字符的前面...，不做任何操作 如果光标处于当前段落的开头，将当前段落和上一个段落合并，并将光标挪动到合并处 否则，删除光标前一个字符，后面字符补位，并将光标挪动到前一个位置 参考文档： KeyboardEvent.key.../docs/Web/API/Element/compositionend_event 2.24.2 实现 实现算法的同时，我们对代码进行一些重构： 简化逻辑：使用一个状态store.charUnderCursor...程序后续会进入处理中文输入法的逻辑：将输入法中的原始英文字符上屏。 如果用户没有正在使用输入法: 如果光标在所有文字末尾，追加新的一个段落。
功能演示 登录 （为了方便演示，密码输入框的类型改成text） 配置文件分支选择，dev环境无需输入验证码 ? ? 同时支持多种登录限制 允许/禁止账号多人在线 ? 软删除 ?...推荐阅读：设计模式入门 菜单管理 菜单管理是一棵layui的Tree 增删改 权限管理 增删改查 ?...，同时要做响应数据的加密操作，所以登录部分的API加密光按照我们之前的博客来还是不够的，需要在CaptchaFilterConfig进行解密操作，解密后new一个自定义RequestWrapper设置Parameter...，并将这个新对象传到doFilter交由下一步处理 3、还是API加密问题，我们是在程序启动的时候生成后端RSA秘钥对，正常来说我们在访问登录页面进行登录的时候前端获取一下就可以了，但在开发环境中，我们通常开启热部署功能...，这样在开发的时候idea热部署后刷新页面就可以了（已提交最新代码，解决热部署后刷新页面还是API加解密失败问题；现在热部署后刷新页面即可） 更新 1、新增百度富文本的使用，但还没配置上传接口： UEditor
加入腾讯文档 Excel 开发团队已经有好几个月了，刚开始代码下载下来 100+W 行，代码量很大但模块设计和代码质量比我想象中好好多了，今天跟大家分享下一个 Excel 项目到底可以有多好玩。...冲突处理 冲突处理的解决方案其实已经相对成熟，包括： 编辑锁：当有人在编辑某个文档时，系统会将这个文档锁定，避免其他人同时编辑。...但文档和一般的房间聊天不一样的地方在于，用户的操作不可丢失，同时还需要有严格的版本顺序的保证。用户的操作内容可能会很大，例如用户复制粘贴了一个10W、20W的表格内容，这样的消息显然无法一次性传输完。...例如，我们插入一个子表这样一个操作，除了插入自身的操作，可能需要对其他子表进行移动操作。那么，对于一个子表来说，我们的操作可能会包括： 插入 重命名 移动 删除 更新内容 ......例如，复制粘贴一张子表，可以拆分为 插入-重命名-更新内容；剪切一张子表，可以拆分为 插入-更新内容-删除-移动其他子表。
为了解决「可视化搭建系统」，我们尝试把一个上述「复杂的业务平台」和「垂直领域的富文本开发」这两大难题结合起来，打造一个功能强大的编辑器，同时完成页面搭建平台的工作——这听上去虽然是“难上加难”，但似乎两大方向的融合是一种美妙的思路和创新...结合我们的需求特点：页面区块和设计样式固定、组件形态固定、页面排版固定、重文字和图片内容、页面交互并不复杂，我们认为，多功能富文本编辑器将会是一个值得深入试水的方向。...综上需求和设计方案，我们选用了 Draft.js 作为这套多功能编辑器的底层框架，一句话足以总结做出该选择的原因：**Draft.js 实际上并不是一个富文本编辑器，它其实是一个用于构建富文本内容和富文本编辑器的基础设施...所有的组件和插件原则上都是可以面向社区、面向第三方使用的，同时后续计划只需要一个 NPM 包即可接入一个新的功能或新的自定义组件类型。...表单是页面中数据交互的基本形式，对于非开发人员使用也没有使用门槛，但是切记不可将表单设计的过于复杂。同时要注意，编辑系统和配置系统需要解偶的原则。
首先，创建一个ATSpan，继承自ImageSpan，附带@的数据信息 解析要添加的富文本数据，将要展示的内容，例如「@xuyisheng」，作为文本，创建一个TextView来承载 将生成的TextView...着色 首先，我们来实现普通文本的变色功能，做一个蓝色的字色，这个比较简单，可以使用ClickableSpan或者其它Span来着色，为了方便我们富文本的输入和展示，这里直接选择ClickableSpan...看完了SpanWatcher，再来看下Selection，Selection是为TextView和Edittext设计的一套管理选中态的工具类，借助Selection，可以在不依赖具体View的情况下，...控制删除 那么除了选中之外，剩下的一个问题就是删除的整体性控制。...❞ 好了，到此为止，我们又实现了富文本编辑器中的一个非常重要的功能——Span的整体性控制。
在实际应用中，通常需要同时使用多种技术和工具来解决多级NAT环境下的P2P连接问题。...最后我们定义了一个increase函数，在这里我们通过transact作为事务来执行set操作，因为我们之前的设计只会处理我们当前客户端对应的id的那个值，本地的值是可信的，直接自增即可，transact...首先我们可以回忆一下CRDT在集合这个数据结构上的设计，我们主要考虑到了集合的添加和删除如何完整的保证交换律、结合律、幂等律，那么现在在富文本的实现上，我们不仅需要考虑到插入和删除，需要考虑到顺序的问题...举个例子，目前我们有AB字符串，其中一个客户端删除了B，另一个客户端同时在A与B之间增加了C，那么此时这两个Op同步到了第三个客户端，那么假如增加了C这个操作先到并且执行了，再删除了B，那么没有问题，可是假设我们先删除了...那么为了使数据能够满足三律，在前文我们引入了一个偏序的概念，但是在协同编辑设计中，使用偏序不能够保证数据同步的正确性和一致性，因为其无法处理一些关键的冲突情况，举一个简单的例子，假设我们此时有AB字符串
Last-Write-Wins-Element Set 在Last-Write-Wins-Element Set中为了解决删除元素不能再次添加的问题，可以考虑给2P-Set中A和R的每个元素加一个更新时间戳...另一个更优化的实现是不要R集合，而A集合中每一个元素除了维护一个更新时间戳之外，还有一个删除标志位，这也可以看出实际上通过附加元信息的方式可以有很多实现，只要能够满足交换律、结合律和幂等律即可。...还有一种满足Op-based CRDT的设计，核心思想是每次Add(e)的时候都为元素e加一个唯一的tag/uuid，Remove(e)将当前节点上的所有e和对应的tag/uuid都删除，这样在Remove...最后 由于CRDT是处理分布式系统数据同步问题的通用解决方案，所以本文并没有局限于在富文本数据结构的设计，而是从分布式数据同步的角度来理解CRDT，并且穿插着CRDT在富文本领域上的应用，从而让我们能够更好地理解这个数据模型...与OT一样，在CRDT的领域也有很多开源的实现，通过应用CRDT基础库为应用带来了奇妙的可能，只需要一个API与Backbone几乎一样简单的数据Model层，应用就能自然地获得对多人协作场景下并发更新的支持
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
