在最近的项目中,我使用了 Quill 富文本编辑器,但在使用过程中遇到了一个用户体验问题:在编辑器中粘贴内容时,编辑器会自动滚动到顶部。经过深入研究和查阅 Quill 的官方文档,我找到了一个解决方案:可以通过指定滚动容器(scrollingContainer)来避免这种自动滚动行为。
以 VueQuill 为例,实现方法如下:
<template>
<QuillEditor :options="options" />
</template>
<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const options = ref({
modules: {
toolbar: ['link', 'image']
},
theme: 'snow',
placeholder: '请输入...',
scrollingContainer: 'body', // 将滚动容器设置为距离编辑器最近的滚动元素
})
<script>