Question

我目前正在从事一个项目，是否需要在标记位置添加两个HTML tags。因此，我创建了一个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>标签将其放入了Project。它被称为Summernote。您可以找到它here。有了这段代码，我就可以将其适应这两个选项。这是相当可定制的。只需查看文档即可。

希望这会帮助某人一天。

在标记位置插入文字或标签

1 个答案: