如何在Firefox ContentEditable中强制换行

Question

我在网站上运行了一个JavaScript WYSIWYG编辑器(与CKEditor不同).

它有一个设置,<br>当你Enter在编辑器中按下时,IE会创建换行符.

这很好用,但不幸的是,Firefox(我用5和7进行了测试)仍然会生成<p>元素,并且<br>只有在你使用时才生成s Shift + Enter.

有没有办法让Firefox总是<br>在contentEditable中生成元素？

Answer 1

通过查看标准,看起来这个动作是它应该被处理的方式.当没有在输入键上设置修饰符时,块被破坏,并且<br>在按下shift时使用.[ 来源 ].

也就是说,这并没有解决你的问题,所以让我们继续努力.这条线应该做

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

设置它,这样当你点击返回时,它只会放入一个<br>标签.这仅受FF支持,因此它不应影响IE上的任何内容.但是不知道其他浏览器.

注意:如果用户Enter第二次点击而没有输入任何内容,则无论如何都会创建一个新的段落标记.为了防止这种情况,您可以捕获Enter使用keypress事件并将其停止,或者您可以在 继续事件之前插入事件(我建议).

本笔记的难点在于检查元素的状态keypress.懒惰的解决方案(我建议的除非重要的是不要这样做)是在每个Enter键之前插入它.如果你想以另一种方式做,我会检查.innerHTML元素,看看最后几个字符(没有修剪内容)是<br/>(所以可能是正则表达式匹配/\<br\s?\/?\>$/).

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时,不会向DIV添加BR或P元素.DIV中始终只有一个TextNode,所有新行都由'\n'字符表示.