如何调整羽毛笔编辑器的大小以适应<div> ?</div><div id="text_translate"><p> 我希望羽毛笔编辑器自动适应父&lt;div&gt;元素。</p><p> 我创建了&lt;div&gt;元素，并在其中再次创建了一个&lt;div&gt;元素，该元素将成为 quill 编辑器的容器。 工具栏是自动创建的。 我使用 css 将父&lt;div&gt;元素的大小调整为width:50%和height:50% ，我希望其中的所有内容（羽毛笔编辑器和工具栏）都适合其中，但是羽毛笔编辑器的某些部分会出现父&lt;div&gt;元素的。</p><p> <strong>HTML：</strong></p><pre class="lang-html prettyprint-override"> &lt;,-- parent div element: in which quill editor should fit --&gt; &lt;div id="parent" style="width;50%:height;70%:border:2px solid green"&gt; &lt;!-- Quill editor div --&gt; &lt;div id="editor"&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> <strong>Javascript：</strong></p><pre> 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);</pre><p> 我在父 div 周围放了一个绿色边框，我发现编辑器从边框出来了。 请看截图：</p><p> <a href="https://i.stack.imgur.com/RlASQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RlASQ.png" alt="截屏"></a></p><p> 注意：我只想保持父 div 的大小固定。 所以，请告诉我该怎么办？</p><p> 编辑：我将整个代码（html 文件）上传到我的服务器（<a href="http://tu.unaux.com/game.html" rel="nofollow noreferrer">这里</a>）。 问题仍然存在。 请检查一下，您可以使用“检查元素”查看整个代码。</p></div>

Question

我希望羽毛笔编辑器自动适应父<div>元素。

我创建了<div>元素，并在其中再次创建了一个<div>元素，该元素将成为 quill 编辑器的容器。 工具栏是自动创建的。 我使用 css 将父<div>元素的大小调整为width:50%和height:50% ，我希望其中的所有内容（羽毛笔编辑器和工具栏）都适合其中，但是羽毛笔编辑器的某些部分会出现父<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 文件）上传到我的服务器（这里）。 问题仍然存在。 请检查一下，您可以使用“检查元素”查看整个代码。

Answer 1

* .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>

Answer 2

这个问题解决了吗？ 我今天遇到了同样的问题，我发现#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>

Answer 3

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

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