在 Vue 应用程序中粘贴大内容时，Quill Editor 会略微向上滚动 [英] Quill Editor scrolls up slightly when pasting large content in a Vue app
问题描述
这是我的 editor.vue
Here is my editor.vue
我正在尝试在他们的 playground
我尝试添加一个滚动容器，并为元素设置高度，但问题仍然存在.
I am trying to replicate the auto-grow example on their playground
I tried to add a scrolling container, and set heights for elements but the issue still persists.<脚本>从quill"导入羽毛笔；导出默认{名称:应用程序"，道具: {最小高度:{类型:字符串，默认值:450px"，},可滚动:{类型:布尔型，默认值:假，},},数据() {返回 {编辑器实例:空，编辑器选项:{模块:{工具栏:[[{ 标题: [1, 2, 3, 假] }],[粗体"、斜体"、下划线"]、],},主题:雪"，},};},计算:{编辑器样式(){var style = "min-height: "+ this.minHeight + ";";如果(this.scrollable){style += "overflow-y:auto;";样式 += 最大高度:"+ this.minHeight + ";";}返回样式；},},安装(){this.editorOpts[scrollingContainer"] = this.$refs.scrollingContainer;this.editorInstance = new Quill(this.$refs.editorNode, this.editorOpts);//每当 Quill 内部发生变化时设置处理程序this.$emit("instance-created", this.editorInstance);},};<style lang="scss">.editor-node {高度:自动；}.scrolling-container {高度:100%；最小高度:100%；溢出-y:自动；}.ql-editor 强{字体粗细:粗体；}.ql 编辑器 {字母间距:0；字体样式:正常；颜色:RGBA(0, 0, 0, 0.84);字体大小:16px；行高:1.8；}.ql 编辑器 p {字母间距:0；字体粗细:300；字体样式:正常；margin-block-start: 0px !important;margin-block-end: 0px !important;颜色:RGBA(0, 0, 0, 0.84);字体大小:16px；行高:1.8；}@import "quill/dist/quill.snow.css";</风格>
<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>
你也可以找到codeandbox demo 这里
You can also find a codesandbox demo here
如果你粘贴了很多内容，在一定高度之后，页面会向上滚动一点......导致非常奇怪的体验.
If you paste alot of content, after a certain height, the page would scroll up a bit... resulting in a very weird experience.
可以通过将 quill 升级到 2.0.0-dev.4 来修复基于 webkit 的浏览器，例如 chrome 的滚动到顶部问题
The webkit based browsers like chrome's scroll to top issue can be fixed by upgrading quill to 2.0.0-dev.4
推荐答案
如何将剪贴板置于中心并固定其位置以避免它随文本移动:
How about making clipboard in center and fix its position to avoid it to move with the text:
.ql-clipboard {
position: fixed;
left: 50%;
top: 50%;
width: 0px; // fix the width to 0, so large text cannot overflow the div
}
这是供您参考的代码和框:
Here is the codesandbox for your reference:
这篇关于在 Vue 应用程序中粘贴大内容时，Quill Editor 会略微向上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
