avoid ie contentEditable element to create paragraphs on Enter key

Question

On InternetExplorer, a contentEditable DIV creates a new paragraph (

) each time you press Enter whereas Firefox creates a


Answer 1

You can always learn to use SHIFT + ENTER for single line returns and ENTER for paragraph returns. IE behaves like MS Word in this respect.

Answer 2

Changing the line-height of the <p> inside the editable <div> works:

#editable_div p
{
    line-height: 0px;
}

Answer 3

Yes it is possible to avoid the insertion of paragraphs by stopping the keydown event first (window.event.stopPropagation();) and then inserting the string by using insert HTML command.

However, IE depends on this divs for setting styles etc. and you will get into trouble using <br>s.

I suggest you using a project like TinyMCE or other editors and search for an editor which behaves the way you would like, since they have all kinds of workarounds for different browser issues. Perhaps you can find an editor which uses <br>s...

Answer 4

Here's a solution (uses jQuery). After you click on the 'Change to BR' button, the <br> tag will be inserted instead of the <p></p> tag.

Html:

<div id='editable' contentEditable="true">
This is a division that is content editable. You can position the cursor 
within the text, move the cursor with the arrow keys, and use the keyboard 
to enter or delete text at the cursor position.
</div>
<button type="button" onclick='InsertBR()'>Change to BR</button>
<button type="button" onclick='ViewSource()'>View Div source</button>

Javascript:

function InsertBR()
{
    $("#editable").keypress(function(e) {
        if (e.which == 13) 
        {
            e.preventDefault();
            document.selection.createRange().pasteHTML("<br/>")     
        }
    });
}

function ViewSource()
{           
    var div = document.getElementById('editable');
    alert('div.innerHTML = ' + div.innerHTML);
}

These links helped. Working example here.

Answer 5

If you can use it, FCKEditor has a setting for this