将带有文本标签的文本放置在带有html标签的文本编辑器（拼写）中的光标位置

Question

我在Angular中有一个组件，该组件具有拼写文本编辑器（WYSIWYG）和具有多个具有拖放功能的字符串的列，我需要将此字符串插入到文本编辑器中光标鼠标当前位置的位置。 / p>

现在，我只能将其添加到开头或结尾，问题是pell编辑器使用了带有contentEditable且带有html的div。

有人知道我该怎么做吗？

谢谢！

Answer 1

在显示模态（或重置当前编辑上下文的任何内容）之前，需要保存编辑器位置。然后，在您插入HTML或恢复编辑位置所需的任何内容之前。这是我的Vue项目中的一些Typescript：

  private saveEditorPosition() {
    const sel = document.getSelection();
    this.savedEditorPosition = [sel.focusNode, sel.focusOffset];
  }

  private restoreEditorPosition() {
    this.focusEditor();
    const sel = document.getSelection();
    sel.collapse(this.savedEditorPosition[0], this.savedEditorPosition[1]);
  }

  private focusEditor() {
    const content: any = document.getElementsByClassName('pell-content')[0];
    content.focus();
  }