5

Como posso inserir texto na posição de um cursor? o campo é um contenteditable então ele pode conter além de textos normais html css e imagens.

peguei o exemplo na documentação do plugin: Summernote - How to insert text to cursor position?

Mas mesmo assim o exemplo não funciona.

Exemplo:

$('#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

2 Respostas 2

4
+50

Basta usar a tag <a> com o href="#" que ele vai manter a posição do cursor, inserindo da forma que você deseja, esta ao meu ver é a solução mais simples possível.

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>

0
0

Não funciona porque assim que você clica fora do editor, você perde o focus no elemento e o cursor desaparece, e portanto você fica com a posição padrão 0. Desse jeito, toda vez que você clicar em um dos elementos fora do editor, o texto vai ser adicionado logo no início e não na última posição em que o cursor estava anteriormente.

Vai fazer mais sentido se você fizer um segundo teste. Adicionei um evento keydown no editor e repeti o mesmo código ali dentro (escolhi arbitrariamente a tecla Ctrl para testar). O texto foi adicionado na posição correta, pois ainda estamos com o focus dentro do editor: https://jsfiddle.net/9c9qa7wr/3/

2
  • Entendi, mas eu tenho que de alguma forma preservar esta posição do cursor, porque os botoes da toolbar do summernote conseguem fazer isto. 27/07/2017 às 14:02
  • Será que não é possível no evento de saída do campo armazenar qual era a posição do cursor? Se no evento de saída ele já estiver com o valor 0, talvez seja possível no evento de edição do campo 27/07/2017 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .