Is it possible to get Caret Position in CKEditor ? angular - javascript

Viewed 308

I'm new to CKEditor, what I'm trying to do is to get the caret position in CKEditor element, to insert an additional text in that position.

I found this similar questions but that's not what I'm looking for: Get caret position in a CKEditor

What I'm looking for is how to locate the text's position in the html that the CKEditor returns.

My code :

HTML:

  <div class="document-editor">
     <div class="document-editor__toolbar"></div>
         <div class="document-editor__editable-container" fusePerfectScrollbar>
             <div class="document-editor__editable" (click)="getSelected(editableArea)" #editableArea>
                  <p>The initial editor data.</p>
             </div>
        </div>
 </div>

TS:

initEditor(language: any) {
    DecoupledEditor
        .create(document.querySelector('.document-editor__editable')
        )
        .then(newEditor => {
            const toolbarContainer = document.querySelector('.document-editor__toolbar');
            toolbarContainer.appendChild(newEditor.ui.view.toolbar.element);
            this.editor = newEditor;
        })
        .catch(err => {
            console.error(err);
        });
}

What i tried to do ?

I tried getting it using window.getSelection().anchorOffset and it is returning the position of the cursor in the current div , so for example if I try to color a part of the text in green, and then I click on it, it returns the position in the green text not in the whole content.

Does anyone know if it is possible? and how to do it?

0 Answers
Related