javascript - 在 Vue 应用程序中粘贴大内容时，Quill 编辑器会稍微向上滚动

Question

这是我的编辑器.vue

我正在尝试在其 playground 上复制自动增长示例

我尝试添加滚动容器，并设置元素的高度，但问题仍然存在。

<template>
  <div ref="scrollingContainer" class="scrolling-container">
    <div ref="editorNode" class="editor-node" :style="editorStyle" />
  </div>
</template>

<script>
import Quill from "quill";
export default {
  name: "App",
  props: {
    minHeight: {
      type: String,
      default: "450px",
    },
    scrollable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editorInstance: null,
      editorOpts: {
        modules: {
          toolbar: [
            [{ header: [1, 2, 3, false] }],
            ["bold", "italic", "underline"],
          ],
        },
        theme: "snow",
      },
    };
  },
  computed: {
    editorStyle() {
      var style = "min-height: " + this.minHeight + ";";
      if (this.scrollable) {
        style += "overflow-y:auto;";
        style += "max-height: " + this.minHeight + ";";
      }
      return style;
    },
  },
  mounted() {
    this.editorOpts["scrollingContainer"] = this.$refs.scrollingContainer;
    this.editorInstance = new Quill(this.$refs.editorNode, this.editorOpts);
    // Setup handler for whenever things change inside Quill
    this.$emit("instance-created", this.editorInstance);
  },
};
</script>

<style lang="scss">
.editor-node {
  height: auto;
}
.scrolling-container {
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
}
.ql-editor strong {
  font-weight: bold;
}
.ql-editor {
  letter-spacing: 0;
  font-style: normal;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  line-height: 1.8;
}
.ql-editor p {
  letter-spacing: 0;
  font-weight: 300;
  font-style: normal;
  margin-block-start: 0px !important;
  margin-block-end: 0px !important;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  line-height: 1.8;
}
@import "quill/dist/quill.snow.css";
</style>

您还可以找到codesandbox演示here

如果粘贴大量内容，在达到一定高度后，页面会向上滚动一点......导致非常奇怪的体验。

编辑:基于 webkit 的浏览器(例如 chrome)的滚动到顶部问题可以通过将 quill 升级到 2.0.0-dev.4 来解决

Answer 1

如何将剪贴板置于中心并固定其位置以避免其随文本移动:

.ql-clipboard {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0px; // fix the width to 0, so large text cannot overflow the div
}

以下是供您引用的代码和框:

https://codesandbox.io/s/importing-sass-in-vue-forked-cp8jn?file=/src/components/HelloWorld.vue:1559-1620