vue-quill-editor获取内容

vue-quill-editor可以通过以下方式获取内容：

1. 使用v-model绑定数据，获取编辑器中的内容：

<template>
  <div>
    <quill-editor v-model="content"></quill-editor>
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    getContent() {
      console.log(this.content)
    }
  }
}
</script>

2. 使用ref获取编辑器实例，通过实例的getText()方法获取内容：

<template>
  <div>
    <quill-editor ref="editor"></quill-editor>
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    getContent() {
      console.log(this.$refs.editor.quill.getText())
    }
  }
}
</script>

相关问题

vue-quill-editor获取内容后清空

在Vue项目中使用vue-quill-editor获取内容后清空，可以按照以下步骤进行操作：

1. 首先，确保已经安装了vue-quill-editor插件，并在项目中引入和注册了该插件。

2. 在Vue组件中，使用`v-model`指令绑定一个数据属性来接收编辑器的内容，例如：

<template>
  <div>
    <quill-editor v-model="editorContent"></quill-editor>
    <button @click="clearEditor">清空</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editorContent: '', // 绑定编辑器内容的数据属性
    };
  },
  methods: {
    clearEditor() {
      this.editorContent = ''; // 清空编辑器内容
    },
  },
};
</script>

3. 在上述代码中，我们使用了一个按钮来触发清空操作，点击按钮时调用`clearEditor`方法，将`editorContent`属性置为空字符串即可清空编辑器的内容。

这样，当点击清空按钮时，`editorContent`属性会被清空，从而实现了vue-quill-editor获取内容后清空的功能。

vue-quill-editor 获取光标 vue3

### 在 Vue3 中使用 `@vueup/vue-quill` 获取光标位置

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

import { ref, onMounted } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components: {
    QuillEditor,
  },
  setup() {
    const editorRef = ref(null);
    
    function getCursorPosition() {
      if (editorRef.value && editorRef.value.getQuill) {
        let quillInstance = editorRef.value.getQuill();
        let cursorPosition = quillInstance.getSelection(); // 获取光标位置对象
        console.log('Current Cursor Position:', cursorPosition.index); // 输出光标的位置索引
      }
    }

    return {
      editorRef,
      getCursorPosition,
    };
  },
};

上述代码展示了如何定义一个方法 `getCursorPosition()` 来获取光标的具体位置，并打印到控制台。当调用此函数时，会先检查是否有有效的 Quill 实例存在，再尝试读取选区信息（即光标所在处）。注意这里使用的属性名是 `.index` 而不是其他名称，因为这是 Quill 返回的选择范围数据结构的一部分[^1]。

另外，在模板部分需要确保给 `<QuillEditor>` 组件指定了 `ref="editorRef"` 属性以便能够在脚本里引用它：

<template>
  <div>
    <button @click="getCursorPosition">Get Cursor Position</button>
    <QuillEditor ref="editorRef" />
  </div>
</template>

这样就可以点击按钮触发获取光标位置的操作了。