Перетащите текст в положение курсора внутри текстового редактора (pell) с HTML-тегами

Question

У меня есть компонент в Angular, который имеет текстовый редактор pell (WYSIWYG) и столбец с несколькими строками с функцией перетаскивания, мне нужно вставить эти строки внутри текстового редактора в текущей позиции курсорной мыши.

Прямо сейчас я могу добавить его только в начале или в конце, проблема в том, что редактор pell использует div с contentEditable с html внутри.

Кто-нибудь знает, как я могу подойти к этому?

Спасибо!

Answer 1

Перед тем, как показать ваш модальный режим (или все, что сбрасывает текущий контекст редактирования), вам необходимо сохранить позицию редактора.Затем, прежде чем вставить HTML или что вам нужно, чтобы восстановить позицию редактирования.Вот немного Typescript из моего проекта Vue:

  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();
  }