Q: Add variable without losing formatting I would like to click on the variable, it is added at the position indicated by the cursor without losing the formatting.
This function has hours that works, has hours that do not, it seems that it has its own volition ..
Editor before adding the variable:
https://i.stack.imgur.com/dhzfN.jpg
After adding the variable:
https://i.stack.imgur.com/xOM3j.jpg
Video: https://drive.google.com/file/d/1t-_bJL0HCh-c5y4uNQQlhOji8y_KlcPr/view
The variable does not stay where it was marked to be inserted and the text still loses formatting.


$(document).ready(function() {

  $('.button').click(function(event) {
    event.preventDefault();
    if ($("#editor1").text() == "") {
      $("#editor1").text($(this).html());
    } else {
      $("#editor1").text($("#editor1").text() + $(this).html());
    }
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="editor1" name="name" rows="8" cols="80">
TERMO CONTRATUAL

CONTRATADO: AAAAA, razão social: AAAAA, pessoa jurídica de direito privado, inscrita no CNPJ/MF sob o nº AAAAAA, estabelecida à AAAAAA; 

CONTRATANTE e/ou ALUNO: 

</textarea>
<br>
<small>ALUNO...:
- <a href="#" title="Rua" class="button"> $sAlunoRua</a>
- <a href="#" title="Numero" class="button"> $sAlunoNumero</a>
- <a href="#" title="Bairro" class="button"> $sAlunoBairro</a>
- <a href="#" title="Cidade" class="button"> $sAlunoCidade</a>
</small>



A: Looks like you need to get the value on your cursor position. I refered this link and updated your code as below.  


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="textareaid" name="name" rows="8" cols="80">
TERMO CONTRATUAL

CONTRATADO: AAAAA, razão social: AAAAA, pessoa jurídica de direito privado, inscrita no CNPJ/MF sob o nº AAAAAA, estabelecida à AAAAAA; 

CONTRATANTE e/ou ALUNO: 

</textarea>
    <br>
        - <a href="#" title="Rua" class="button" onclick="insertAtCaret('textareaid', '$sAlunoRua');return false;">$sAlunoRua</a>
        - <a href="#" title="Numero" class="button" onclick="insertAtCaret('textareaid', '$sAlunoNumero');return false;">$sAlunoNumero</a>
        - <a href="#" title="Bairro" class="button" onclick="insertAtCaret('textareaid', '$sAlunoBairro');return false;">$sAlunoBairro</a>
        - <a href="#" title="Cidade" class="button" onclick="insertAtCaret('textareaid', '$sAlunoCidade');return false;"> $sAlunoCidade</a>
        
<script>
       
        function insertAtCaret(areaId, text) {
            var txtarea = document.getElementById(areaId);
            if (!txtarea) {
                return;
            }

            var scrollPos = txtarea.scrollTop;
            var strPos = 0;
            var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
              "ff" : (document.selection ? "ie" : false));
            if (br == "ie") {
                txtarea.focus();
                var range = document.selection.createRange();
                range.moveStart('character', -txtarea.value.length);
                strPos = range.text.length;
            } else if (br == "ff") {
                strPos = txtarea.selectionStart;
            }

            var front = (txtarea.value).substring(0, strPos);
            var back = (txtarea.value).substring(strPos, txtarea.value.length);
            txtarea.value = front + text + back;
            strPos = strPos + text.length;
            if (br == "ie") {
                txtarea.focus();
                var ieRange = document.selection.createRange();
                ieRange.moveStart('character', -txtarea.value.length);
                ieRange.moveStart('character', strPos);
                ieRange.moveEnd('character', 0);
                ieRange.select();
            } else if (br == "ff") {
                txtarea.selectionStart = strPos;
                txtarea.selectionEnd = strPos;
                txtarea.focus();
            }

            txtarea.scrollTop = scrollPos;
        }
    </script>


