javascript - 在不插入多余标签的情况下关闭 contenteditable 中的 <ul/> 标签

Question

在 contenteditable 中使用无序(或有序)列表让我很头疼。

每当我想通过按两次 ENTER 结束编辑列表时，浏览器将关闭 <ul />但插入一个 <p /> (Firefox) 或 <div /> (Chrome) 标签包含 <br /> .
<强> Example here

我的目标是避免多余的 <p />或 <div />而只是关闭 <ul /> .
我试过修改Tim Down's阻止浏览器插入的解决方案<p />或 <div />当按下 ENTER 而不是插入一个干净的 <br />标签。
<强> Example here

不幸的是，当使用该解决方案时 <ul />永远不会被浏览器关闭，因为只有 <br />标签被插入内部 <li />项目。

所以我的问题是:

如何主动关闭 <ul />通过在最后一个空 <li /> 上按回车键时插入节点或粘贴 html ?

更新: 如果问题还不清楚:我正在寻找一种方法来关闭 <ul />不插入<p />或 <div />标签，但只需插入一个好的旧普通 <br />相反

Answer 1

与您的尝试类似，我们在用户按下 Enter 时修改 contenteditable:Demo

if (window.getSelection) { // w3c
    $('div').keypress(function (e) {
        var sel, node, children, br, range;
        if (e.which == 13) {
            sel = window.getSelection();
            node = $(sel.anchorNode);
            children = $(sel.anchorNode.childNodes);

            // if nothing is selected and the caret is in an empty <li>
            // (the browser seems to insert a <br> before we get called)
            if (sel.isCollapsed && node.is('li') && (!children.length ||
                    (children.length == 1 && children.first().is('br')))) {
                e.preventDefault();

                // if the empty <li> is in the middle of the list,
                // move the following <li>'s to a new list
                if (!node.is(':last-child')) {
                    node.parent().clone(false)
                        .empty()
                        .insertAfter(node.parent())
                        .append(node.nextAll());
                }

                // insert <br> after list
                br = $('<br>').insertAfter(node.parent());

                // move caret to after <br>
                range = document.createRange();
                range.setStartAfter(br.get(0));
                range.setEndAfter(br.get(0));
                sel.removeAllRanges();
                sel.addRange(range);

                // remove <li>
                node.remove();
            }
        }
    });

} else if (document.selection) { // internet explorer
    $('div').keypress(function (e) {
        var range, node, children;
        if (e.which == 13) {
            range = document.selection.createRange();
            node = $(range.parentElement());
            children = $(range.parentElement().childNodes);

            // if nothing is selected and the caret is in an empty <li>
            // (the browser seems to insert a <br> before we get called)
            if (!range.htmlText.length && node.is('li') && (!children.length ||
                    (children.length == 1 && children.first().is('br')))) {
                e.preventDefault();

                // if the empty <li> is in the middle of the list,
                // move the following <li>'s to a new list
                if (!node.is(':last-child')) {
                    node.parent().clone(false)
                        .empty()
                        .insertAfter(node.parent())
                        .append(node.nextAll());
                }

                // insert <br> after list
                br = $('<br>').insertAfter(node.parent());

                // move caret to after <br>
                range = document.body.createTextRange();
                range.moveToElementText(br.get(0));
                range.collapse(false);
                range.select();

                // remove <li>
                node.remove();
            }
        }
    });
}

请注意，这不会处理用户在按 Enter 之前选择了某些内容的情况。如果你想处理这种情况，你需要弄清楚用户是否选择了 <li> 的全部内容。 (这似乎不是一项微不足道的任务)，如果是这样，删除内容并将其视为用户在空 <li> 中按下 Enter 一样对待。 .