wangEditor光标乱跳问题

在封装wangEditor组件时遇到一个问题,每当用户按下Enter键,光标会异常跳回末尾。原因是父组件通过onchange事件不断同步编辑器内容,导致光标位置混乱。同时,撤销和恢复功能也失效。解决方案在于阻止文本输入时的实时监听,确保光标正常移动。更新wangEditor版本后,该问题得到解决。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述

在使用wangEditor时,输入内容,按enter切换下一行时,光标切过去,又自动跳回来。

造成问题原因

是因为封装了组件后,使用父级传入的内容,每次输入都会触发wangEditor的onchange事件,而在onchange事件中又使用了子传父的方式将修改后的值赋给父组件,父组件的值改变后导致子组件wangEditor的值也被修改,所以出现光标总是跳转到最后。此时,并发的还有另外一个问题就是,撤销和恢复点击后无效。

解决方案

光标乱跳是因为watch监听的时候 文本内容被实时更新,那么想办法在文本输入的时候让监听无效即可,离开编辑状态 又生效,让文本内容可以保证保存的时候是正确的即可。

如果有帮助到您的话,麻烦动动小手点个赞!
谢谢啦
在这里插入图片描述
补充一下: 后续发现更新下wangeditor版本可解决。

### WangEditor 中设置光标位置的方法 在 WangEditor 富文本编辑器中,可以通过特定 API 来精确控制光标的放置位置。对于版本 4.3.0 的 WangEditor,可以使用 `editor.command` 或者直接操作 DOM 节点的方式来进行光标定位。 #### 使用命令方式设置光标位置 通过调用 editor 实例下的 command 方法,能够更加灵活地处理光标的移动逻辑: ```javascript // 假设已经初始化了一个名为 editor 的实例 const pElement = document.createElement('p'); // 创建一个新的段落元素 editor.insertElem(pElement); // 将新创建的节点插入到编辑区 editor.command({ name: 'insertHTML', value: '<span>新的内容</span>', callback(editor, result) { const range = document.createRange(); const sel = window.getSelection(); let lastChild; if (result.node && result.node.lastChild) { lastChild = result.node.lastChild; } else { lastChild = pElement; } range.setStartAfter(lastChild); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); // 移动光标到最后一个字符后面 } }); ``` 上述代码片段展示了如何在一个指定的新创建的内容之后重新设定光标的位置[^2]。 #### 利用 Document 对象调整光标 当遇到复杂场景下无法直接获取光标时,可以在原有基础上增加对文档对象的操作以确保能正确找到光标所在之处: ```javascript function setCursorAtEnd(node){ var selection = window.getSelection(), range = document.createRange(); while (node.lastChild){ node=node.lastChild;} range.setStartAfter(node); range.collapse(true); selection.removeAllRanges(); selection.addRange(range); } let container = editor.txt.$textContainerEl[0]; // 获取编辑区域容器 setCursorAtEnd(container); // 设置光标至结尾处 ``` 此方法适用于那些由于某些原因导致常规手段难以获得光标的情况,比如多级嵌套结构或者自定义组件内部[^3]。 #### 注意事项 - 上述两种方法均需确保当前页面具有可选中文档的能力(即未禁用用户选择) - 如果是在异步加载数据后再执行这些操作,则应考虑延迟执行或等待渲染完成再进行光标重置
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值