在 contenteditable div 中按回车键时如何添加新 div

Question

我正在构建一个 Angular 7 应用程序。 在这个应用程序中，我有一个页面，其 div 将 contenteditable 设置为 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 看起来像这样（我正在使用指令来监听编辑器事件）：

<div class="ce-container" blockeditor [menu]="menu">
 <div class="ce-menu" contenteditable="false" #menu>Menu</div>
 <div class="ce-block" placeholder="Type slash for commands"></div>
</div>

这个想法是构建一个所谓的块编辑器（例如 Notion.so）。

谢谢！

Answer 1

我已经尝试过了，不确定您是否需要，但请查看StackBlitz 演示

使用Renderer2创建和添加新的 div，并为它们提供一个事件侦听器，该侦听器调用相同的处理程序以从新的 div 添加更多内容。

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

行为：

• 从空的 div 开始，按 Tab 键进入，然后按 Enter。 在它之后创建了新的 div。
• Tab 到新的 div 并按回车键。 在此之后创建的新 div。
• 返回上一个 div，按 Enter - 在此 div 之后和下一个之前创建的新 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>