1
I’m using the https://summernote.org/ to create a text editor.
At the time of editing, it is necessary to add variables, which at the time of printing will be exchanged for the value corresponding to each variable.
Example: The $eCNPJ variable will be a substitute and the corresponding CNPJ will appear.
PROBLEM:
When clicking on the variable, it should appear in the inside of the editor at the marked position, this is not happening.
It seems that when code is executed in the browser, the textarea id is changed <textarea id="editor1" class="form-control" name="texto"></textarea>.
So far I haven’t been able to fix it.
CODE:
$(document).ready(function() {
$('#editor1').summernote({
tabsize: 2,
height: 200
});
$('.button').click(function(event) {
event.preventDefault();
const editor = document.getElementById('editor1');
const posicaoFinal = editor.selectionStart + this.innerText.length;
editor.value =
editor.value.slice(0, editor.selectionStart) +
this.innerText +
editor.value.slice(editor.selectionEnd);
editor.setSelectionRange(posicaoFinal, posicaoFinal);
editor.focus();
});
});<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
<textarea id="editor1" class="form-control" name="texto"></textarea>
<br>
<small><strong>ESCOLA...:</strong>
<a href="#" title="CNPJ" class="button">$eCNPJ</a>
- <a href="#" title="Rasão Social" class="button">$eRSocial</a>
- <a href="#" title="Nome Fantasia" class="button"> $eNFantasia</a>
- <a href="#" title="E-mail" class="button"> $eEmail</a>
- <a href="#" title="Telefone" class="button"> $eTelefone</a>
</small>
Thank you very much Leon!
– Tiago
I used this code to paste text without formatting
document.querySelector("#editor1").addEventListener("paste", function(e) {
 e.preventDefault();
 var text = e.clipboardData.getData("text/plain");

 document.execCommand("insertText", false, text);
 });but after I changed the editor it no longer pastes without formatting. How can I modify?– Tiago
Check out this link: https://github.com/summernote/summernote/issues/303
– LLeon
Leon, a question, question of aesthetics... When adding the variable, how do I have a space in the freight and behind the variable?
– Tiago
$('#editor1'). summernote('insertText',
${this.innerText});– LLeon
Thank you very much!
– Tiago