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

【问题标题】：How to implement a numbered list in a textarea如何在文本区域中实现编号列表
【发布时间】：2016-06-16 12:44:59
【问题描述】：

我研究了textarea中的StackOverflow编号列表，这是我观察到的

观察

单击编号列表链接时，会插入类似1. List Item 的内容，再次单击时会插入2. List item
现在，如果您有喜欢 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 列表项并且您将其分成两行，请输入一些文本并再次单击该链接，列表项将再次从 1. List Item 开始
最后，它会自动检测上一个列表项编号并增加1。并且它还会检测列表项的总数，如果前一个是4，而列表项的总数只有两个，它会自动将它们更改为1. List Item和2. List Item

这是一个简短的video，展示了我的观察。

我想要达到的目标

我想实现 StackOverflow 使用的相同功能。

点击我的链接时，它会在我的文本区域中插入 1. List Item 并自动增加，直到检测到两行中断
如果我删除列表项并再次单击链接或断开两行，删除的链接将被自动替换，就像我的第二个观察一样
就像我的第三次观察一样，如果我分解两行并输入一些文本并再次单击链接，它将从 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。但如果有任何替代方案，我将不胜感激

【问题讨论】：

标签： javascript jquery list

【解决方案1】：

你让这变得比它需要的更复杂。您可以轻松地创建一个 contentEditable div 并在每次触发点击时将其内容更改为有序列表：

HTML

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

$('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/

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

【讨论】：

它很酷，但它并不是我所需要的。当我删除列表项时，链接不再起作用。当我分解并添加一些文本并再次单击链接时，它只是从上一个列表停止的地方开始
这就是拆分两个独立按钮发挥作用的地方。当您删除唯一的列表项时，它也会删除
看看这个。它不完整，但可以使用：jsfiddle.net/r9ev1oe9/2

【解决方案2】：

我在这里做了一些看起来很像 stackoverflow 的项目。虽然与 stackoverflow 不是 100% 相同，但至少它具有 stackoverflow 的大部分功能，您可以在此处查看 (http://stack.stephensangkn.org)。但我故意发出图像上传，因为它与服务器有关。我觉得这很酷。也可以在页面看到下载链接下载源代码

【讨论】：