How to insert text at cursor position?

Question

How can I insert text at the position of a cursor? the field is a contenteditable so it can contain in addition to normal html css text and images.

I took the example in the plugin documentation: Summernote - How to Insert text to cursor position?

But still the example doesn’t work.

Example:

$('#summernote').summernote({
  height: 300
});

$(".list-group li span").click(function() {
  $('#summernote').summernote('editor.saveRange');
  $('#summernote').summernote('editor.restoreRange');
  $('#summernote').summernote('editor.focus');
  $('#summernote').summernote('editor.insertText', $(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.css" rel="stylesheet">

<ul class="list-group">
  <li class="list-group-item"><span class="label label-primary">[PHONE]</span> Telefone da Empresa.</li>
  <li class="list-group-item"><span class="label label-primary">[FAX]</span> Telefax da Empresa.</li>
  <li class="list-group-item"><span class="label label-primary">[EMAIL_1]</span> Primeiro Email da Empresa.</li>
  <li class="list-group-item"><span class="label label-primary">[EMAIL_2] </span> Segundo Email da Empresa.</li>
</ul>

<div id="summernote"></div>

Jsfiddle

Answer 1

Just use the tag <a> with the href="#" that it will keep the cursor position by inserting in the way you want, this in my view is the simplest possible solution.

https://jsfiddle.net/9c9qa7wr/4/

$('#summernote').summernote({
  height: 300
});

$(".list-group li a").click(function() {
  $('#summernote').summernote('editor.insertText', $(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.css" rel="stylesheet">

<ul class="list-group">
  <li class="list-group-item"><a href="#" class="label label-primary">[PHONE]</a> Telefone da Empresa.</li>
  <li class="list-group-item"><a href="#" class="label label-primary">[FAX]</a> Telefax da Empresa.</li>
  <li class="list-group-item"><a href="#" class="label label-primary">[EMAIL_1]</a> Primeiro Email da Empresa.</li>
  <li class="list-group-item"><a href="#" class="label label-primary">[EMAIL_2] </a> Segundo Email da Empresa.</li>
</ul>

<div id="summernote"></div>

Answer 2

It doesn’t work because as soon as you click out of the editor, you lose the focus in the element and the cursor disappears, and so you get the default position 0. This way, every time you click on one of the elements outside the editor, the text will be added at the beginning and not at the last position the cursor was previously in.

It will make more sense if you take a second test. I added an event keydown in the editor and repeated the same code inside (I arbitrarily chose the key Ctrl to test). The text was added in the correct position, because we are still with the focus inside the editor: https://jsfiddle.net/9c9qa7wr/3/