在@vueup/vue-quill中调用getSelection()报错：无法读取null的getSelection属性

问题原因 #

你直接在<script setup>顶层调用quill.value.getSelection()时，QuillEditor组件还没完成挂载，此时quill.value是null，所以会触发读取null属性的错误。

解决方案 #

1. 等待组件挂载后再访问实例 #

使用Vue的onMounted生命周期钩子，确保组件挂载完成后再调用Quill的API：

<QuillEditor ref="quill" :options="editorOption" v-model:content="payload.body" contentType="html" />

<script lang="ts" setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref, onMounted } from 'vue';

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  id: {
    type: Number
  }
});
const emit = defineEmits(['update:payload', 'loading'])
const currentRoute = useRoute();

const quill = ref(null)

onMounted(() => {
  // 组件挂载完成后，quill.value才会指向Quill实例
  const selection = quill.value?.getSelection();
  if (selection) {
    console.log('光标位置:', selection);
    // 这里可以执行添加文本等操作
  }
});
</script>

2. 监听光标选择变化（实时响应场景） #

如果需要实时获取光标位置或选择内容，建议通过Quill的selection-change事件监听，无需手动调用getSelection()：

<QuillEditor 
  ref="quill" 
  :options="editorOption" 
  v-model:content="payload.body" 
  contentType="html"
  @selection-change="handleSelectionChange"
/>

<script lang="ts" setup>
// ... 其他导入和定义

const handleSelectionChange = (range: any, oldRange: any, source: any) => {
  if (range) {
    console.log('当前光标/选择范围:', range);
    // 在这里处理添加文本等逻辑
  }
}
</script>

注意事项 #

• 始终用可选链操作符?.访问quill.value的属性，避免因实例未就绪引发错误。
• 不要在<script setup>顶层直接访问ref的value，除非能确定它已经完成初始化。

内容的提问来源于stack exchange，提问作者simpledev