カーソルポインタでjWYSIWYGに何かを挿入しますか？

Question

私はカーソルpointer.Iで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 threadからこれを行う方法を見つけました。カーソル位置を取得したら、前と後のテキストを取得し、新しい値を真ん中に挿入するだけです。

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