javascript - 如何使用 JavaScript 更改光标位置，然后在其中放置新内容？

Question

我正在使用 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>

Answer 1

首先，要更改文本区域内的文本，请使用其 value 属性而不是 innerHTML，在大多数浏览器中，在用户与文本区域交互后，后者将不起作用。另外，您应该使用 var(或 ES6 中的 let)声明变量，例如示例中的 texteditor)。

对于您的实际问题，您需要使用文本区域的 selectionStart 和 selectionEnd 属性。如果你使用jQuery，你可以使用this plug-in (由我编写)有用:它有一个 surroundSelectedText 方法。

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

否则，这里有一些代码可以执行此操作，但 IE <= 8 除外，IE <= 8 不支持 selectionStart 和 selectionEnd 属性。对于旧版 IE 支持，我建议查看 source code of my jQuery plug-in .

演示: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);
}