Javascript 在contenteditable div中创建具有随机名称的新段落

我想在每次有人单击

Enter

键时添加一个随机名称。例如：如果有人按Enter键，则应使用与Medium.com相同的新的唯一名称创建段落块

但与往常一样，contenteditable div只需在按下

Enter

键时复制上一个元素。但我不想复制元素。我想创建一个具有唯一名称的新块

.root{
边框：1px实心#212121；
}

具有随机名称的块
第二块

以下代码依赖于这样一个事实：在新行中，浏览器复制了可编辑div的最后一个子元素。在按下键时，我们处理没有子元素的情况，并确保第一个元素是段落，让浏览器自动创建更多段落

为了设置新创建的段落的id和名称，我们使用变异观察者API在添加段落时获得通知

另一个特点是，如果第一次击键是Enter，我们将添加第二段。我们需要这样做，因为浏览器显示一个空div和一个包含一个空段落的div

函数加载（）
{
//  https://stackoverflow.com/questions/105034/how-to-create-guid-uuid
函数uuidv4（）{
返回“xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxx”。替换（/[xy]/g，函数（c）{
var r=Math.random（）*16 | 0，v=c='x'？r:（r&0x3 | 0x8）；
返回v.toString（16）；
});
}
const zzz=document.getElementById（“zzz”）；
zzz.onkeydown=函数（e）
{
如果（！zzz.children.length）
{
让元素=document.createElement（“p”）；
element.innerHTML=“
”；
zzz.appendChild（元素）；
如果（例如，代码==“输入”）
{
元素=document.createElement（“p”）；
element.innerHTML=“
”；
zzz.appendChild（元素）；
}
window.getSelection（）.collapse（元素，0）；
e、 预防默认值（）；
}
}
const observer=新的MutationObserver（函数（mutationList，observer）
{
for（设ilength=mutationList.length，i=0；i

当我的光标位于任何文本的中心并按enter键时，它应将预期文本拆分为新的块/段落。看到这张图片@Md.Tahazzot-你看，还有另一种方法。@Md.Tahazzot-当你长按一个键添加多个新行时，前面的代码实际上忽略了这个情况。看看新的。非常感谢。你做的比我想象的要多。请你最后一次帮我好吗。（如果你有时间，那么）：（如果我有另一个块而不是段落块。那么它只会在输入时复制最后一个块。我总是想在单击Enter时创建一个新的段落块。