wangEditor中使得光标处于文本末端的方法记录

最新推荐文章于 2023-10-13 09:38:29 发布
最新推荐文章于 2023-10-13 09:38:29 发布
阅读量4k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45059466/article/details/111317198
版权
在使用vue.js开发前端项目时，遇到需求：使用wangEditor后，光标需自动定位在文本末尾。发现wangEditor默认设置下，光标在内容首端。尝试网上方法无效后，通过在value的watch方法中操作，成功解决了问题，避免了onfocus报错和onchange中光标闪烁的问题。
摘要由CSDN通过智能技术生成

wangEditor中使得光标处于文本末端的方法记录

问题描述

最近在使用vue写前端项目中有个需求是从父组件给wangEditor赋值后光标自动处于文本末端。

前言

wangEditor在默认情况下，父组件给其设置内容后光标会处于首端，不符合需求。网上找的直接通过js操作的方法经过尝试没有作用(也可能是没写对)，官方文档也没找到合适的方法。最终经过一番尝试后成功解决，特此记录，希望能帮到有类似需求的人。

解决方法

在父组件与wangEditor通信的双向绑定数据value的watch方法中，增加一句：

this.editor.selection.moveCursor(this.editor.$textElem.elems[0]
最低0.47元/天 解锁文章
雪月哀
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
wangeditor 不识别html_wangEditor光标跳动解决方案
weixin_42503008的博客
01-12 1533
项目中需要使用富文本编辑器，经过调研，决定采用轻量级的wangEditor。结果发现坑不小啊尤其搭配着vue双向绑定的时候，光标经常就跳到了末尾。撤销功能也不好使了。多次在网上查阅资料，最简单的治标不治本的方法是：editor.customConfig.onchangeTimeout = 1000停止编辑后，等1s钟，再通知父组件更新数据。昨天经过多次尝试，实验出了一种行之有效的解决方案...
Vue+wangEditor 使用实例 已解决光标乱跳
qq_43193513的博客
05-28 3744
怎么说呢，最近在做公司的官网，文章管理这一块需要用到富文本编辑器，自己试了几个市面上比较火的编辑器感觉效果都不是太理想，最后感觉这个wangEditor还不错，就参照着官网和百度上的资料自己写了一个组件。 这是效果图 话不多说上代码 子组件的代码 这里重要的都加了注解 <template> <div id="wangeditor"> <div ref="editorElem" style="text-align:left"></div>
解决富文本编辑器wangeditor 光标跳动的问题
weixin_50606255的博客
12-23 3233
为什么会出现光标总是跳动到末尾的情况？？ 通常我们会将编辑器封装为一个组件来使用，编辑的内容就是通过父组件传递给子组件，每次编辑父组件中的内容都会触发子组件(编译器)中的onchange事件，子组件再将新的改变后的值传递给父组件，父组件一接收到值光标就会自动跳转到内容末尾。 如何解决这种问题？？ 源头就是要解决onchange事件改变内容的时机，不能一在父组件写东西就触发，或者是触发之后在我们需要更新后的内容时再传递给父组件。 即在onchange事件中添加判断条件 以下代码的修改和添加都在这个示
wangEditor光标乱跳问题
Admin_yws的博客
07-16 2320
问题描述 在使用wangEditor时，输入内容，按enter切换下一行时，光标切过去，又自动跳回来。 造成问题原因 是因为封装了组件后，使用父级传入的内容，每次输入都会触发wangEditor的onchange事件，而在onchange事件中又使用了子传父的方式将修改后的值赋给父组件，父组件的值改变后导致子组件wangEditor的值也被修改，所以出现光标总是跳转到最后。此时，并发的还有另外一个问题就是，撤销和恢复点击后无效。 解决方案 在子组件watch监听父组件传入的值时，加入判断，目的是输入时内容是
vue wangEditor出现光标乱跳的问题
Benz_s600的博客
07-12 1032
原理是: 在用户输入时 会首先触发change事件 传回父组件 父组件再传回来 触发watch监听事件 只需要在change的时候修改一个标志位的 true 然后利用这个标志位去判定是否修改 editor的html 因为editor的html一旦触发 光标会默认跳到最后。在封装的editor组件中。
wangEditor 富文本编辑器
秦璐璐的博客帝国
05-02 3045
在vue中引入 import E from "wangeditor";正常引入 var E=window.wangEditor定义var editor = new E("#left");创建editor.create(); //当编辑器 改变时 记录其 内容！！ editor.customConfig.onchange =（） =&gt; { //处理回调函数 };想...
编辑框光标位置插入文本
12-19
编辑框光标位置插入文本
在vue中获取wangeditor的html和text的操作
01-21
补充知识：vue-cli webpack 引入 wangeditor(轻量级富文本框) 1：使用npm下载： //（注意 wangeditor 全部是小写字母） npm install wangeditor 2: 直接在项目模板中引用 import E from ‘wangeditor’ 3：HTML ...
vue集成wangeditor3.0版本 解决光标乱跳等问题
sunlizhen的专栏
03-13 2155
关于wangeditor的具体集成方法跟用法 可以参考官网http://www.wangeditor.com/ <template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="edi...
vue项目中使用wangeditor富文本编辑器
weixin_42132044的博客
10-28 1091
wangEditor - 轻量级 web 富文本编辑器 案例图片 遇到的问题： 问题1：在同一个页面，实现多个文本编辑器。 解决方案：有多少个字段需要富文本编辑器，就new多少个富文本编辑器对象。 问题2：富文本编辑器菜单功能区域的功能按钮z-index太大。 解决方案：z-index设置合适的值，并且加上 !important 提高权重。 问题3：第一次鼠标全选删除不触发onchange事件。 解决：通过监听input事件，当没有内容时，主动触发onchange事件 .
CRMEB中WangEditor组件同一页面多个使用时，光标自动后移问题解决
qq_29328065的博客
09-18 484
找到template\admin\src\components\wangEditor\index.vue文件，在props中添加isChange属性。同一页面使用多个WangEditor组件时，编辑过程编辑完后，光标会自动移动到内容末尾。原因是组件中watch同时触发导致光标移动到末尾。在修改其内容时，先把isChange给设置为true即可解决光标下移问题。最后在使用组件时添加isChange属性的传值。然后在watch监听中添加判断条件。
vue使用wangEditor，工具栏可换行
ljc的博客
09-08 2837
vue简单封装wangEditor富文本编辑器1.wangEditor介绍2.wangEditor安装3.封装组件4.父组件中使用 1.wangEditor介绍 —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 2.wangEditor安装 npm install wangeditor 3.封装组件 wangeditor.js <template> <div> <div class="editor" id="editor" ref
【更新】vue使用 wangeditor4 富文本 + 富文本回显带标签+wangEditor4 加字数，光标会跑到最后 问题 （已解决）
Daisy_ls的博客
11-17 9746
背景：业务需求，要实现一个富文本框，好方便用户插入图片问题
wangEditor富文本编辑器，在光标处插入文本不生效问题
qq_40682410的博客
10-13 781
【代码】wangEditor富文本编辑器，在光标处插入文本不生效问题。
vue使用wangEditor富文本光标乱飘
weixin_43898407的博客
12-08 917
编辑时光标总是跳到最后一行
html 富文本编辑器相关--主动选择文字-setSelectionRange-控制光标位置
annuobin1120的博客
04-14 160
http://blog.csdn.net/foralienzhou/article/details/52437929 http://www.alixixi.com/web/a/2015070495006.shtml <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
WangEditor结合vue3
m0_60671885的博客
02-06 1050
富文本编译器
三行代码 解决vue中设置div contenteditable光标移动到最后
初辰的博客
07-28 2093
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框。在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后。
wangeditor富文本框光标处插入文本
最新发布
08-06
4. 插入文本：有了光标位置，就可以调用`insertText()`方法，在指定的位置插入新的文本。 ```javascript editor.insertText(cursorPosition, '您想要插入的文本'); ``` 5. 提交编辑内容：编辑完成后，别忘了提交...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值