解决Vue-Quill-Editor自动定位到文本框问题

最新推荐文章于 2022-12-07 16:38:21 发布
最新推荐文章于 2022-12-07 16:38:21 发布
阅读量909 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41687299/article/details/120222515
版权

使用：vue-quill-editor - npmhttps://www.npmjs.com/package/vue-quill-editor

 我这边是又把他封装成了一个公共的组件便于使用，所以用了两个ref

 解决问题：

Vue-Quill-Editor：

 父组件：

 父组件请求完数据后进行如下操作

this.$refs.myquill.$refs.myQuillEditor.quill.enable(false)
setTimeout(() => {
    this.$refs.myquill.$refs.myQuillEditor.quill.enable(true)
}, 0)

喵小花儿和喵小胖儿
关注
vue后台管理系统项目-vue-quill-editor实现富文本编辑器功能
总结前端开发中遇到的问题，分享前端知识
12-24 1771
详细介绍富文本编辑器使用详细过程，详细介绍使用过程中遇到的问题以及自定义上传、自定义配置文字大小等功能
vue-quill-editor富文本编辑器的汉化版 及 使用心得
热门推荐
weixin_44781409的博客
07-03 1万+
现在网上上有很多的富文本编辑器，但我个人还是非常喜欢Vue家族的vue-quill-deitor，虽然说它只支持IE10+ 好 , 废话不多说直接上代码，现在是见证奇迹的时刻, 在vue中使用quill呢，我们需要npm进行安装，安装命令如下： 第一步下载 : npm i vue-quill-editor -D 第二步安装依赖 : npm i quill -D 第三步全局引用 //在mai...
vue-quill-editor富文本编辑器取消自动获取焦点
weixin_42574985的博客
10-20 1735
/解决富文本自动聚焦。这样打开之后就不是富文本的位置了。
vue-quill-editor使用中遇到的坑 - 回显数据后鼠标光标会自动锁定到文本框内
weixin_43630802的博客
05-13 1854
vue-quill-editor使用中遇到的坑 - 回显数据后鼠标光标会自动锁定到文本框内 发现问题: 回显页面本来就很长每次编辑内容时就会发现,哎嗨! 我的页面为啥会滚动到最下面了呢(组件就在最后面用的).刚开始没发现是光标锁定的原因就尝试了一下 window.scrollTo(0,0)发现并没有什么卵用...之后也是意外看到,我去.鼠标光标怎么在这儿了.好了 下面直接放解决方法了... this.$refs.myQuillEditor.quill.enable(false); setTimeout(()
解决VUE 富文本 quill-editor再使用时自动获取光标
Youyzq的博客
09-07 2464
1.再使用富文本编辑器进行修改查看的操作时，富文本编辑器会自动获取光标，当有多个富文本编辑器时页面会直接从底部显示而不是从头部显示。如： 2.当页面打开时光标会自动在“关于我们*”框中显示。 那我们该如何让光标不显示，同时页面从顶部开始呢？ 其实很简单，只需要： //刚开始时，不聚焦 //具体位置可根据情况也可以放在赋值之后 //1秒之后可以点击（聚焦） 要在mounted钩子函数中做处理，因为需要在元素生成完毕以后才会做到的操作 ...
vue-quill-editor自动获取焦点，页面自动滚动到editor的位置
LumingC的博客
04-16 4179
quill-editor自动获取焦点，页面自动滚动到editor的位置的问题解决，在nextTick中取消焦点，并用jq滚动回页面顶部。 this.$nextTick(function() { this.$refs.myQuillEditor.quill.blur(); $('.main_content').scrollTop(0); });...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
01-19
1、安装插件：npm install vue-quill-editor 2、安装插件依赖：npm install quill 3、main.js文件中引入： import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core....
vue-quill-editor 自定义文字字号
且听风吟的博客
10-23 1794
默认的 vue-quill-editor 富文本编辑器的字号选择很少，只有默认的几种。 需求是设置默认字体大小。
vue使用Vue-Quill-Editor富文本编辑器(附加工具栏title、图片大小修改功能)
weixin_42088314的博客
11-18 1878
本来是想用tinymac富文本编辑器的，不过参考网上的教程弄了很久都没有解决图片预览的问题。所以就改用了Vue-Quill-Editor，发现这个使用起来还是很方便的。下面上教程： 1、安装Vue-Quill-Editor npm install vue-quill-editor -s 2、封装Vue-Quill-Editor组件 自行创建一个quEditor.vue文件，写入下面代码： <template> <div> <quill-editor v-model
vue-quill-editor 自定义 a 标签，给标签添加href属性
且听风吟的博客
10-25 6774
vue-quill-editor 富文本编辑器自定义 a 标签属性
vue项目使用vue-quill-editor，光标位置控制（已解决）
jsPao的博客
11-14 5367
给editor设置默认值，光标位置在句首，无法显示在句尾，查了网上很多资料使用，都没有解决，故记录在此。
【已解决】vue-quill-editor 获取无法获取光标位置
黑夜的风的博客
03-15 6292
this.$refs.myQuillEditor.quill.selection.savedRange.index 获取光标位置 答案来自SF
vue-quill-editor 获取无法获取光标位置
沉睡的博客
03-14 1275
vue-quill-editor 获取无法获取光标位置 网上说富文本编辑器里没有内容输入，获取到的位置是null。 使用代码为： this.$refs.myQuillEditor.quill.index; 使用上边的代码，实际使用过程中，输入内容之后，依然获取不到光标位置 所以我使用的是下面代码 this.$refs.editer.quill.selection.savedRange....
vue富文本编辑器--vue-quill-editor
huanhuan03的博客
07-15 5235
vue富文本编辑器 vue-quill-editor quill 富文本编辑器
解决quill-editor再使用时自动获取光标
gradonisis的博客
09-23 2707
解决富文本编辑器再使用时自动获取光标 1.再使用富文本编辑器进行修改查看的操作时，富文本编辑器会自动获取光标，当有多个富文本编辑器时页面会直接从底部显示而不是从头部显示。如： 2.当页面打开时光标会自动在“关于我们*”框中显示。 那我们该如何让光标不显示，同时页面从顶部开始呢？ 其实很简单，只需要： //刚开始时，不聚焦 //具体位置可根据情况也可以放在赋值之后 //1秒之后可以点击（聚焦） 这样我们的问题就解决了。 ...
vue-quill-editor 在光标位置插入文本
luocheng101的博客
09-06 3326
背景 在使用富文本的时候，有的需求需要点击按钮插入相应的文本内容以及突出样式， 解决方法 在无样式的情况 （insertText也可以设置样式（如字体颜色），但是用户输入新内容也会存在颜色） // 文本内容 const text = 'hello' // 获取编辑器对象 let quill = this.$refs.myQuillEditor.quill; // 获取编辑器光标位置 let index = quill.selection.savedRange.index; // 插.
vue-quill-editor 富文本框编辑器
asing1elife's blog
09-23 2677
基于quilljs实现的支持vue的富文本框编辑器 更多精彩 更多技术博客，请移步 asing1elife’s blog 官网 vue-quill-editor Toolbar Module - Quill vue-quill-image-upload 图片支持上传服务器并调整大小 在 package.json 中加入 "quill-image-extend-module": "^1...
vue-quill-editor显示文本、图片、视频，踩过的坑，比如register错，imports的错，还有module_9的错
最新发布
weixin_46701808的博客
12-07 3258
报错图片： 一、先下载依赖 1、npm install vue-quill-editor --save 2、npm install quill --save 3、npm install quill-image-drop-module --save （图片可拖动） 4、npm install quill-image-resize-module --save （图片可缩放） package.json中下载依赖的版本号 二、插件需要webpack的支持 在vue.config.js 中需要添加的代码 const
vue-quill-editor 光标获取不到问题
qq_37324690的博客
09-27 4327
getIndex(){ let quill = this.$refs.myQuillEditor.quill.index; }   &lt;button @click="getIndex"&gt;&lt;/button&gt;    获取光标  写在button  上面  不会报underfine   可以正确执行 写在其它元素上面  会报underfine      具体原因我也不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值