vue3 vue-quill 富文本的返回和撤销 找到的undo不是一个方法 而是一个数组 如何具体找到丙使用undo方法
时间: 2024-01-22 14:21:23 浏览: 159
Vue-Quill-Editor富文本编辑器的使用教程
5星 · 资源好评率100%
vue-quill是基于Quill.js富文本编辑器的Vue组件,Quill.js内置了一个Undo/Redo模块来实现撤销和重做功能,可以通过`quill.getModule('history').undo()`方法来执行撤销操作,`quill.getModule('history').redo()`方法来执行重做操作。
在Vue组件中使用vue-quill,可以通过以下代码获取到Quill实例,然后调用`quill.getModule('history').undo()`方法来执行撤销操作:
```javascript
<template>
<div>
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="{
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: true
}
}
}"
/>
<button @click="undo">撤销</button>
</div>
</template>
<script>
import { QuillEditor } from 'vue-quill-editor'
export default {
components: {
QuillEditor
},
data() {
return {
content: ''
}
},
methods: {
undo() {
const quill = this.$refs.myQuillEditor.quill
quill.getModule('history').undo()
}
}
}
</script>
```
这里的`$refs.myQuillEditor.quill`获取到的就是Quill实例,然后调用`quill.getModule('history').undo()`方法即可执行撤销操作。
阅读全文