在标记位置插入文本或标记

Question

我目前正在处理一个项目，需要在标记的位置添加两个HTMLtags。所以我创建了一个textarea，你可以在这里写一些文本。之后我会在这个区域做标记。现在，用户应该能够按下一个按钮，在该标记的开头和结尾添加预定义的标记。这应该像在Stackoverflow中一样工作。

编辑：我用这段代码试着把它插入光标位置，效果很好。

function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
if (!txtarea) {
return;
}
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 ieRange = document.selection.createRange();
ieRange.moveStart('character', -txtarea.value.length);
ieRange.moveStart('character', strPos);
ieRange.moveEnd('character', 0);
ieRange.select();
} else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}

<textarea id="infoid" name="info" class="form-control" rows="5" style="width:30%" type="text" ></textarea>
<a href="#" onclick="insertAtCaret('infoid', '<b>');return false;">Click Here to Insert</a>

有什么想法可以标记它，并在标记位置前后放置标签吗？

Answer 1

我找到了这个问题的解决方案。如上所述，我试图只为这两个函数编写代码。遗憾的是，它没有正常工作。所以我找到了一个开源应用程序。我下载了它，并用<link>和<script>标签将其放入项目中。它叫做Summernote。你可以在这里找到它。有了这段代码，我可以将其调整为这两个选项。这很适合定制。只需查看文档即可。

希望这一天能对某人有所帮助。