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

Question

I have the following problem. Once I add a blockquote in contenteditable, by pressing Enter key it moves to a new line and adds another blockquote element. It goes on forever, and I can’t escape the formatting. The desired functionality would be that of the unordered list. When you press the Enter key it adds a new empty <li> element, but if you press Enter again, it escapes the formatting, removes the previously created <li> and adds a <p>.

Check out the demo: http://jsfiddle.net/wa9pM/

One hack I found was to create an empty <p> under the blockquote, before you create a blockquote. But is there a way to break this formatting behaviour with JavaScript? No idea how I would check: if where the cursor is, it’s the end of the line and if it’s a blockquote and on Enter key press, don’t add a new blockquote.

I’m using this code to generate a blockquote in JS:

document.execCommand('formatBlock', false, 'blockquote');

The best solution I can think of is to trigger an event when the enter key is pressed. Then determine where in the contenteditable the cursor is - if it's right after a `
`, it's being pressed on a blank line and should then break out of the `
`. This seems very complicated to me, mind. Good luck. — Lrdwhyt, Feb 03 '13 at 00:12

Mateus · Accepted Answer · 2017-01-11T20:12:11.653

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.

score 1 · Answer 2 · answered Apr 28 '13 at 13:21

Something like this did the work for me (at least on Chrome and Safari).

Demo at http://jsfiddle.net/XLPrw/

$("[contenteditable]").on("keypress", function(e) {
    var range = window.getSelection().getRangeAt();
    var element = range.commonAncestorContainer;
    if(element.nodeName == "BLOCKQUOTE") {
        element.parentElement.removeChild(element);   
    }
});

Didn't make any extensive test, but it looks like range.commonAncestorElement returns the current textnode in case the blockquote contains text, or the blockquote element itself in case it contains no textnode (on Chrome, a <br> is added and caret is positioned after it). You can remove the newly created blockquote in this case. Anyway, after deleting the element the caret looks like getting positioned somewhere upon the contenteditable, although typing confirms that it's right after the original blackquote. Hope this points you to a more conclusive solution.

score 0 · Answer 3 · answered Mar 11 '18 at 21:38

Super late answer, but this was a much simpler solution for me. Hopefully it helps anyone else looking. Browser compatibility may vary.

YOUR_EDITABLE_ELEMENT.addEventListener('keyup', e => {
  if (e.which || e.keyCode === 13) {
    if (document.queryCommandValue('formatBlock') === 'blockquote') {
      exec('formatBlock', '<P>')
    }
  }
})

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

3 Answers3

Linked