带有 Google Docs 等页面的 HTML5 编辑器（contentEditable）答案

【问题标题】：HTML5 editor (contentEditable) with pages like Google Docs带有 Google Docs 等页面的 HTML5 编辑器（contentEditable）
【发布时间】：2012-02-28 20:24:20
【问题描述】：

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

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

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

我曾尝试深入研究 Google Docs JS 代码，但由于它是压缩的，因此几乎无法理解。有一个standalone version of Google Docs，代码被美化了，但是它很旧，不能处理几个页面。

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

【问题讨论】：

每次发生变化时，您都可以测试当前框架的高度并决定是否需要发生新页面
是的，这很容易说。那么问题是：什么是正确的监听事件？你不能依赖关键事件。我已经尝试过使用 DOMSubtreeModified，但据我所知，它不允许您停止传播并取消修改。
实际上，您的问题需要回答的范围很广，请尝试将您的项目删减一些，并提出令人头晕目眩的问题。
Google 文档不使用 contenteditable（至少从 2010 年 5 月开始），googledocs.blogspot.it/2010/05/…
嗨，jävi，你能解决这个问题吗？我正在尝试做同样的事情。

标签： javascript html mercury-editor

【解决方案1】：

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

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

【讨论】：

我喜欢溢出方法，但是“溢出”事件仅适用于 FF。此外还有一个问题需要解决：如何准确检测导致溢出的内容，并将该内容移动到新页面。有任何想法吗？谢谢！
有很多机会：onPropertyChange, onKeyDown, onKeyUp, onBeforePaste... 在 IE 中有onSelectionChange，几乎可以取代所有其他人。我不会尝试取消事件，让用户做他想做的事更容易，然后再修复布局。

【解决方案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 文档没有页面”？你什么意思？它确实有页面。
奇怪，我的文档总是显示为一个连续的页面，我发现它真的很烦人。我想我应该检查我的设置。
@jävi 在这篇文章中接受的答案可能也有帮助：stackoverflow.com/questions/9457201/…