修正 Issue：Code 内 Delete 键可能删除过多内容 & Code 内 回车后光标位置异常 #686
Conversation
Merge The Last Version
Merge The Last Version
Merge v3.3.9
Merge v3.3.12
Merge v3.4.0
Merge 3.4.3
|
每次修改历史栈都会烂，有没有什么好的建议彻底修改下，或者测试方法? |
|
@Vanessa219 是否可以说的稍微详细一些么？ 怎么个烂法？ |
| wbrElement.className = "vditor-wbr"; | ||
| range.insertNode(wbrElement); | ||
| } | ||
| } | ||
| const text = vditor[vditor.currentMode].element.innerHTML; | ||
| vditor[vditor.currentMode].element.querySelectorAll(".vditor-wbr").forEach((item) => { | ||
| item.outerHTML = ""; | ||
| if (item === wbrElement) { | ||
| item.parentNode.removeChild(item); |
There was a problem hiding this comment.
item.parentNode.removeChild(item);和item.remove()感觉都可以- 是不是可以直接把
item.outerHTML = "";替换掉了
There was a problem hiding this comment.
从避免 破坏 Range 和 DOM 树结构上来讲，我支持尽量不使用 outerHTML 来操作 Dom，只要你的业务逻辑上没问题，那这里都不需要判断 item === wbrElement 这个了
There was a problem hiding this comment.
我记得开始也是用的 remove，然后就会出现 range 错误，就改成 outHTML，但是现在我重现不了了，不知道是不是浏览器升级了，还是测试点不对。我先说明注释了吧。
item.parentNode.removeChild(item); 和 item.remove() 这个有具体的区别么？
就像前几天修改了历史，今天你 PR 的这两个都是由于修改后造成的。主要都是光标保存的问题。 |
|
我感觉这个真没有特别严谨的 测试方法，比较严谨一点儿的方法就是积累所有典型的错误案例，每次修改后作全面的测试（可是这个时间代价又太高了，对于 HTML 编辑器这种灵活交互 的产品来说，目前应该也没有什么非常完美的自动测试工具） 总之，对 Range 的操作要尽量保证正常，凡是在类似 keydown 之类的操作事件中对 DOM 进行了修改，务必要保证 Range 恢复到正确位置。 我今天提交的几个 PR 都是由于 Range 被破坏导致的错误。 |
|
浏览器太诡异了。range 更是每种浏览器都不一致。太难了。 |
|
何止 range，你目前只处理 markdown，再牵扯到 普通富文本编辑时，execCommand 方法的执行也是浏览器不一致，最后逼不得已有的都要自己写实现，不能用系统默认的。 |
修正 Issue：#682
另一个错误：在 Code 内 某一行行尾回车后，光标位置会自动跳转到错误的地方；
经过排查，发现是由相同的原因产生，分析如下：
<code>内直接 利用 range.insertNode 添加 后，又直接通过 outerHTML 清空，会导致 浏览器自动将前后两个 TextNode 合并，从而导致 Range 指定的位置错误