如何在textarea中实现编号列表

Question

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

观察

1. 点击编号列表链接后，会插入类似1. List Item的内容，再次点击时会插入2. List item
2. 现在，如果您有3个列表项并删除1. List Item并再次点击该链接，或者您分为两行，则2. List item更改为1. List Item和{ {1}}更改为3，2和1. List Item代替2. List Item和2. List Item
3. 现在，如果您有3. List Item个列表项并且您分为两行，请输入一些文字并再次点击该链接，列表项再次从3开始
4. 最后，它会自动检测上一个列表项目编号并增加1. List Item。它还会检测列表项的总金额，如果前一个列表项为1且列表项的总金额仅为两个，则会自动将其更改为4和1. List Item < / LI>

   这是一个简短的video，显示了我的观察结果。

   我想要实现的目标

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

   1. 点击我的链接时，会在我的textarea中插入2. List Item并自动增加，直到检测到两次换行
   2. 如果我擦除列表项并再次单击链接或分解两行，则擦除的链接将自动替换，并且分别就像我的No.2观察
   3. 就像我的第三次观察一样，如果我分解两行并输入一些文本并再次点击该链接，它将从1. List Item开始，而不是从我停止的最后一行开始。

   我的工作

   以下代码用于在textarea中添加文本

   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。但如果有任何替代方案，我将不胜感激

Answer 1

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

<强> HTML

<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/

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

Answer 2

这里我做了一些看起来很像stackoverflow的项目。虽然stackoverflow不是100％相同，但至少它具有stackoverflow的大多数功能，你可以在这里查看它（http://stack.stephensangkn.org）。但我故意发布图像上传，因为它与服务器有关。我认为这很酷。您还可以在页面中看到下载链接以下载源代码