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

Question

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

目前代码只是在光标所在的位置插入选定的文本，但如果文本被突出显示，那么我希望它也将文本换行。

有一个 jsfiddle

但为了清楚起见，函数是

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

})

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

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

Answer 1

使用文本区域的 selectionEnd 属性以及 selectionStart 和简单的字符串操作。

演示：http://jsfiddle.net/gffeab94/4/

代码：

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);
}

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

Modify function to replace text as well as add at carat when button pressed

html

javascript

jquery

edit

textselection