javascript - 添加变量而不丢失格式

Question

我想点击变量，它被添加到光标指示的位置而不会丢失格式。

这个功能有几个小时有效，有几个小时无效，似乎它有自己的意志..

添加变量之前的编辑器：

https://i.stack.imgur.com/dhzfN.jpg

添加变量后：

https://i.stack.imgur.com/xOM3j.jpg

视频：https ://drive.google.com/file/d/1t-_bJL0HCh-c5y4uNQQlhOji8y_KlcPr/view

该变量不会停留在它被标记为要插入的位置，并且文本仍然会丢失格式。

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

标签： javascriptjquery

Answer 1

看起来您需要获取光标位置的值。我引用了此链接并更新了您的代码，如下所示。

<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>