Adding Custom Element to a Specific Position of Froala editor

Question

After clicking my custom button, I am creating a specific table with some specific elements inside it (with jquery) and placing it inside the froala editor. However, whenever I put it inside the editor, this custom table appears at the end point of froala editor. For example, I have 3 paragraphs and I want to add this table between 2nd and 3rd paragraphs, I click the position where I should put the table and insert it. However, it appears at the end of the third paragraph. Is there a way that I can get the current cursor position and put this table at this point?

Thanks in advance

edit : grammar

Answer 1

I could solve this problem. I found the answer in this link : How can I get the element the caret is in with Javascript, when using contentEditable?

Firstly, I created the custom element as I wanted, then, I put my custom element just before the next sibling of the selected place as seen below:

// gives the position :
var node = document.getSelection().anchorNode;
var selected_place = (node.nodeType == 3 ? node.parentNode : node);

//inserts to the selected place as I wanted
selected_place.parentNode.insertBefore(document.getElementById("my_custom_element"), selected_place.nextSibling);