1

如何强制羽毛笔编辑器不超过其初始高度？

我有一个带有一些项目的网格布局，基本上都是外部组件，其高度我不知道（从某种意义上说：我不想硬编码任何高度，因为我可能会更改内容或内容自己的实现变化）。

在下面的示例中，我有一个 2x2 网格

Content1 Editor
Content2 Editor

其中编辑器在第二列中跨越两行。（这里，Editor实际上是一个围绕实际编辑器标签占据 quill 的包装器组件。）

我现在的目标是总网格/行高度由其他内容确定，并且编辑器使用与内容相同的高度。编辑器应该填充它的单元格，但一旦在编辑器中输入更多文本，就不会超过它。相反，编辑器内容应该滚动（并且工具栏保持在原位）。

首先是片段：

var quill = new Quill('#editor', {
  modules: {
    toolbar: [[{ header: [1, 2, false] }], ['bold', 'italic', 'underline']]
  },
  theme: 'snow'
});
html,body {
  margin: 0;
}

#grid-container {
  display: grid;
  column-gap: 16px;
  grid: "O1 E" auto
        "O2 E" auto
      / auto auto;
  border: 1px solid; border-color: green;
}

#other1 {
  grid-area: O1;

  /* internal to the content: */
  height: 70px;
  background-color: grey;
}

#other2 {
  grid-area: O2;

  /* internal to the content: */
  height: 70px;
  background-color: blue;
}

#editor-cell {
  grid-area: E;
  align-self: stretch;
}

#editor-wrapper {
  display: flex;
  height: 100%;
  /*flex-direction: column;*/
}

#editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.js"></script>
<div id="grid-container">
  <div id="other1">Other</div>
  <div id="other2">Content</div>
  <div id="editor-cell">
    <div id="editor-wrapper">
      <div id="editor-container">
        <div id="editor"><p>Sample</p><p>Line 2</p><p>Line 3</p><p>Line 4</p></div>
      </div>
    </div>
  </div>
</div>

您可以尝试并在编辑器中添加额外的一行（例如在“第 4 行”之后）。请注意第一列中的其他单元格是如何增长的，现在第一列中的内容之间存在不需要的额外间隙。

由于我使用的组件不同，我有几个级别的divs。首先是#editor-container，它包含实际的 quill 编辑器和插入上面的工具#editor栏#editor-container。然后是#editor-wrapper，它包裹了整个容器。最后，我们有了实际的网格单元#editor-cell。

如您所见，我使用的是 flex-layout。这至少使 quill 使用所有可用的高度 - 但它不限制其最大高度。

quill 的实际配置也可以是动态的，即在某些情况下，如果工具栏上有很多按钮，它可能有两排高。

附加信息：我的实际应用程序是一个 Angular 应用程序，使用ngx-quill. 我想坚持视图封装并避免任何全局样式或::ng-deep，即不更改 quill 提供的内部样式/主题。

哦，当然非常感谢仅使用 CSS 的解决方案。:D

但是任何类型的解决方法也将受到欢迎。

解决方案尝试#1

我现在有了第一个解决方法，方法是修复网格行的高度并min-height: 0在#editor. 我认为#editor这是一个实现细节，所以我宁愿不应用任何 CSS，但我可以接受。

但我绝对不想修复网格行的高度（"O1 E" 70px）。我仍在努力寻找解决方案。

var quill = new Quill('#editor', {
  modules: {
    toolbar: [[{ header: [1, 2, false] }], ['bold', 'italic', 'underline']]
  },
  theme: 'snow'
});
html,body {
  margin: 0;
}

#grid-container {
  display: grid;
  column-gap: 16px;
  grid: "O1 E" 70px
        "O2 E" 70px
      / auto auto;
  border: 1px solid; border-color: green;
}

#other1 {
  grid-area: O1;

  /* internal to the content: */
  height: 70px;
  background-color: grey;
}

#other2 {
  grid-area: O2;

  /* internal to the content: */
  height: 70px;
  background-color: blue;
}

#editor-cell {
  grid-area: E;
  align-self: stretch;
}

#editor-wrapper {
  display: flex;
  height: 100%;
  /*flex-direction: column;*/
}

#editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#editor {
  min-height: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.js"></script>
<div id="grid-container">
  <div id="other1">Other</div>
  <div id="other2">Content</div>
  <div id="editor-cell">
    <div id="editor-wrapper">
      <div id="editor-container">
        <div id="editor"><p>Sample</p><p>Line 2</p><p>Line 3</p><p>Line 4</p></div>
      </div>
    </div>
  </div>
</div>

4

0 回答 0