Froala editor: insert into caret position when clicking a div

Question

I'm using Froala v2.6.1 and I want to insert a string into the editor exactly at the last caret position when user click a divs, but the string is always inserted at the end of the editor.

Here is the thing I did:

<div class="variable" data-value="{{user_id}}">USER ID</div>

Jquery:

$('div.variable').click(function() {
    $("#template_editor").froalaEditor('html.insert', $(this).data('value'), true); 
});

Anyone know how to solve this would be great help.

Answer 1

It looks like you are loosing the context of caret. I had the same problem (Even in V3) where in i had to click an external button which would open a popup and in the popup user would select a html template which had to be inserted into the last known caret postilion.

What i did was save the caret position using selection save, open popup, get the text and restore the selection and then do html.insert

1) First save the selection

// Call this before doing any kind of insert operation
editor.selection.save();

2) Restore the selection and then insert html

// Restore the selection
editor.selection.restore();
editor.html.insert(data.Body);

Hope this helps