[英]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>的白痴证明成为可能。*
它做了两件事:
这推动了我对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 = $('<li></li>');
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 '<li>' + $('<div />').text($(this).text()).html().replace(/ /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.