如何在文本区域中实现编号列表

Question

我研究了文本区域中的StackOverflow编号列表，这就是我所观察到的。

观察

1. 当单击编号列表链接时，它插入类似于此1. List Item的内容，当再次单击时，它将插入2. List item。
2. 现在，如果您有喜欢的3列表项，然后擦除1. List Item，然后再次单击该链接或分解两行，则2. List item更改为1. List Item，3更改为2，剩下的是1. List Item和2. List Item，而不是2. List Item和3. List Item
3. 现在，如果您有3列表项并分解了两行，键入一些文本并再次单击链接，则列表项再次从1. List Item开始。
4. 最后，自动检测前一个列表项号，并通过1进行增加。它还检测到列表项的总量，如果上一项是4，而列表项的总数仅为2项，则自动将其更改为1. List Item和2. List Item。

这是一个简短的视频，展示了我的观察结果。

我想要实现的

我想实现StackOverflow使用的相同特性。

1. 当单击我的链接时，它会在我的文本区域中插入1. List Item并自动增加，直到检测到两行中断。
2. 如果我重新列出一个列表项目并再次单击该链接或拆分两行，则删除的链接将被自动替换，并分别与我的第2号观察结果一样。
3. 就像我的第三次观察一样，如果我拆分两行并键入一些文本并再次单击链接，它将从1. List Item开始，而不是从我停止的最后一条开始。

我的工作

下面的代码是我用来在文本区域中添加文本的代码。

<a href="javascript:;" alt="text to add into textarea">click here for numbered list</a>
<textarea id="text_area"></textarea>
<script>
    $('a').click(function () {
       var text = $(this).attr('alt');
       ins2pos(text, 'text_area');
    });

    function ins2pos(str, id) {
       var TextArea = document.getElementById(id);
       var val = TextArea.value;
       var before = val.substring(0, TextArea.selectionStart);
       var after = val.substring(TextArea.selectionEnd, val.length);
       
       TextArea.value = before + str + after;
       setCursor(TextArea, before.length + str.length);
       
    }

    function setCursor(elem, pos) {
       if (elem.setSelectionRange) {
          elem.focus();
          elem.setSelectionRange(pos, pos);
       } else if (elem.createTextRange) {
          var range = elem.createTextRange();
          range.collapse(true);
          range.moveEnd('character', pos);
          range.moveStart('character', pos);
          range.select();
       }
    }
</script>

我的问题

请让我如何实现这些。我认为最好的方法是通过jQuery和JavaScript。但如果有其他选择的话我会很感激

Answer 1

这里我做了一些看起来很像堆栈溢出的项目，虽然与堆栈溢出不一样，但至少它有大多数与堆栈溢出有关的特性，但是您可以在这里查看它(http://stack.stephensangkn.org)。但是我故意发出图像上传，因为它与服务器有关。我觉得挺酷的。您还可以在页面中看到下载链接来下载源代码。

Answer 2

你让这件事变得更复杂了。您可以轻松地创建一个contentEditable div，并在每次触发单击时为有序列表修改它的内容：

<a href="javascript:;">click here for numbered list</a>
  <div id="text_area" contentEditable="true">
    <ol></ol>
  </div>

JS

$('a').click(function () {
    $('ol').append("<li class='list-item'></li>");
    $('.list-item').each(function(i){
      $(this).text('List Item');
    })
});

CSS

确保div看起来像一个文本区域：

#text_area{
  height:auto;
  width:400px;
  background:white;
  border:1px solid silver;
  resize: vertical;
  overflow:auto;
}

您可以看到，默认的HTML属性加上它是contentEditable，可以很容易地删除列表节点并添加它们，同时保持编号不变。

https://jsfiddle.net/r9ev1oe9/1/

您可以通过创建两个按钮来处理添加多个列表的情况。一个创建新列表，另一个将列表项添加到该列表中。