如何调整Quill编辑器大小以适应<div>元素？

Question

我希望 Quill 编辑器能够自动适应父级 <div> 元素。

我创建了一个 <div> 元素，并在其中再次创建了一个 <div> 元素，作为 Quill 编辑器的容器。工具栏会自动生成。我使用 CSS 调整了父级 <div> 元素的大小为 width:50% 和 height:50%，希望所有内容（Quill 编辑器和工具栏）都能适应其中，但是 Quill 编辑器的某些部分超出了父级 <div> 元素。 HTML：

<!-- parent div element, in which quill editor should fit -->
<div id="parent" style="width:50%;height:70%;border:2px solid green">

<!-- Quill editor div -->
        <div id="editor">
        </div>

    </div>

Javascript：

var tool = [[{ 'header': '1' }, { 'header': '2' }], [{ size: ['small', false, 'large', 'huge'] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }, { 'font': [] }, { 'align': [] }], ['image',]];
var option = {
        placeholder: 'Compose an epic...',
        theme: 'snow',
        modules: {
            toolbar: tool
        },
        bounds:'#parent'
    };
var quill = new Quill('#editor', option);

我在父级div周围加了绿色边框，发现编辑器超出了边框范围。请参见截图：

注意：我只想保持父div的大小不变。那么，请告诉我该怎么做？ 编辑：我已经将整个代码（html文件）上传到我的服务器（HERE）。问题仍然存在。请检查一下，您可以使用“检查元素”查看整个代码。

- aryaman

---

你的屏幕截图没有正确添加。 - Bhanu

我已经复现了你的问题，但它正常工作。请检查你的其他CSS，可能会导致这个问题。 - Najam Us Saqib

问题似乎是针对您的设置特定的。如果您能提供一个演示，那就太好了。 - Canica

@jcruz 我在fiddle中使用了几乎相同的代码，但是没有任何问题（我不知道为什么），我只是将整个代码(html文件)上传到了我的服务器http://tu.unaux.com/game.html，问题仍然存在。请查看一下，您可以使用“检查元素”查看代码。 - aryaman

将 height: auto; 应用于 .ql-container 和 .ql-editor 可以解决这个问题。 - Canica

问题似乎是由工具栏引起的。大小定义了文本容器的尺寸，但容器本身被工具栏向下推。因此，您应该设置父div和编辑器div的高度，使第一个足够大以容纳工具栏。 - Marco

Answer 1

这个问题解决了吗？我今天遇到了同样的问题，后来发现 #editor 默认设置高度属性为100％，所以我将 #editor 包装在一个容器 div 中，并使用像素单位为该 div 设置了一个高度。

如果有人遇到同样的问题，你们应该尝试我的解决方案，希望能帮到你们：

HTML

<div class="editor-container">
    <div id="editor">
        <p>Content</p>
      </div>
</div>

CSS

.editor-container {
    height: 300px; // Replace 300px = any number you want
}

JS

<script>
var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});
</script>

- Chan Dinh

Answer 2

问题在于Quill工具栏没有从总组件高度中减去。请尝试以下操作：

.ql-container {
  height: calc(100% - 42px); 
}

- Arajay

---

太棒了！这是准确的。 - Gaurav Saluja

太棒了！这是准确的。 - undefined

在外部CSS中可能需要添加!important - Gaurav Saluja

Answer 3

*.css:

.editor-layout {
  width: 80%;
  height: 100px;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  margin-left: 20px;
  padding-bottom: 40px; //fix bug here
}

*.html:

<div class="editor-layout">
  <div id="editor">
    <p>Hello World!</p>
  </div>
</div>

- HungNM2