Here is my editor.vue
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.
<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>
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.
Edit: 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: