如何在contenteditable元素中粘贴多行文本，使每一行始终位于自己的div中

Question

运行代码并将任意两行纯文本复制粘贴到框中。它会按照我想要的方式粘贴，每一行都有自己的分区。

现在删除所有内容并按enter键创建一个空的div，然后将文本粘贴到该div中。

还有更多不一致行为的例子。例如，删除所有内容并重新粘贴文本。现在，选择全部并粘贴到所选内容上。它会表现得像我想要的那样。现在，按enter键在现有的两个div下面创建一个新的div，选择所有文本并再次粘贴。不想要的行为将会被看到。

其中一些问题似乎与生成的break标签有关。我试过解决它，但其中一个解决方案破坏了其他问题。

.text_area {
width: 200px;
height: 100px;
border: 1px solid;
padding: 2em 2em 2em 3em;
overflow: auto;
}
.text_area>div {
border: 1px solid lightgray;
margin: 0.33em 0;
min-height: 1.2em;
}

<div class="text_area" contenteditable="true"></div>

Answer 1

如果你总是希望每一行都在div中，你必须确保内容总是有一个div。

使用内部div初始化您的contenteditable元素以启动。这样可以确保当用户单击时，他们已经处于正确的环境中。

在"input"上使用带有事件侦听器的JavaScript，可以测试contenteditable元素是否为空。您必须记住，该区域中的<br>将被视为非空。这就是导致enter出现问题的原因。在<div>之前有一个<br>。如果您的内容可编辑区域的innerHTML不包括<br>和多余的空白，那么您需要将该div作为内容可编辑区的子区域追加回来。

最后，您在复制和粘贴时得到了div嵌套。这是因为粘贴到内容可编辑区域的默认行为是使用HTML格式。因此，如果您复制<div>a</div><div>b</div>并将其粘贴到<div></div>中，您将获得嵌套。您可以通过从剪贴板中只获取"text/plain"来避免这种情况。

// Ensure Text is copied as plain text not as HTML (Fixes Nested Divs Problem)
document.querySelector('[contenteditable]').addEventListener('paste', (event) => {
event.preventDefault();
document.execCommand('inserttext', false, event.clipboardData.getData('text/plain'));
});
document.querySelector('[contenteditable]').addEventListener('input', (event) => {
// Remove All BR
if (event.target.childNodes.length > 0) {
for (let br of event.target.querySelectorAll('br')) {
br.remove();
}
}
// If DIV is ever made empty after removal of BRs
if (event.target.innerHTML.trim().length === 0) {
// Re-populate the initial DIV
event.target.innerHTML = '';
event.target.appendChild(document.createElement('div'));
}
});

.text_area {
width: 200px;
height: 100px;
border: 1px solid;
padding: 2em 2em 2em 3em;
overflow: auto;
}
.text_area>div {
border: 1px solid lightgray;
margin: 0.33em 0;
min-height: 1.2em;
}

<!-- Prime Your Content Editable Area With a DIV -->
<div class="text_area" contenteditable="true">
<div></div>
</div>