javascript - 通过 JS (quilljs) 注入(inject)的 HTML 元素与 flexbox 冲突

标签 javascript html css quill

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

我只是创建一个 div 并告诉 quilljs 将该 div 用于编辑器......

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

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

理论上效果很好,但是 quilljs 在编辑器 div 上方注入(inject)了一个额外的 div,所以我最终得到:
     <article>
         <div id="ql-toolbar"></div>
         <div id="editor"></div>
    </article>

如果我手动检查并删除工具栏 div,我可以看到编辑器 div 的大小符合需要(它填充了整个文章元素,并且任何溢出的文本都有一个滚动条)。

我的结论是注入(inject)额外的 div 工具栏是问题的根本原因,但是我似乎找不到一个好的解决方案......

我目前看到的唯一解决方案是手动调整“编辑器”div 的大小,以补偿我知道将添加的额外 div。
 #editor {
  max-height: calc(100% - 40px);
 }

然而,这个解决方案在可变大小工具栏的前景以及手动调整窗口宽度时很快就崩溃了。如果存在,我想找到一个更强大的解决方案。

这是问题的代码笔(注意 scollbar 的底部是如何被切断的):
https://codepen.io/anon/pen/wQyxVm

最佳答案

您可以为 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>

关于javascript - 通过 JS (quilljs) 注入(inject)的 HTML 元素与 flexbox 冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53424035/

相关文章:

javascript - 隐藏/更改/添加图像

html - 消除 2 个 div 之间的间隙

html - Web Components - 扩展原生元素的样式

css - 带CSS的 spaceship 菜单

javascript - 使用Keras.js在网站中实现Keras模型

javascript - 在React,JavaScript中捕获504(网关超时)错误

html - 具有左右内容框css

javascript - 到达页面底部时,粘性导航栏会闪烁

html - 如何在 HTML 中编写贷款(支付)估算器?

javascript - Extjs 网格跨度和行跨度