Question

我试图创建一个非常简单的页面，本质上与堆栈溢出的布局没有什么不同，因为有一个侧边栏和一个可以滚动的“内容”区域。但是，我的内容区域完全由quilljs文本编辑器占用。

我只是创建一个div并告诉quilljs使用该div作为编辑器...

    <article>
         <div id="editor"></div>
    </article>

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

从理论上讲，这很好，但是quilljs在编辑器div上方注入了一个额外的div，所以我得出以下结论：

     <article>
         <div id="ql-toolbar"></div>
         <div id="editor"></div>
    </article>

如果我手动检查和删除工具栏div，则可以看到编辑器div的大小符合要求（它填充了整个article元素，所有溢出的文本都有一个滚动条）。

我的结论是，注入额外的div工具栏是问题的根本原因，但是我似乎找不到很好的解决方案...

我目前看到的唯一解决方案是手动调整“编辑器” div的大小，以补偿我知道将添加的额外div。

 #editor {
  max-height: calc(100% - 40px);
 }

但是，随着可变大小工具栏以及手动调整窗口宽度的出现，该解决方案很快就瓦解了。如果有的话，我想找到一个更强大的解决方案。

这是该问题的代码笔（请注意，如何将scollbar的底部切除）： https://codepen.io/anon/pen/wQyxVm

Answer 1

您可以这样设置article和#editor的样式：

var quill = new Quill('#editor', {
  theme: 'snow'
});

html,
body {
  height: 100%;
  line-height: 1.5;
  margin: 0px;
}

.wrap {
  height: 100vh;
  display: flex;
}

main {
  flex: 1;
  display: flex;
}

aside {
  overflow-y: auto;
  min-width: 200px;
  max-width: 200px;
  flex: 1;
  background: #f7f7f7;
}

article {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  flex: 2;
  background: #f0eeee;
  height: 100vh;
}

#editor {
  height: auto;
  overflow: auto;
}

h1 {
  margin-top: 0;
}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />

<div class="wrap">
  <main>
    <aside>
      <div class="tab">
        <ul id="tablist">
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
        </ul>
      </div>

    </aside>

    <article>
      <div id="editor">
        <p>
          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a
          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a
        </p>
      </div>
    </article>
  </main>
</div>

通过JS（quilljs）注入的HTML元素与flexbox冲突

1 个答案: