4

我正在尝试构建一个类似于 Google Docs 的文字处理器网络应用程序。我已经开始使用Mercury 编辑器（它依赖于 contentEditable 属性），并且我创建了一个看起来像纸页的可编辑 div 元素（就像 Google Docs 一样）。

现在最大的问题是如何处理多个页面，即如何检测文本（或其他内容）何时溢出页面高度，然后创建一个内容拆分的新页面。有几种情况可能会发生这种情况：

  • 用户在页面末尾键入换行符。应该创建一个新页面。
  • 用户正在输入一个单词，他到达了页面的末尾。应创建一个新页面，并将该单词移至新页面。
  • 用户粘贴了一些大文本，但它不完全适合当前页面。应创建一个新页面，仅将不适合的文本移至新页面。
  • 用户插入不适合当前页面的任何其他元素（例如图像）。应该使用该元素创建一个新页面。

我试图深入研究 Google Docs JS 代码，但由于它是压缩的，所以几乎不可能遵循。Google Docs有一个独立版本，代码经过美化，但是它很旧并且不能处理多个页面。

任何有关如何完成此操作的提示将不胜感激。

4

2 回答 2

0

基本上你想要两个 div，像这样

<div id='pageWrapper'>
    <div id='page' style='max-height: 600px; overflow: hidden;'>
    </div>
</div>

#pageWrapper 所做的只是坐在那里看起来像一个页面，有人添加的所有内容都添加到#page。每次有人添加内容时，无论是通过粘贴还是键入检查#page 的scrollHeight 与它的offsetHeight。如果 scrollHeight 较大，则您已经溢出页面，您可以开始将内容（逐字或逐元素）移动到下一页，直到 scrollHeight 再次等于 offsetHeight。

如果用户插入分页符，只需将#page 的高度设置为分页符所在的位置，这样之后的任何内容都会溢出页面。这对于大型文档会变得很棘手，因为如果有人溢出第 1 页，则必须调整内容直到页面，但我想这就是 Google Docs 没有页面的原因。

于 2012-02-28T21:54:58.500 回答
0

如果您的容器具有固定大小，您可以使用溢出事件来检测它。

window.addEventListener ("overflow", yourFunction, false);
于 2012-02-28T21:29:53.620 回答