Question

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

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

用户在页面末尾键入一个分隔线。应该创建一个新页面。
用户正在输入一个单词，他到达页面的末尾。应创建一个新页面，并将该单词移动到新页面。
用户粘贴一些大文本，并不完全适合当前页面。应创建一个新页面，只应将不适合的文本移动到新页面。
用户插入不适合当前页面的任何其他元素（例如图像）。应该使用该元素创建一个新页面。

我试图深入研究Google Docs JS代码，但由于它已被压缩，因此无法遵循。有一个standalone version of Google Docs，代码已经美化，但它已经过时，并且不能处理多个页面。

任何有关如何实现这一目标的提示都将受到赞赏。

Answer 1

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

window.addEventListener ("overflow", yourFunction, false);

Answer 2

基本上你需要两个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没有页面的原因。

带有Google Docs等网页的HTML5编辑器（contentEditable）

2 个答案: