Question

我有一个WYSIWYG-Editor正在运行，而且由于HTML不支持带编号的有序列表，我现在正试图用JS / jQuery自己实现它。我的意思是，而不是

测试
测试
1. 测试
2. 测试

我需要像

测试
测试

2.1。测试

2.2测试

所以我试过，是对一些关键事件（F1-F4）做出反应，以构建到4层（例如2.1.1.1）。总的来说，我得到了它的工作。它的代码如下：

onKeydown: function(e) {
  if (e.keyCode >= 112 && e.keyCode <= 115) {
    e.preventDefault();
    if (e.keyCode == 112) {
      firstlayercount++;
      secondlayercount = 0;
      thirdlayercount = 0;
      fourthlayercount = 0;
      $('#bemerkungenbox').summernote('code', $('#bemerkungen').val() + '<br/><h1 class="u1">' + firstlayercount + "</h1>");
    }
    if (e.keyCode == 113) {
      secondlayercount++;
      $('#bemerkungenbox').summernote('code', $('#bemerkungen').val() + '<br/><h2 class="u2">' + firstlayercount + "." + secondlayercount + "</h2>");
      thirdlayercount = 0;
      fourthlayercount = 0;
    }
    if (e.keyCode == 114) {
      thirdlayercount++;
      $('#bemerkungenbox').summernote('code', $('#bemerkungen').val() + '<br/><h3 class="u3">' + firstlayercount + "." + secondlayercount + "." + thirdlayercount + "</h3>");
      fourthlayercount = 0;
    }
    if (e.keyCode == 115) {
      fourthlayercount++;
      $('#bemerkungenbox').summernote('code', $('#bemerkungen').val() + '<br/><h4 class="u4">' + firstlayercount + "." + secondlayercount + "." + thirdlayercount + "." + fourthlayercount + "</h4>");
    }
  }
}
var firstlayercount = 0,
  secondlayercount = 0;
var thirdlayercount = 0,
  fourthlayercount = 0;
firstlayercount = $('.u1').filter(':last')[0].innerHTML;
secondlayercount = $('.u2').filter(':last')[0].innerHTML.split('.')[1];
thirdlayercount = $('.u3').filter(':last')[0].innerHTML.split('.')[2];
fourthlayercount = $('.u4').filter(':last')[0].innerHTML.split('.')[3];

所以实际上，我有4个计数器，每个层一个，当去另一个＆＃34;第一层＆＃34;，我重置所有其他，当去＃34;第二层＆＃34;，我只删除第3层和第4层的计数器，依此类推。我想你明白我的意思。

另外，我实现了，当在编辑器中编辑东西时（重新加载页面之后），编号继续而不是从1开始（keydown - 函数之外的东西）。

现在是这个部分，当它变得有趣而且相当困难时，也许，我的想法不再像那样工作了。

使用我刚创建的代码，我只能在文本的末尾添加一个新点，所以如果我有

测试
测试

2.1测试

2.2测试

2.2.1测试

依此类推，我可以添加2.2.1.1或2.2.2或2.3或3.它们完全正常。

但是，如果我注意到，在2.1和2.2之间我会忘记一个章节，那么我需要在它之间添加另一章，所以我点击那里然后按F2并获取

测试
测试

2.1测试

2.2测试

2.3测试

2.3.1测试

结果，所以之后的所有编号也必须增加（当然，如果我删除章节，也会减少）。

另外需要提及的是：我无法使用css计数器的东西，因此我需要将其保存在数据库中，并使用正确的格式和正确的编号。

任何想法我能做什么？

编辑： This是我创建的一个小提琴，用于阐明我拥有的和我拥有的内容。即使在我的编辑器中，而不是生成的代码，我看到它产生的结果（所以h1作为标题，等等），但这并没有改变需要做什么。

＆＃13;

var firstlayercount = 0,
  secondlayercount = 0;
var thirdlayercount = 0,
  fourthlayercount = 0;
$('#tarea').keydown(function(e) {
  if (e.keyCode >= 112 && e.keyCode <= 115) {
    e.preventDefault();
    if (e.keyCode == 112) {
      firstlayercount++;
      secondlayercount = 0;
      thirdlayercount = 0;
      fourthlayercount = 0;
      $('#tarea').val($('#tarea').val() + '<br/><h1 class="u1">' + firstlayercount + "</h1>");
    }
    if (e.keyCode == 113) {
      secondlayercount++;
      $('#tarea').val($('#tarea').val() + '<br/><h2 class="u2">' + firstlayercount + "." + secondlayercount + "</h2>");
      thirdlayercount = 0;
      fourthlayercount = 0;
    }
    if (e.keyCode == 114) {
      thirdlayercount++;
      $('#tarea').val($('#tarea').val() + '<br/><h3 class="u3">' + firstlayercount + "." + secondlayercount + "." + thirdlayercount + "</h3>");
      fourthlayercount = 0;
    }
    if (e.keyCode == 115) {
      fourthlayercount++;
      $('#tarea').val($('#tarea').val() + '<br/><h4 class="u4">' + firstlayercount + "." + secondlayercount + "." + thirdlayercount + "." + fourthlayercount + "</h4>");
    }
  }

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="100" rows="30" id="tarea"></textarea>

＆＃13;

您也可以在此处直接找到代码。

自制有序列表Javascript

0 个答案: