CODEWITHSUNDEEP
javascriptangulardrag-and-dropwysiwygcontenteditable
guzmanasir
guzmanasir

Reputation: 1

Drop text in cursor position inside a text editor (pell) with html tags

I have a component in Angular that has the pell text editor (WYSIWYG) and a column with multiple string with drag and drop functionality, I need to insert this strings inside the text editor in the current position of the cursor mouse.

Right now I can only add it to the beggining or the end, the problem is the pell editor use a div with contentEditable with html inside.

Anyone know how can i aproach this?

Thanks!

Upvotes: 0

Views: 1058

Answers (1)

Kyle Reed
Kyle Reed

Reputation: 21

Before you show your modal (or whatever resets the current editing context) you need to save the editor position. Then, before you insertHtml or whatever you need to restore the edit position. Here's a bit of Typescript from my Vue project:

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

Upvotes: 0

Related Questions