如何强制Firefox ContentEditable 中的换行符

Question

我有一个在网站上运行的 JavaScript WYSIWYG 编辑器（与 CKEditor 不同）。

它有一个设置，当您在编辑器中按 Enter 时，IE 会创建
换行符。

这很好用，但不幸的是，Firefox（我已经用 5 和 7 进行了测试）仍然会生成

元素，并且仅在以下情况下生成
：您使用Shift + Enter。

有没有办法让 Firefox 始终在 contentEditable 中生成
元素？

Answer 1

从标准来看，这个动作似乎是应该被处理的。当回车键上没有设置修饰符时，块会被破坏，并且当按下 Shift 时，会使用
。 [来源]。

也就是说，这并不能解决您的问题，所以让我们解决这个问题。此行应该执行

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

Set 操作，以便当您按回车键时，它只会放入
标记。这是仅受 FF 支持，因此它不会影响 IE 上的任何内容。不过不知道其他浏览器怎么样。

注意：如果用户再次按 Enter 且未输入任何内容，则无论如何都会创建一个新的段落标记。为了防止这种情况，您可以使用 keypress 事件捕获 Enter 并停止它，或者您可以在之前插入  继续活动（我的建议）。

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

Answer 2

考虑一下：

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/

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

Answer 3

// 不完全是你所问的，但当你想强制时这个函数可能会很有趣
// 其他浏览器 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);

// hf

Answer 4

我的解决方案在 Firefox 中完美运行，尽管它的出现非常出乎意料！我还在 Edge 和 Chrome 中测试了它。它基于 @Ktash 的答案，用三个消失的节点替换 nbsp：一个空的跨度（带有一个类），中间的一个
和一个包含 & 的跨度。 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> </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;
}