vue-quill-editor 光标获取不到问题

最新推荐文章于 2025-07-07 14:36:08 发布

火耳~

最新推荐文章于 2025-07-07 14:36:08 发布

阅读量4.4k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37324690/article/details/82870552

本文探讨了在Quill富文本编辑器中通过点击按钮获取光标位置的方法。指出该方法在按钮上使用时有效，但在其他元素上则会触发undefined错误。尽管具体原因未明，本文为理解Quill编辑器的光标操作提供了初步线索。

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

getIndex(){

let quill = this.$refs.myQuillEditor.quill.index;

}

<button @click="getIndex"></button> 获取光标写在button 上面不会报underfine 可以正确执行

写在其它元素上面会报underfine

具体原因我也不知道是因为什么

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

火耳~

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

quill富文本编辑器获取光标所在innerHTML索引

Aays2790的博客

04-09

1111

quill富文本编辑器获取光标所在innerHTML索引

vue-quill-editor编辑器在一个页面使用多个富文本框上传图片时报TypeError: Cannot read property ‘index‘ of null错误的解决方法

yx111115的博客

10-17

3670

vue-quill-editor编辑器在一个页面使用多个富文本框上传图片时，除了第一个富文本框，其它的都会报这个错误，解决起来其实比较简单，但是在网上却没有搜索到相应的方法，特地在这里记录一下，帮助遇到问题的有缘人。问题原因在上传图片成功方法中，代码是这样子的： quillImgSuccess(res, file) { console.log(res); console.log(file); // res为图片服务器返回的数据 // 获取富文本组件实例

2 条评论您还未登录，请先登录后发表或查看评论

解决Quill编辑器粘贴复制代码尾部出现“空行”问题

最新发布

weixin_62770871的博客

07-07

252

解决quill粘贴内容出现空行问题。

vue-quill-editor显示文本、图片、视频，踩过的坑，比如register错，imports的错，还有module_9的错

weixin_46701808的博客

12-07

3387

报错图片：一、先下载依赖 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 Element UI input输入框focus()无法获取焦点

weixin_64663822的博客

05-25

2623

在做后台管理系统的时候需要实现，点击出现input框让后进行修改。原来的我的代码写成这样。 this.$nextTick(() => { this.$refs.Textinp.focus(); }); 后来我发现，无法获取焦点是因为我使用了show来隐藏input框，导致页面有很多id为Textinp的输入框，把v-show改成v-if就可以解决这个问题 ...

【已解决】vue-quill-editor 获取无法获取光标位置

黑夜的风的博客

03-15

6399

this.$refs.myQuillEditor.quill.selection.savedRange.index 获取光标位置答案来自SF

浅谈vue中使用编辑器vue-quill-editor踩过的坑

10-15

在图片压缩和上传成功后，可以获取到一个URL，将此URL插入到`vue-quill-editor`中，而不是Base64字符串。这样可以显著减小内容的大小，提高上传成功率，并减轻服务器压力。另外，`addQuillTitle`可能是一个自定义...

Vue-Quill-Editor富文本编辑器的使用教程

10-17

import { quillEditor } from "vue-quill-editor"; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; // 或者 'quill/dist/quill.bubble.css' 选择你喜欢的主题 ``` 在模板中，使用`quill...

vue-quill-editor 自定义工具栏和自定义图片上传路径操作

11-19

在使用Vue.js开发Web应用时，常常会遇到需要集成富文本编辑器的需求，Vue-quill-editor是一个非常流行的轻量级富文本编辑器组件，它基于Quill库进行封装，提供了丰富的功能和良好的用户体验。然而，在实际项目中，...

解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

12-10

1. 创建一个富文本组件`QuillEditor.vue`，并使用iview的`Upload`组件来处理图片上传。iview的上传组件允许我们设置各种属性，如`on-success`回调函数，用于处理图片上传成功后的操作，`format`和`max-size`限制上传...

富文本编辑器vue-quill-editor的安装以及自定义字体和字号(最为重要的是解决获取不到编辑框中的内容)

元宝的博客

07-06

2466

【代码】富文本编辑器vue-quill-editor的安装以及自定义字体和字号。

Vue的v-focus无法聚焦el-input，及el-input无法输入的问题

weixin_46037781的博客

08-12

1895

文章目录 1、正常聚焦 <input type="text" v-focus/> 2、el-input聚焦失败 <el-input type="text" v-focus ></el-input> 3、el-input 聚焦成功 <el-input type="text" v-focus ></el-input> directives: { focus: { // 指令的定义 inserted: functio

this.$refs 获取不到解决办法

LJJONESEED的博客

07-29

4341

ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

vue使用$refs获取不到值。

热门推荐

weixin_42721553的博客

05-25

1万+

实现效果是点击按钮，显示倒计时，隐藏发送验证码按钮，下方是一个倒计时的控件（用的vant）；当点击验证码按钮时，隐藏验证码按钮，显示倒计时按钮，并且开启倒计时；正常来讲是通的，但是，由于刚开始倒计时按钮，我用的是v-if，所以一直获取不到，再加上$refs不是响应式，还懵逼，后来一想，是v-if的问题。 v-if是直接不渲染（相当于删掉了）这个组件，然后在显示。 v-show只是隐藏起来了。所以啊，将v-if改成v-show即可 ...

vue-quill-editor 获取无法获取光标位置

沉睡的博客

03-14

1410

vue-quill-editor 获取无法获取光标位置网上说富文本编辑器里没有内容输入，获取到的位置是null。使用代码为： this.$refs.myQuillEditor.quill.index; 使用上边的代码，实际使用过程中，输入内容之后，依然获取不到光标位置所以我使用的是下面代码 this.$refs.editer.quill.selection.savedRange....

quill编辑器上传图片获取光标所在位置

weixin_44007039的博客

04-28

1440

写法一：quill.getSelection().index; 写法二：quill.selection.savedRange.index

quill-editor 富文本编辑器使用及焦点巨坑

Swallow的博客

07-07

4074

quill-editor 富文本编辑器使用及焦点巨坑一、npm安装依赖 npm install vue-quill-editor --save 二、全局引用，项目入口文件中main.js引入，如下： import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dis

vue-html5-editor接收数据,使用vue-quill-editor，获得到输入内容的html，怎样才能在外部的div中有跟编辑器里...

weixin_33379297的博客

06-04

823

我已经能使用vue-quill-editor获得到输入文本的html结构了，就像作者DEMO网站中的一样比如获得到： I am Example 2! Whenever you play the game of thrones, you either win or die. There is no middle ground. Some war against sword and spear t...

vue-quill-editor使用中遇到的坑 - 回显数据后鼠标光标会自动锁定到文本框内

weixin_43630802的博客

05-13

2022

vue-quill-editor使用中遇到的坑 - 回显数据后鼠标光标会自动锁定到文本框内发现问题: 回显页面本来就很长每次编辑内容时就会发现,哎嗨! 我的页面为啥会滚动到最下面了呢(组件就在最后面用的).刚开始没发现是光标锁定的原因就尝试了一下 window.scrollTo(0,0)发现并没有什么卵用...之后也是意外看到,我去.鼠标光标怎么在这儿了.好了下面直接放解决方法了... this.$refs.myQuillEditor.quill.enable(false); setTimeout(()

vue-quill-editor 获取光标 vue3

01-15

### 在 Vue3 中使用 `@vueup/vue-quill` 获取光标位置为了在 Vue3 项目中通过 `@vueup/vue-quill` 插件获取 Quill 编辑器中的光标位置，可以利用 Quill 提供的 API 来实现这一需求。具体来说，可以通过访问编辑器...