Force Ie Contenteditable Element to Create Line Breaks on Enter Key, Without Breaking Undo

Force IE contentEditable element to create line breaks on Enter key, without breaking Undo

Not an exact solution, but another workaround. If you use the markup:

<div contenteditable="true">
<div>
content
</div>
<div>

Then pressing enter will create new div tags instead of p tags.

avoid ie contentEditable element to create paragraphs on Enter key

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 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 s...

contentEditable areas::force paragraphs for new lines - cross browsers

Try the execCommand "insertparagraph", e.g. :

document.execCommand('insertParagraph',false,'id for new p')

Alternatively you could handle the keydown event, catch keycode 13 (without modifiers) and then do whatever you like.

Corrected

Setting contenteditable and overwriting line-breaks to br / instead of div does not work at the end of the element

It actually is working and inserting a   at the end of the , but whitespace at the end of  elements is truncated. You can see this by inspecting the element after you press enter at the end of the paragraph. The problem is, at the end of the , execCommand() is only allowing one to be inserted. Instead of inserting, it seems to be replacing.

It does work if you add another character to ' ' and insert this instead ' ' (space after the >), but that's probably not what you're looking for because it actually adds an extra space to your .

You may have to check if it's the last character and use insertAdjacentHTML() with beforeEnd instead.

Preventing html ENTER event without disabling keypress

Adding e.preventDefault() on enter events solved the issue. Make sure you only put it on the enter key and not for all keypresses otherwise you will disable text input for the cells preventing you from being able to edit them, and make sure to use onkeypress/onkeydown and not onkeyup.

Big thanks to @Robin Clower and @Zac in the comments.

In contenteditable how do you add a paragraph after blockquote on Enter key press?

While creating a rich text editor for an iOS application i faced the same problem. Every time i've inserted a <blockquote> tag in my text field and pressed Enter, it was impossible to get rid off the block-quote.

After researching a bit, i've found a working solution.

Finding inner HTML tags:

function whichTag(tagName){

    var sel, containerNode;
    var tagFound = false;

    tagName = tagName.toUpperCase();

    if (window.getSelection) {

        sel = window.getSelection();

        if (sel.rangeCount > 0) {
            containerNode = sel.getRangeAt(0).commonAncestorContainer;
        }

     }else if( (sel = document.selection) && sel.type != "Control" ) {

         containerNode = sel.createRange().parentElement();

     }

     while (containerNode) {

         if (containerNode.nodeType == 1 && containerNode.tagName == tagName) {

             tagFound = true;
             containerNode = null;

         }else{

             containerNode = containerNode.parentNode;

         }

     }

     return tagFound;
 }

Checking for occurrences of the block-quote tag:

function checkBlockquote(){

    var input = document.getElementById('text_field_id');

    input.onkeydown = function() {

        var key = event.keyCode || event.charCode;

        if( key == 13){

            if (whichTag("blockquote")){

                document.execCommand('InsertParagraph');
                document.execCommand('Outdent');

            }

        }

    };

}

Triggering the key down events:

<body onLoad="checkBlockquote();">
<!-- stuff... -->
</body>

I believe the code above can be adjusted to fit your needs easily. If you need further help, feel free to ask.

Force Ie Contenteditable Element to Create Line Breaks on Enter Key, Without Breaking Undo