使 QuillJS 编辑器高度 100%

Question

在下面的应用程序中，我希望 Quill 编辑器填充页眉和页脚中的现有空间。我尝试将其设为 100%，但这会为整个页面添加一个滚动条。如何让 Quill 同时填充空间以适应屏幕尺寸。（如果高度降低编辑器高度应该降低）

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

html,body {
  margin: 0;
  height: 100%;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#header {
  height: 40px;
  background: red;
}

#footer {
  height: 40px;
  background: red;
}

#editor-container {
  height: 100%;
}

#editor {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
<div id="container">
  <div id="header">Header</div>
  <div id="editor-container">
    <div id="editor">Sample</div>
  </div>
  <div id="footer">Footer</div>
</div>

Answer 1

问题height: 100%来自ql-container导致溢出的类。您可以尝试以下方法：

1. 添加flex: 1并#editor-container使其成为列弹性盒。

2. 添加flex: 1和width: 100%到#editor大内容添加overflow-y: auto

请参阅下面的演示：

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

html,body {
  margin: 0;
  height: 100%;
}

* {
  box-sizing: border-box;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#header {
  height: 40px;
  background: red;
}

#footer {
  height: 40px;
  background: red;
}

#editor-container {
  height: 100%;
  /* added these styles */
  flex: 1;
  display: flex; 
  flex-direction: column;
}

#editor {
  height: 100%;
  /* added these styles */
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
<div id="container">
  <div id="header">Header</div>
  <div id="editor-container">
     <div id="editor">Sample</div>
  </div>
  <div id="footer">Footer</div>
</div>

Answer 2

问题是 height: 100% 来自 ql-container 类，这会导致溢出。人们在反应羽毛笔中面临同样的问题

只需将以下 css 添加到您的代码中，它将覆盖鹅毛笔样式

    .ql-container {
  min-height: 10rem;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ql-editor {
  height: 100%;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}