Question

我正在尝试允许用户编辑列表（UL）。在我的尝试中，似乎contenteditable没有做任何特别的事情（比如强制执行幕后标记） - 它只是给用户一个进入innerHTML的窗口。

这导致的问题是，如果还没有LI，并且用户添加了某些内容，则不会获得LI-ized。类似地，如果有列表项，但是用户删除它们，则LI被删除，并且添加任何新文本而没有LI。见http://jsfiddle.net/JTWSC/。我还发现光标有时可能“存在”存在的LI之外，但我无法一致地重现。

我必须包含代码，所以这就是“结果”的样子：

<ul>whatever the user typed in</ul>

我该如何解决这个问题？我开始沿着$（'ul'）。keyup（）处理程序的路径，检查html并根据需要进行换行，但是我遇到了一些陷阱，比如计时，失去对元素的关注，不得不重新聚焦正确的地方，等等。我确信如果我的工作可行，但我希望能有一个更容易的解决方案。

Answer 1

我构建了以下keyup / down处理程序，以使我的contenteditable＆lt; UL＆gt;傻瓜证明。*

它做了两件事：

将＆lt; LI＆gt;添加到＆lt; UL＆gt;当＆lt; UL＆gt;是空的。我使用我在SO上发现的一些代码（来自Tim Down）将插入符号放在预期的位置
清除所有非LI /非BR标签。这基本上是一种快速而肮脏的糊状清洁剂。

这推动了我对jquery和DOM操作的舒适度，因此可能有一些我可以做得更好的东西，但它的工作原理非常好。

//keyup prevented the user from deleting the bullet (by adding one back right after delete), but didn't add in li's on empty ul's, thus keydown added to check
$('ul').on('keyup keydown', function() {
  var $this = $(this);
    if (! $this.html()) {
        var $li = $('&lt;li&gt;&lt;/li&gt;');
        var sel = window.getSelection();
       var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode($li.get(0));
        range = range.cloneRange();
        range.selectNodeContents($li.get(0));
        range.collapse(false);
        sel.removeAllRanges();
        sel.addRange(range);

    } else {
        //are there any tags that AREN'T LIs?
        //this should only occur on a paste
        var $nonLI = $this.find(':not(li, br)');

        if ($nonLI.length) {
            $this.contents().replaceWith(function() {
    //we create a fake div, add the text, then get the html in order to strip out html code. we then clean up a bit by replacing nbsp's with real spaces
return '&lt;li&gt;' + $('&lt;div /&gt;').text($(this).text()).html().replace(/&nbsp;/g, ' ') + '</li>';
            });
            //we could make this better by putting the caret at the end of the last LI, or something similar
        }                   
    }
});

jsfiddle http://jsfiddle.net/aVuEk/5/

*我恭敬地不同意Diodeus的观点，即训练是所有情况下最好/最简单的解决方案。在我的情况下，我在非常在线WYSIWYG的页面上有几个令人满意的＆lt; UL＆gt;（即，没有很多用于tinymce风格的镀铬的空间）并且由休闲使用，首先使用 - 非高级用户。

如何在可信的UL中强制执行LI格式化

1 个答案: