繁体   English   中英

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

[英]How to enforce LI formatting in a contenteditable UL

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

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

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

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

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

我构建了以下keyup / down处理程序,以便使我的<UL>的白痴证明成为可能。*

它做了两件事:

  1. 当<UL>为空时,将<LI>添加到<UL>。 我使用我在SO上发现的一些代码(来自Tim Down)将插入符号放在预期的位置
  2. 清除所有非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,培训是所有情况下最好/最简单的解决方案。 在我的情况下,我在页面上有几个令人满意的<UL>,它们非常符合WYSIWYG(即,没有足够的空间用于镀铬风格的镀铬),并且是休闲的,初次使用的非高级用户使用的。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM