Question

我正在使用Chromium中的大型文本编辑器应用程序。可编辑内容存在于一个可信的div中。这个div可以包含div和spans，它们可以应用各种类来创建丰富的内容。我遇到的麻烦是在我的contenteditable div中有大量的text / html，打字非常慢，因为它会导致整个文档重排（我的所有div / spans都在我的contenteditable中的位置：relative）。如果我做这些位置：绝对，打字很好，因为不会发生回流，但每个子div / span重叠。

有没有人有一种方法可以保留位置的非重叠流：相对，但是当我输入一些文本时，即使它没有改变线几何，也不必重新整理整个文档？

- 编辑 -

实施例： https://jsfiddle.net/05xfc6pj/

CSS

.editable {
  position: absolute;
}

.wrapper {
  position: relative;
}

.title {
  font-weight: bold;
  background-color: red;
  width: 100%;
}

.body {
  width: 100%;
  margin-bottom:20px;
}

HTML

<div class="editable" contenteditable="true">
  <div class="wrapper">
    <div class="title">Title</div>
    <div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
  ...
</div>

（注意，如果示例对您来说不是很慢，请将所有内容复制并粘贴到.editable中几次）

我使用backbone.js来渲染这些.wrapper项目;是否可行使.wrapper有位置：绝对然后用JS计算位置（我们知道每个div的高度），并设置一个顶部偏移量？

在大型可疑

0 个答案: