首页vue 中的QuillEditor如何绑定selection-change 事件

vue 中的QuillEditor如何绑定selection-change 事件

时间: 2024-10-24 16:07:27 浏览: 131

在Vue中使用Quill Editor时，要绑定`selection-change`事件，首先需要在组件内创建一个Quill实例，然后添加事件监听器。以下是一个简单的步骤示例： 1. 引入所需的Quill库： ```javascript import Vue from 'vue'; import Quill from 'quill'; // 使用CDN或者其他方式引入 ``` 2. 在Vue组件的`mounted()`生命周期钩子函数中初始化Quill： ```javascript export default { data() { return { editorOptions: { modules: { toolbar: [ [{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline', 'strike'], // 格式选项 ['blockquote', 'code-block'], // 块级元素 [{ 'list': 'ordered'}, { 'list': 'bullet'}], // 列表 [{ 'indent': '-1'}, { 'indent': '+1' }], // 段落缩进 ['undo', 'redo'] // 撤销/重做 ], }, theme: 'snow', // 选择主题样式 }, }; }, mounted() { this.createQuillEditor(); }, methods: { createQuillEditor() { const quillInstance = new Quill('#my-quill-editor', this.editorOptions); // 需要一个id连接到HTML元素 quillInstance.on('selection-change', (event, range, oldRange, source) => { // 这里会触发当选区发生变化时，你可以获取新的选区范围和内容 console.log('Selection changed:', range, oldRange, source); }); }, }, }; ``` 在上述代码中，我们在`mounted`钩子里创建了Quill实例，并绑定了`selection-change`事件。每当用户在编辑器中更改选区，控制台将会打印出相关信息。

阅读全文