如何在光标处插入内容？

Question

我有一个页面，用户可以在其中编辑发送的电子邮件的内容（模板）。

以下是我的页面的样子：

守则：

<a name="tag" data-toggle="tooltip" tag="<<SubmitterFirst>>" title="The first name of the employee submitting the nomination">&lt;&lt;SubmitterFirst&gt;&gt;</a>

...

$('[name=tag]').click(function(){
        var caretPos = document.getElementById("templateContent").selectionStart,
            currentTemplate = $('#templateContent').val(),
            theTag = $(this).attr('tag');
        $("#templateContent").empty().val(currentTemplate.substring(0, caretPos) + theTag  + currentTemplate.substring(caretPos));
        $("#templateContent").focus();
    });

这似乎在firefox中正常工作，在光标处添加了标签，但是当我在IE中执行它时，它会复制整个模板的位置。

我认为这个问题正在发生，它在添加标签后将模板的内容放回去了：

+ theTag  + currentTemplate.substring(caretPos)

有关如何在IE或其他建议中使用此功能的任何建议？

请参阅此jsFiddle以获取示例：

http://jsfiddle.net/cTzzs/

我也尝试了Inserting a text where cursor is using Javascript/jquery中类似问题的建议，但没有一个在IE8中有效。

这是另一个尝试的更新小提琴。适用于FF，但不适用于IE8;

http://jsfiddle.net/qBWn7/

在ie8中，它将标记放在textarea中的任何位置，而不是光标所在的位置。

更新

这个问题解决了我的答案：Inserting text after cursor position in text areа链接到http://jsfiddle.net/rmDzu/2/

的jsfiddle