JavaScript window.getSelection() can't figure it out
<p>I've been searching through SO and various sites all day and I've come across numerous answers that probably fit my issue just right, but I'm having trouble implementing the solution. A quick overview of what I'm trying to ahieve:</p>

<ol>
<li>I've built a rich-text editor.</li>
<li>I require correct handling of "pasted" data that has formatting attached to it.</li>
<li>I've disabled paste via onpaste = "return false".</li>
<li>On Ctrl+V, a hidden textarea is given focus, the text is then pasted in there by the user, then the textarea.value is taken and copied over to the editor (contentEditable div).</li>
<li>I can do this in IE, but not the rest.</li>
</ol>

<p>My problem is I don't understand how the window.getSelection() object works for the standards-compliant browsers. What I want is for the newly pasted textarea.value to be copied into my editor via JavaScript, with the focus and cursor (caret) position being retained. So, the flashing cursor should remain at the end of the paste.</p>

<p>I have written the following code which achives this goal in IE, but not the rest:</p>

<pre><code>function handle_paste_keydown(key)
{   
    if(
        (key.keyCode == 86 || key.charCode == 86) &amp;&amp;
        (key.keyCode == 17 || key.charCode == 17 || key.ctrlKey) // if "Ctrl+V" is pressed.
      )
    {
        var get_paste_selection_range;

        if(document.selection) 
        {
            get_paste_selection_range = document.selection.createRange();                   
            document.getElementById("paste_textarea").style.display = "block"; 
            document.getElementById("paste_textarea").focus();              

            document.getElementById("paste_textarea").onkeyup = function()  
            {
                // insert the .value of the textarea at the cursor position in the editor.
                get_paste_selection_range.text += document.getElementById("paste_textarea").value;              
                document.getElementById("paste_textarea").style.display = "none";

                // retain focus and cursor position                     
                get_paste_selection_range.select();         
            }
        }
        else if(window.getSelection())      
        {
            document.getElementById("paste_textarea").style.display = "block"; 
            document.getElementById("paste_textarea").focus();

            document.getElementById("paste_textarea").onkeyup = function()  
            {
                // How do I handle this?
                document.getElementById("paste_textarea").style.display = "none";
            }
        }
    } 
document.getElementById("paste_textarea").value = "";
}
</code></pre>

<p>Cany anyone help? Thanks!</p>

<p>EDIT: I've added a link to the live version so you can see what's going on. Please try this in Internet Explorer as well as the other browsers, so you can see exactly what's going on. Note: I've made the hidden textarea visible on Ctrl+V so you can get a better view of what's going on, hold down Ctrl+V to keep the box on screen.</p>

<p><a href="http://gameprogrammingworkshop.com/Java/Stack%20Overflow%20Error!/index.php?id=null" rel="nofollow">http://gameprogrammingworkshop.com/Java/Stack%20Overflow%20Error!/index.php?id=null</a></p>
