Javascript 修改功能以替换文本，并在按下按钮时添加at克拉

我编写了一段代码，可以根据按下的按钮将文本添加到文本区域框中。如果您愿意，可以使用一个非常简单的编辑器

目前，代码只是在光标所在的位置插入选定的文本，但是如果文本高亮显示，那么我希望它也将该文本包装起来

我在家有一个房间

但为了清楚起见，功能是

jQuery("document").ready(function($){

  $('#bold').on('click', function () {
  _insertAtCaret($('#transcription-page-wikitext'), "'''bold text here'''");
});

$('#italic').on('click', function () {
  _insertAtCaret($('#transcription-page-wikitext'), "<del> </del>");
});

$('#strike').on('click', function () {
  _insertAtCaret($('#transcription-page-wikitext'), "{{Paul}}");
});

function _insertAtCaret(element, text) {
  var caretPos = element[0].selectionStart,
      currentValue = element.val();

  element.val(currentValue.substring(0, caretPos) + text + currentValue.substring(caretPos));
return false;
}

})

jQuery（“文档”）.ready（函数（$）{
$（'#粗体'）。在（'click'，函数（）{
_insertAtCaret（$（“#转录页面wikitext”），“'bold text here'”；
});
$（'#斜体'）。在（'click'，函数（）{
_insertcaret（$（“#转录页面wikitext”），”；
});
$（'#strike'）。在（'click'，函数（）{
_insertcaret（$（'#转录页面wikitext'），“{{Paul}”）；
});
函数_insertcaret（元素，文本）{
var caretPos=元素[0]。selectionStart，
currentValue=element.val（）；
val（currentValue.substring（0，caretPos）+text+currentValue.substring（caretPos））；
返回false；
}
})

html是

 <div>
      <!-- editor buttons -->
      <p>
        <button id ="bold" class="btn btn-small btn-info" type="button">Bold</button>
        <button id ="italic" class="btn btn-small btn-info" type="button">Italic</button>
        <button id ="strike" class="btn btn-small btn-info" type="button">Strikeout</button>
      </p>
      <!-- text area -->
      <textarea name="transcription-page-wikitext" id="transcription-page-wikitext" cols="76" rows="16">some text</textarea>        
</div>

大胆的
斜体
三振

一些文本

---

如何更改函数以理想地包装或替换突出显示的文本，而不是仅在光标位置插入？

使用textarea的

selectionEnd

属性以及

selectionStart

和简单的字符串操作

演示：

代码：

---

我在这里看不到问题。我的函数非常适合在光标位置插入文本。但是，如果用户选择了文本，它不会像大多数文本编辑器那样替换（或理想地包装）该文本

function _insertAtCaret(element, text, textBefore, textAfter) {
    var el = element[0];
    var start = el.selectionStart;
    var end = el.selectionEnd;
    var newStart = start;
    var newEnd = end;
    var val = el.value;
    var beforeSel = val.slice(0, start);
    var afterSel = val.slice(end);
    if (start == end) {
        el.value = beforeSel + text + afterSel;
        newEnd += text.length;
    } else {
        el.value = beforeSel + textBefore + val.slice(start, end) +
                   textAfter + afterSel;
        newStart += textBefore.length;
        newEnd = newStart + end - start;
    }
    el.setSelectionRange(newStart, newEnd);
}