I used a Jquery plug-in to insert or replace the selected content in the position of the optical indicator (compatible with the browsers)

This is my demonstration in IE and Firefox:

I don't want to remanufacture the wheel, but because there are problems with several functions I have found on the internet, either ie insertion is abnormal or firexfox cannot achieve the expected results, I suspect that these programmers did not pass the test after coding, so I had to rewrite it myself.
First, you need to download and use jquery. You can go to jquery.com to download this file, and then introduce the following code:

If you want to publish this article, please indicate the location, without the right to publish the copyright, I do not like to see that kind of website my work does not indicate the person QQ9256114

(Function ($ ){
$. Fn. insert = function (_ m ){
Var _ o = $ (this). get (0 );
If ($. browser. msie ){
_ O. focus (); sel = document. selection. createRange (); sel. text = _ m; sel. select ();
} Else if (_ o. selectionStart | _ o. selectionStart = '0 '){
Var startPos = _ o. selectionStart; var endPos = _ o. selectionEnd; var restoreTop = _ o. scrollTop;
_ O. value = _ o. value. substring (0, startPos) + _ m + _ o. value. substring (endPos, _ o. value. length );
If (restoreTop> 0) {_ o. scrollTop = restoreTop ;}
_ O. focus (); _ o. selectionStart = startPos + _ m. length; _ o. selectionEnd = startPos + _ m. length;
}
}
}) (JQuery)

Easy to use:

<Input type = 'button 'value = 'insert' onclick = '$ ("# Content"). insert ("abc")'> <br>
<Textarea id = 'content' name = 'content' rows = '13' style = 'width: 100% '> too many rows 1 </textarea>