<div>
<div class="content wysiwyg-content">
I want to be able to insert text that is chosen by a user from a pop-up, and insert it into the caret position in a content editable div. I'm wondering how I could do that (specifically how do I get the caret position, and ensure that the caret position is not lost when the user is interacting with the pop-up) ? <br />
<br />
If you could provide sample code that would be very helpful.
</div>
</div>


I want to be able to insert text that is chosen by a user from a pop-up, and insert it into the caret position in a content editable div. I'm wondering how I could do that (specifically how do I get the caret position, and ensure that the caret position is not lost when the user is interacting with the pop-up) ? 

If you could provide sample code that would be very helpful.

How to insert text at a specific caret position in a content editable within Angular 7 application

angular 5

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.