How to insert text at cursor position?

Question

How to insert text at cursor position?

Navigation

#1 by (4 votes)
#2 by (0 votes)

5

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

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

But even then the example does not 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><scriptsrc="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><linkhref="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

javascript jquery summernote

asked by anonymous 24.07.2017 / 14:32

2 answers

0

It does not work because as soon as you click outside of the editor, you lose focus in the element and the cursor disappears, 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 rather than at the last position where the cursor was previously.

It will make more sense if you take a second test. I added a keydown event to the editor and repeated the same code inside (I arbitrarily chose the Ctrl key to test). The text has been added in the correct position because we are still with focus inside the editor: link

27.07.2017 / 15:53

How does v-if work internally? Multiple inheritance and diamond problem

score 4 · Accepted Answer

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

link

$('#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><scriptsrc="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><linkhref="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>