使用 html 标签在文本编辑器 (pell) 内的光标位置放置文本

【问题标题】：Drop text in cursor position inside a text editor (pell) with html tags使用 html 标签在文本编辑器 (pell) 内的光标位置放置文本
【发布时间】：2019-06-23 11:20:34
【问题描述】：

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

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

有人知道我该如何解决这个问题吗？

谢谢！

【问题讨论】：

标签： javascript angular drag-and-drop wysiwyg contenteditable

【解决方案1】：

在显示模态框（或重置当前编辑上下文的任何内容）之前，您需要保存编辑器位置。然后，在您 insertHtml 或您需要恢复编辑位置的任何内容之前。这是我的 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();
  }

【讨论】：