Quill：如何防止工具栏滚动并设置高度？

Question

我正在尝试按照 https://quilljs.com/playground/#autogrow-height 中的示例进行操作，但在设置编辑器框的高度和阻止工具栏滚动到屏幕外时遇到问题。

我的代码是：

<div id="editorcontainer" style="height:10em; min-height:100%; overflow-y:auto;">
   <div id="editor" name="editor" style="min-height:100%; height:auto;"></div>
</div>

<script>
  var quill = new Quill("#editor",{
     modules: {
       toolbar: [ ... ]
         },
         scrollingContainer: "#editorcontainer",
         theme: "snow"
     });
</script>

JS Filddle 位于 https://jsfiddle.net/OldGeezer/xpvt214o/556844/

输出如下所示：

有两个问题：

工具栏不是固定的，是滚动的。
垂直滚动条始终有一个可滚动区域，即使编辑器为空时也是如此。

如何解决这两个问题？

Answer 1

The tool bar is not fixed and scrolls.

您可以像下面这样更改工具栏的 CSS：

.ql-toolbar {
    position: fixed;
    top: 0;
}

The vertical scrollbar has a scrollable region all the time, even when the editor is empty.

您可以降低编辑器的 min-height 使其低于容器（例如 80%）。

Answer 2

我的解决方案是添加一个额外的封装 div 和 position:relative 来建立 ql-toolbar 的参考框架，它被设置为 position:absolute.

然后给 editorcontainer 一个 margin-top:3em 来容纳工具栏（当它短到足以填满一行时）。

<div style="position:relative;margin-top:5em;">
  <div id="editorcontainer" style="height:10em; min-height:100%; 
         overflow-y:auto;margin-top:3em">
     <div id="editor" style="min-height:100%; height:auto;"></div>
  </div>
</div>

<style>
  .ql-toolbar { position: absolute; top: 0;left:0;right:0}
</style>

工作 fiddle 在 https://jsfiddle.net/OldGeezer/oLq2bnzv/

Answer 3

您需要修改其中一个 quill 的 class

.ql-container.ql-snow {
  border: none;
  height: 150px;
  overflow: scroll;
}

Answer 4

我不得不修改两个 quill 的类以获得我想要的。像这样

.ql-container.ql-snow {
    height: auto;
}
.ql-editor {
    height: 150px;
    overflow-y: scroll;
}

Answer 5

对于在这个问题中被Angular毛笔困扰的人，

我建议您将此代码添加到 style.css。

.ql-toolbar {
  position: sticky;
}

.ql-container {
  overflow-x:auto;
  height: 300px; /* whatever you what */
}

Quill：如何防止工具栏滚动并设置高度？

Quill: How to prevent toolbar from scrolling and set the height?

javascript

scrollbar

quill