Javascript 在contenteditable div中按enter键时如何添加新div

我正在构建一个Angular 7应用程序。在这个应用程序中，我有一个div设置为true的页面。当用户按enter键时，一个新的div将添加到编辑器/div中，紧跟在用户按enter键时聚焦的div之后。不幸的是，这段代码（见下文）只有在div至少有一个字符时才有效。这不好，因为我想在div中使用假占位符，而不是实际字符

即使div为空，如何更改下面的代码以使其工作

insertBlock($event) {
    $event.preventDefault();
    const selection = window.getSelection();
    const selectedElement = selection.anchorNode.parentNode;
    const block = document.createElement('div');
    block.innerHTML = 'Type slash for commands';
    block.className = 'ce-block';
    block.setAttribute('placeholder', 'Type slash for commands');
    this.editor.insertBefore(block, selectedElement.nextSibling);
    selection.collapse(block.firstChild, block.textContent.length);
  }

HTML如下所示（我使用一个指令来侦听编辑器事件）：

菜单

其想法是构建一个所谓的块编辑器（比如idention.so）

---

谢谢大家!

我已经试过了，不知道你需要什么，但是看看

用于创建和添加新div，并为其提供一个事件侦听器，该侦听器调用同一处理程序以从新div中添加更多内容

使用keyup.enter作为触发处理程序的事件

行为：

• 从空div开始，将tab键插入其中，然后按enter键。创建新div 在它之后
• 选项卡切换到新div并按enter键。在此之后创建的新div 一个
• 返回到上一个div，点击enter-之后创建的新div 这个分区在下一个分区之前

.ts中的主要功能是：

    onPress(item: HTMLElement) {
//Create div element with contenteditable attrbute. This is the new div
         let div = this.renderer.createElement('div');
         this.renderer.setAttribute(div, 'contenteditable','');
//Add enter key press listener that calls this same function so gives add functionality to new divs
          this.renderer.listen(div, 'keyup.enter', (event) => { this.onPress(event.target) });

//Attaches the new div to the DOM
         if (item.nextSibling != null)
         {
           this.renderer.insertBefore(item.parentElement,div,item.nextSibling);
         }
         else
         {
           this.renderer.appendChild(item.parentElement, div);
         }
       }

html模板：

<div contenteditable (keyup.enter)="onPress($event.target)"></div>

---

请添加一个最小的可复制示例，如Stackblitz

<div contenteditable (keyup.enter)="onPress($event.target)"></div>