使用html标记删除文本编辑器（pell）中光标位置的文本

Question

我在Angular中有一个组件，它有一个pell文本编辑器（WYSIWYG）和一个带有拖放功能的多个字符串的列，我需要在文本编辑器中将这些字符串插入到光标鼠标的当前位置。

现在我只能将它添加到开头或结尾，问题是pell编辑器使用带有contentEditable和div的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();
  }