javascript - 如何调整羽毛笔编辑器的大小以适应 <div>？

Question

我希望 quill editor 自动适应父级 <div>元素。

我创建了 <div>元素，在里面我又创建了一个 <div>将成为羽毛笔编辑器容器的元素。工具栏是自动创建的。我调整了 parent 的大小 <div>元素使用 css 到 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 的大小固定。 那么，请告诉我应该怎么做？

编辑:我在我的服务器(HERE)上上传了整个代码(html 文件)。问题仍然存在。请检查一下，您可以使用“检查元素”查看整个代码。

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>