我正在尝试使用contenteditable div的动态克隆模拟多页编辑器。它在Chrome上运行非常流畅，但是在Firefox上崩溃了：
我什至无法调试Firefox崩溃的内容。 我该怎么解决？
谢谢！
smartbeth1 回答：动态内容可编辑脚本在Firefox上崩溃（但在Chrome上运行）
我在Firefox上尝试了该示例，当我进入新页面时它崩溃了。其背后的原因是pages HTMLCollection在for循环内被操纵。这类似于this问题。
根据this的建议，如果改为使用向后迭代，则可以避免此问题。但是，最好的解决方案是根本不使用迭代。您可以在创建新页面时动态附加事件侦听器，并且可以访问该页面的所有同级对象。
此外，在您的示例中，新行在Chrome和Firefox上的显示方式有所不同。 Chrome为每行添加了一个新的<div>，而Firefox正在使用<br>。将DefaultParagraphSeparator更改为div会在两个浏览器上产生相同的行。
此示例在两种浏览器上均适用：
function redator(divId) {
const root = document.getElementById(divId)
const a4 = {
height: 830,width: 595,lineHeight: 30
};
const getChildrenHeight = (element) => {
total = 0;
if (element.childNodes) {
for (let child of element.childNodes) {
switch (child.nodeType) {
case Node.ELEMENT_NODE:
total += child.offsetHeight;
break;
case Node.TEXT_NODE:
let range = document.createRange();
range.selectNodeContents(child);
rect = range.getBoundingClientRect();
total += (rect.bottom - rect.top);
break;
}
}
}
return total;
};
const setSelection = (node,offset) => {
let range = document.createRange();
let sel = window.getSelection();
range.setStart(node,offset);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
const addPage = () => {
const firstPage = root.querySelector('#page-1');
const newPage = firstPage.cloneNode(true);
const pages = root.getElementsByClassName('page');
newPage.addEventListener('input',onInput);
newPage.innerHTML = '';
newPage.id = 'page-' + (pages.length + 1);
firstPage.parentNode.appendChild(newPage);
newPage.focus();
newPage._emptyPage = true;
return newPage;
}
function onInput(e) {
const page = this;
const previousPage = page.previousElementSibling;
const nextPage = page.nextElementSibling;
const pageHeight = getChildrenHeight(page);
const lastChild = page.lastChild;
const cloneChild = lastChild.cloneNode(true);
const textContent = page.innerText;
if ((pageHeight === 0 || textContent.length <= 1) && !!previousPage && !page._emptyPage) {
page.remove();
previousPage.focus();
const lastChild = previousPage.lastChild;
setSelection(lastChild,lastChild.childNodes.length);
} else if (pageHeight > a4.height && !nextPage) {
lastChild.remove();
addPage().appendChild(cloneChild);
} else if (pageHeight > a4.height && nextPage) {
lastChild.remove();
nextPage.insertBefore(cloneChild,nextPage.firstChild);
let selection = getSelection().getRangeAt(0).startContainer.parentElement.closest('div');
if(selection === page.lastChild) {
setSelection(cloneChild,0);
}
} else if (pageHeight < a4.height - a4.lineHeight && !!nextPage) {
let firstChildOfNextPage = nextPage.firstChild;
let clone = firstChildOfNextPage.cloneNode(true);
firstChildOfNextPage.remove();
page.appendChild(clone);
}
page._emptyPage = false;
}
document.execCommand("DefaultParagraphSeparator",false,"div");
root.querySelector('#page-1').addEventListener('input',onInput);
}
redator('editor');<!DOCTYPE html>
<!--
To change this license header,choose License Headers in Project Properties.
To change this template file,choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border: solid black;
padding: 1em 2em;
width: 595px;
height: 841px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
</style>
</head>
<body>
<h3>My Editor</h3>
<div id="editor">
<div contenteditable="true" class="page" id="page-1">
<b>hello</b>
</div>
</div>
</body>
</html>