WYSIWYG Editor place HTML content in current position

Question

I am using a WYSIWYG Rich Text Editor from mindmup

I added a dropdown box in toolbar I use this dropdown to fetch the content from server and append/prepend to the existing content in the Editor where the cursor is pointing.

But it is not adding the data to the editor.

I referred Insert html at caret in a contenteditable div and Insert text at cursor in a content editable div

But they are not working for me.

This is the function i used to fetch the data when changing drop down

function loadJournalTemplate(journalTemplateId) {

$.post('/Journal/GetTemplate', { journalId: journalTemplateId }, 
  function (data, textStatus) {
    if (textStatus == "success") {

        $('#editor1').html(data.content); //Here i need to append/prepend
    }
 }, "json");

} 

How can we add HTML at a current cursor position?

Note: This Insert text at cursor in a content editable div adds the content in dropdown itself, when I directly choose a dropdown before clicking editor

Answer 1

Sounds like the toolbar buttons are stealing the focus from the editable element, thus destroying the selection. You'll either need to prevent the buttons/dropdowns from doing this or save and restore the cursor position, in which case you'll need to detect clicks on the toolbar buttons before they destroy the selection (possibly using mousedown).

Example: contenteditable selected text save and restore