Vue获取Quill的焦点

最新推荐文章于 2025-05-07 16:19:25 发布

浊清。。。

最新推荐文章于 2025-05-07 16:19:25 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_28353055/article/details/86222303

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍在Vue框架下如何处理富文本编辑器的焦点问题，通过使用$refs和querySelector方法，实现点击回复按钮时使富文本编辑器获得焦点。

1.html代码片段

<div class="quill-editor" 
    ref='textfocus' 
    @focus="parentidfocus" 
    style="width:100%;height:330px;" 
    v-model="content" 
    v-quill:myQuillEditor="editorOption"
></div>


<button class="btnrepey fr" @click="backrepley">回复</button>
// 点击回复时获取到富文本框的焦点

2.methods

parentidfocus() {
  this.textfocusrow = false
  this.parentid = 0
},


backrepley(){
  this.$nextTick(function(){
    console.log(this.$refs.textfocus) // 输出如图
    console.log(this.$refs.textfocus.querySelector('.ql-blank'))
    setTimeout(() => {
      // this.$refs.textfocus.focus()  
      /*
        * 刚开始直接调用，发现无法调用，实际是focus外头还包一层，所以以后可以审查一下元素
      */
      this.$refs.textfocus.querySelector('.ql-blank').focus()
      this.$refs.textfocus.click()
    }, 0);
  })
},

3.输出的内容，可以看的出来两个console.log()出来嵌套的层级关系