Вставить что-нибудь в jWYSIWYG по указателю курсора?

Question

Я хочу вставить выбранное значение раскрывающегося списка в jWYSIWYG по указателю курсора. Я хочу сделать это так:

<select id="shirt" name="shirt">
      <option value="small">Small</option>
      <option value="medium">Medium</option>
      <option value="large">Large</option>
</select>
<a href="#" id="btn_insert" name="btn_insert">Insert</a>
<textarea id="testing_txt" name="testing_txt"></textarea>

Answer 1

Хитрость заключается в том, чтобы надежно получить позицию курсора. Я нашел, как это сделать из существующего потока SO. Когда у вас есть позиция курсора, вам нужно просто получить текст до и после, а затем вставить новое значение в середину.

http://jsfiddle.net/Vr99u/1/

$("#mybutton").click( function() {
var pos = getCaret(document.getElementById('mytextarea'));
var currentText = $("#mytextarea").val();
var currentTextStart = currentText.substr(0, pos);
var currentTextEnd = currentText.substr(pos, currentText.length);
var newText = currentTextStart + $("#myselect").val() + currentTextEnd;
$("#mytextarea").val(newText); });


function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}