单击后记住光标位置

Question

我有一个文本区域，我有一些按钮可用于向该文本区域添加格式。

我遇到的问题是，它真的是非常糟糕的UX，因为要添加格式，您必须单击一个按钮，而textarea似乎忘记了光标所在的位置。这对于单击来说确实很好，但是对于第二，第三等搞砸了..我想知道如何解决这个问题。

function formatText(type) {
    var textarea = $('#textarea');
    var cursorPos = textarea.prop('selectionStart');
    var cursorPosEnd = textarea.prop('selectionEnd');
    var v = textarea.val();
    var textBefore = v.substring(0,  cursorPos );
    var textSelected  = v.substring( cursorPos, cursorPosEnd );
    if(textSelected == "")
    	textSelected = "text here"
      
    var textAfter  = v.substring( cursorPosEnd, v.length );
    textarea.val( textBefore + type + textSelected + type + textAfter );
  }

#textarea {
 width: 100%;
 height: 150px;
}

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

<button onclick="formatText('#')">Strike</button> <!-- For strike through -->
<button onclick="formatText('_')">Italic</button> <!-- For italic -->
<button onclick="formatText('*')">Bold</button> <!-- For bold -->

因此，在此示例中，如果将光标放在句子的中间，然后单击其中一个按钮，则会在所需位置添加格式。但是，如果单击另一个按钮，它不会将其添加到应有的位置，而是将其添加到开头。我怎样才能解决这个问题？谢谢。