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?