Content editable cursor position to be in editable div when popup of text editor occur

See more:

CSS

jQuery

HTML5

popup

jQuery-UI

I'm trying to build a jquery content editable code where a user identifies the editable div while hovering the mouse, once it clicks on that div the content becomes editable and buttons pops up for selecting type of edit. Now when I click the button a text editor pop up and formats the text, once I click the button the cursor or pointer it comes out of the editable div. I'm using jquery to make the content editable

Here's my code.

Edit fiddle - JSFiddle[^]

I'll put the credentials to format text later on. Thanks in advance!

What I have tried:

I've gone through this code and trying to implement but this also have errors.

https://jsfiddle.net/nitishkmr09/ujebcz4f/1/

Please help me out