Quill 富文本编辑器在粘贴的时候会滚动到顶部

194 阅读1分钟

在最近的项目中,我使用了 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>