如何在 Firefox ContentEditable 中强制 <br> 换行

从标准来看，这个动作似乎是应该处理的方式。当没有在回车键上设置修饰符时，块被破坏，当按下 shift 键时，块被破坏。[来源].<br>

也就是说，这并不能解决您的问题，所以让我们继续努力。这条线应该做

document.execCommand('insertBrOnReturn', false, true);

设置它，以便当您刚刚点击回车时，它只放入一个标签。这仅受 FF 支持，因此它不会影响 IE 上的任何内容。不过不了解其他浏览器。<br>

注意：如果用户第二次点击，而不键入任何内容，则无论如何都会创建一个新的段落标记。为了防止这种情况，您可以捕获 using 事件并停止它，或者您可以在继续事件之前插入一个（我建议这样做）。EnterEnterkeypress 

对于您来说，此注释的困难部分是检查 上的元素状态。懒惰的解决方案（除非不这样做很重要，否则我会推荐）是在每个键之前插入它。如果您想以另一种方式执行此操作，我会检查元素并查看最后几个字符（不修剪内容）是否（因此可能正则表达式匹配）。keypressEnter.innerHTML<br/>/\<br\s?\/?\>$/

考虑一下：

HTML格式：

<div contentEditable id="input"></div>

CSS：

#input {
    border: 3px solid #07c;
    width: 300px;
    height: 200px;
    white-space: pre;
}

JavaScript的：

$( input ).keypress( function ( e ) {
    var sel, node, offset, text, textBefore, textAfter, range;

    sel = window.getSelection();

    // the node that contains the caret
    node = sel.anchorNode;

    // if ENTER was pressed while the caret was inside the input field
    if ( node.parentNode === input && e.keyCode === 13 ) {

        // prevent the browsers from inserting <div>, <p>, or <br> on their own
        e.preventDefault();

        // the caret position inside the node
        offset = sel.anchorOffset;        

        // insert a '\n' character at that position
        text = node.textContent;
        textBefore = text.slice( 0, offset );
        textAfter = text.slice( offset ) || ' ';
        node.textContent = textBefore + '\n' + textAfter;

        // position the caret after that new-line character
        range = document.createRange();
        range.setStart( node, offset + 1 );
        range.setEnd( node, offset + 1 );

        // update the selection
        sel.removeAllRanges();
        sel.addRange( range );
    }
});

现场演示：http://jsfiddle.net/FhEf6/3/

我使用字符而不是 BR 元素（DIV 已设置）。因此，当按下 ENTER 时，不会向 DIV 添加 BR 或 P 元素。DIV 内部始终只有一个 TextNode，所有换行符都由字符表示。'\n'white-space:pre'\n'

不完全是你问的，但当你想强制时，这个函数可能会很有趣 其他浏览器 opera、chrome、internet explorer 在回车时插入常规 BR。 可以写得更好，但到目前为止有效

enterBR = function(e)
{   
    var iframeElement=parent.window.$("wysiwyg"+n);
    e = e || iframeElement.contentWindow.event;                 // eventhandler inside iframe (!)
    var keyCode= e.keyCode? e.keyCode: e.which;                 // req. for IE below v8

if (keyCode==13)                                // if enter key gets pressed
{ 
     if(IE)      // internet explorer
     { e.preventDefault?e.preventDefault():e.returnValue=false; // block default handling ( i tell yo!)
       iframeElement.contentDocument.selection.createRange().pasteHTML("<br/>");  // insert a br tag
     }

     if(OP||CR)  // opera and chrome
     { 
      iframeElement.contentWindow.document.execCommand('formatBlock',false,'p');
     } // creates a paragraph around a br tag <p><br/></p> replace with regExp

    //here the regExp to replace the unneeded paragraph tags and a detection if you have whatever xhtml compatible <br/>'s or not.
    HTML=iframeElement.contentWindow.document.body.innerHTML;
    HTML=HTML.replace(/<p><br([\/]?)><\/p>/gi,'<br/>');
    HTML=HTML.replace(/<br(.*?|\s*[^\/]+[^>]?)([\/]?)>/mgi,"<br$1/>\n"); 

}
  return false;
}

// finaly add an eventlistener. remember this is used inside an iframe so dont forget to advise the script to work from one dom layer above (parent.window)
// but i think it can be easily rewritten for contenteditable div or something...
addEventListener(parent.window.$("mywysiwygeditor").contentDocument,'keypress',enterBR);

高频

我的解决方案在Firefox中完美运行，尽管它出乎意料！我还在 Edge 和 Chrome 中测试了它。它基于 @Ktash 的答案，将 nbsp 替换为三个消失的节点：一个空的 span（带有一个类）、中间的 a 和一个包含 .<br>&nbsp;

JS：

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

document.execCommand('insertBrOnReturn', false, true);

var elements = document.getElementsByClassName('editable');
Array.from(elements).forEach( (el) => {
    el.addEventListener('keydown',function(e) {
        if (e.which == 13) {
            if (isFirefox) {
                document.execCommand('insertHTML', false, '<span class="nbsp-break"></span><br><span>&nbsp;</span>');
                e.preventDefault();
            } else if (!isChrome) {
                document.execCommand('insertText', true, '\r\n');
                document.execCommand('insertHTML', false, "<br>");
                e.preventDefault();
            }
        }
    });

    if (isFirefox) {
        el.addEventListener('input',function(e) {
            var elements = document.getElementsByClassName('nbsp-break');
            Array.from(elements).forEach( (el) => {
                el.parentNode.removeChild(el.nextSibling.nextSibling);
                el.parentNode.removeChild(el);
            });
        });
    }
});

CSS：

.nbsp-break + br + span {
    font-size: 0;
}