Question

我正在尝试创建一个文本编辑器。用户可以在那里插入HTML代码。有一个工具栏。当用户点击“添加代码”时按钮，我希望插入＆lt; code＆gt;＆lt; / code＆gt; 文本，光标位于开始和结束标记的中间。

我有以下代码在光标位置插入任何文本：

function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
    "ff" : (document.selection ? "ie" : false ) );
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;

var front = (txtarea.value).substring(0,strPos);  
var back = (txtarea.value).substring(strPos,txtarea.value.length); 
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    range.moveStart ('character', strPos);
    range.moveEnd ('character', 0);
    range.select();
}
else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}

使用此代码，我会在光标之前插入所需的＆lt; code＆gt;＆lt; / code＆gt; 。有没有办法使用代码来实现以下目的：

＆lt; code＆gt; + Cursor + ＆lt; / code＆gt;

Answer 1

是的，这是可能的。

由于你的函数已经将插入符号移动到插入的字符串的末尾，你只需要将它移回几个字符（在这种情况下为7）。我修改了函数以包含一个参数来指定我想要移动插入符号的字符数。

 function insertAtCaret(areaId, text, caretOffset) {

然后将计算插入位置的部分更改为

strPos = strPos + text.length + caretOffset;

当你打电话给你的功能时，请这样做：

insertAtCaret('my-textarea', '<code></code>', -7);

它应该工作。这是一个codepen来演示。

当然，您可能会或可能不想通过更强大的检查来增强它，例如确保caretOffset始终为负，或者它移动插入符号的最大字符数是字符数在添加的文本中。

使用JavaScript在光标位于两个字符串的中间插入两个字符串

1 个答案: