javascript - 在 Vue 应用程序中粘贴大型内容时,Quill Editor 会略微向上滚动
问题描述
这是我的编辑器.vue
我正在尝试在他们的操场上复制自动增长示例
我尝试添加一个滚动容器,并为元素设置高度,但问题仍然存在。
<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>
您还可以在此处找到代码沙盒演示
如果您粘贴很多内容,在一定高度之后,页面会向上滚动一点......导致非常奇怪的体验。
编辑:可以通过将 quill 升级到 2.0.0-dev.4 来修复基于 webkit 的浏览器,例如 chrome 的滚动到顶部问题
解决方案
如何使剪贴板居中并固定其位置以避免它与文本一起移动:
.ql-clipboard {
position: fixed;
left: 50%;
top: 50%;
width: 0px; // fix the width to 0, so large text cannot overflow the div
}
这是供您参考的代码框:
推荐阅读
- javascript - 3个具有不同宽度和高度的可拖动对象。单击按钮后在页面上水平和垂直对齐它们
- vba - fiddler 调试问题有关 vba 使用 winhttp 的问题
- google-cloud-dataprep - UNIXTIMEFORMAT 公式问题
- visual-studio - 如何查看 Visual Studio 解决方案中需要包含在项目中的所有“缺失”文件?
- node.js - 我可以在节点 js 中使用 paypal api 列出我过去的交易吗
- python - Python:每 30 秒列出一次文件并避免处理重复项
- tensorflow - Tensorflow 1.15 无法使用 Cuda10.1 检测 gpu
- netsuite - 如何获取特定列表/记录字段的源列表类型?
- html - 选择角度未正确显示值
- sql-server - 如何格式化/清理源数据以导入 SQL Server SSN 和电话号码