如何使用JavaScript来改变光标的位置，然后把它新的内容？(How do I use Java

我使用JavaScript当你点击一个按钮来创建一个非常简单的代码插入公告牌代码到一个文本。
我写的代码工作正常，但是，我想能够把新标签在光标而不是在文本的末尾，然后使光标位于新标签的中间。
例如：目前，当用户单击b，则U，则s，它显示为[b][/b][u][/u][s][/s] 。我想能够做到像[b][u][s]^[/s][/u][/b] ，其中^是光标。有没有简单的方法来做到这一点？

<script type="text/javascript">

   function addTag(prefix, suffix){

       texteditor = document.getElementById("texteditor");

       texteditor.innerHTML += '[' + prefix + ']' + '[' + suffix + ']';

}
</script>

<ul class="wysiwyg">
    <li><a href"#" title="Bold" class="bold" onclick="addTag('b', '/b'); return false;"></a></li>
    <li><a href"#" title="Underline" class="underline" onclick="addTag('u', '/u'); return false;"></a></li>
    <li><a href"#" title="Strike Through" class="strikethrough" onclick="addTag('s', '/s'); return false;"></a></li>
    <li><a href"#" title="Italicize" class="italics" onclick="addTag('i', '/i'); return false;"></a></li>
</ul>

首先，要改变文本的textarea里面，使用它的value属性，而不是innerHTML ，这在大多数浏览器不会在用户与textarea的相互作用之后工作。此外，你应该声明变量，例如texteditor在你的例子有） var （或let在ES6）。

至于你的实际问题，你需要使用selectionStart和selectionEnd textarea的属性。如果你使用jQuery，您可以使用此插件（我写的）有用的：它有一个surroundSelectedText方法。

$("#texteditor").surroundSelectedText("<b>", "</b>");

否则，这里是一些代码，将做到这一点除了在IE <= 8，其不支持selectionStart和selectionEnd属性。对于老的IE支持，我建议采取看看我的jQuery插件的源代码。

演示： http://jsfiddle.net/mLkNV/

码：

function addTag(prefix, suffix) {
    var texteditor = document.getElementById("texteditor");
    var val = texteditor.value;
    var start = texteditor.selectionStart;
    var end = texteditor.selectionEnd;

    // Insert the prefix and suffix
    texteditor.value = val.slice(0, start) +
        '[' + prefix + ']' + val.slice(start, end) + '[' + suffix + ']' +
        val.slice(end);

    // Reset the selection
    texteditor.selectionStart = start + prefix.length + 2;
    texteditor.selectionEnd = texteditor.selectionStart + (end - start);
}