suzhouyingjiPC/src/views/test.vue

<template>
  <div>
    <div id="editor-wrapper">
      <div id="toolbar-container">
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button class="ql-link"></button>
      </div>
      <div id="scrolling-container">
        <div id="quill-container">
          <h2>Description</h2>
          <p>
            This example shows how setting the scrollingContainer to html, it no
            longer jumps UP when saving a link, but it will jump DOWN on many
            different interactions, such as scrolling below the header and
            pressing enter multiple times.
          </p>
          <p>
            <br />
          </p>
          <h2>Instructions</h2>
          <p><br /></p>
          <ul>
            <li>Scroll down to the "Scroll down below this header" header</li>
            <li>Press enter multiple times</li>
            <li>
              The scrollbar will jump down further and further with each press
            </li>
          </ul>
          <p><br /></p>
          <h2>Keep scrolling down</h2>
          <p><br /></p>
          <p>
            There had been the first ride at terrible speed without a halt, and
            then in the dawn he had seen a pale gleam of gold, and they had come
            to the silent town and the great empty house on the hill. And hardly
            had they reached its shelter when the winged shadow had passed over
            once again, and men wilted with fear. But Gandalf had spoken soft
            words to him, and he had slept in a corner, tired but uneasy, dimly
            aware of comings and goings and of men talking and Gandalf giving
            orders. And then again riding, riding in the night. This was the
            second, no, the third night since he had looked in the Stone. And
            with that hideous memory he woke fully, and shivered, and the noise
            of the wind became filled with menacing voices.
          </p>
          <p><br /></p>
          <p>
            A light kindled in the sky, a blaze of yellow fire behind dark
            barriers Pippin cowered back, afraid for a moment, wondering into
            what dreadful country Gandalf was bearing him. He rubbed his eyes,
            and then he saw that it was the moon rising above the eastern
            shadows, now almost at the full. So the night was not yet old and
            for hours the dark journey would go on. He stirred and spoke.
          </p>
          <h2>Scroll down below this header</h2>
          <p>"Where are we, Gandalf?" he asked.</p>
          <p><br /></p>
          <p>
            "In the realm of Gondor," the wizard answered. "The land of Anórien
            is still passing by."
          </p>
          <p><br /></p>
          <p>
            There was a silence again for a while. Then, "What is that?" cried
            Pippin suddenly, clutching at Gandalf"s cloak. "Look! Fire, red
            fire! Are there dragons in this land? Look, there is another!"
          </p>
          <p><br /></p>
          <p>
            For answer Gandalf cried aloud to his horse. "On, Shadowfax! We must
            hasten. Time is short. See! The beacons of Gondor are alight,
            calling for aid. War is kindled. See, there is the fire on Amon Dîn,
            and flame on Eilenach; and there they go speeding west: Nardol,
            Erelas, Min-Rimmon, Calenhad, and the Halifirien on the borders of
            Rohan."
          </p>
          <p><br /></p>
          <p>
            But Shadowfax paused in his stride, slowing to a walk, and then he
            lifted up his head and neighed. And out of the darkness the
            answering neigh of other horses came; and presently the thudding of
            hoofs was heard, and three riders swept up and passed like flying
            ghosts in the moon and vanished into the West. Then Shadowfax
            gathered himself together and sprang away, and the night flowed over
            him like a roaring wind.
          </p>
          <p><br /></p>
          <p>
            Pippin became drowsy again and paid little attention to Gandalf
            telling him of the customs of Gondor, and how the Lord of the City
            had beacons built on the tops of outlying hills along both borders
            of the great range, and maintained posts at these points where fresh
            horses were always in readiness to bear his errand-riders to Rohan
            in the North, or to Belfalas in the South. "It is long since the
            beacons of the North were lit," he said; "and in the ancient days of
            Gondor they were not needed, for they had the Seven Stones." Pippin
            stirred uneasily.
          </p>
          <p><br /></p>
          <p>
            "Sleep again, and do not be afraid!" said Gandalf. "For you are not
            going like Frodo to Mordor, but to Minas Tirith, and there you will
            be as safe as you can be anywhere in these days. If Gondor falls, or
            the Ring is taken, then the Shire will be no refuge."
          </p>
          <p><br /></p>
          <p>
            "You do not comfort me," said Pippin, but nonetheless sleep crept
            over him. The last thing that he remembered before he fell into deep
            dream was a glimpse of high white peaks, glimmering like floating
            isles above the clouds as they caught the light of the westering
            moon. He wondered where Frodo was, and if he was already in Mordor,
            or if he was dead; and he did not know that Frodo from far away
            looked on that same moon as it set beyond Gondor ere the coming of
            the day.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Quill from "quill";
// import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  data() {
    return {};
  },
  mounted() {
    var quill = new Quill("#quill-container", {
      modules: {
        toolbar: "#toolbar-container",
      },
      scrollingContainer: "html",
      placeholder: "Compose an epic...",
      theme: "snow",
    });
  },
};
</script>

<style lang="scss" scoped></style>