Html 如何强制<；br>；Firefox ContentEditable中的换行符

我有一个JavaScript所见即所得编辑器（与CKEditor不同）在站点上运行

它有一个设置，当您在编辑器中按Enter键时，IE创建

换行符

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

元素，并且只有在使用Shift+Enter时才会生成

s

---

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

元素

从标准来看，这项行动似乎是应该处理的方式。当enter键上未设置任何修改器时，块将断开，当按下shift键时，将使用

。[…]

也就是说，这并不能解决你的问题，所以让我们继续努力吧。这条线可以

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

设置它，这样当您刚刚点击return时，它只会放入一个

标记。这是，所以它不应该影响IE上的任何东西。不过我不知道其他浏览器

注意：如果用户第二次按Enter键而不键入任何内容，则无论发生什么情况，都会创建一个新的段落标记。为了防止出现这种情况，您可以使用

按键

事件捕捉Enter并停止它，或者在继续该事件之前插入

（我建议）

对于您来说，使用此注释最困难的部分是检查

keypress

上元素的状态。懒惰的解决方案（我推荐的一种，除非不这样做很重要）是在每个回车键之前插入它。如果您想以另一种方式执行，我会检查元素的

.innerHTML

，查看最后几个字符（不修剪内容）是否

（因此可能是

/\$/

上的正则表达式匹配）。

考虑一下：

HTML:

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 );
    }
});

$（输入）。按键（功能（e）{
变量选择、节点、偏移量、文本、文本前、文本后、范围；
sel=window.getSelection（）；
//包含插入符号的节点
节点=选择锚点节点；
//如果在插入符号位于输入字段内时按ENTER键
if（node.parentNode==input&&e.keyCode==13）{
//阻止浏览器自行插入、或

e、 预防默认值（）；
//节点内的插入符号位置
偏移量=选择锚定偏移量；
//在该位置插入“\n”字符
text=node.textContent；
textBefore=text.slice（0，偏移量）；
textfafter=text.slice（偏移量）| |“”；
node.textContent=textBefore+'\n'+textAfter；
//将插入符号置于新行字符之后
range=document.createRange（）；
range.setStart（节点，偏移量+1）；
range.setEnd（节点，偏移量+1）；
//更新所选内容
选择removeAllRanges（）；
选择添加范围（范围）；
}
});

现场演示：

---

我使用

'\n'

字符而不是BR元素（DIV有

空白：pre

集）。因此，按下ENTER键时，不会向DIV添加BR或P元素。DIV中始终只有一个TextNode，所有新行都由

'\n'

字符表示。

//不完全是您所要求的，但是当您想要强制 //其他浏览器包括opera、chrome、internet explorer，在enter上插入一个常规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);

enterBR=函数（e）
{   
var iframelement=parent.window.$（“所见即所得”+n）；
e=e | | iframeElement.contentWindow.event；//iframe（）内的eventhandler
var keyCode=e.keyCode？e.keyCode:e.which；//对于低于v8的IE的请求
if（keyCode==13）//如果按下回车键
{ 
if（IE）//internet explorer
{e.preventDefault？e.preventDefault（）：e.returnValue=false；//阻止默认处理（我告诉你！）
iframeElement.contentDocument.selection.createRange（）.pasteHTML（“
”）；//插入一个br标记
}
if（OP | | CR）//歌剧和chrome
{ 
iframelement.contentWindow.document.execCommand（'formatBlock'，false，'p'）；
}//围绕br标记创建段落
替换为regExp
//这里使用regExp替换不需要的段落标记和检测（如果您有与xhtml兼容的
或不兼容的内容）。
HTML=iframeElement.contentWindow.document.body.innerHTML；
HTML=HTML.replace（//gi，
）；
HTML=HTML.replace（/]？）（[\/]？）>/mgi，“\n”）；
}
返回false；
}
//最后添加一个eventlistener。记住这是在iframe中使用的，所以不要忘记建议脚本从上面的一个dom层（parent.window）开始工作
//但我认为它可以很容易地重写为contenteditable div或其他东西。。。
addEventListener（parent.window.$（“mywysiwygeditor”）.contentDocument，'keypress'，enterBR）；

---

//hf

我的解决方案在Firefox中运行得非常好，尽管它出人意料地出现了！我还用Edge和Chrome对其进行了测试。它是基于@ KTASH的答案，用三个消失的节点替换NBSP：一个空跨度（具有一个类），中间有一个<代码> BR><代码>，包含一个包含“代码> <代码>的跨度。

JS:

---

奇怪的是，有一个问题正好相反：但在FF5和FF7中，我肯定我看到

标签被用于JavaScript解决方案是可以接受的？在我的Firefox（Win7上的7.0.1）中，当我在内部按ENTER键时，一个

插入了
元素。我在其他浏览器中的体验：最新的Chrome插入
元素，以及IE9和Opera插入
元素。由于不同浏览器之间的行为不一致，我建议您在按下ENTER键时只在
按键处理程序中插入
e.preventDefault（）
，然后手动插入

或
\n
$( 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 );
    }
});

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);

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);
            });
        });
    }
});

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