前端中怎么实现类似于word文档中的修订功能

Question

功能大概就是点击修订后—按退格键不会删除文字，而是给文字加上删除线，然后光标向前走一步。新增文字时则换个样式
有没有知道的给个思路，万分感谢🙏

Answer 1

主要是range的应用，简单示例

contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作_codingWeb的博客-CSDN博客_contenteditable获取光标 这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素 https://blog.csdn.net/fesfsefgs/article/details/109540259

API参考

Range - Web API 接口参考 | MDN Range 接口表示一个包含节点与文本节点的一部分的文档片段。 https://developer.mozilla.org/zh-CN/docs/Web/API/Range