Using <br> instead of <p> in Summernote?

Question

Needed to use <br> tag in the summernote editor instead of <p> while user clicks on the Enter button, so here is my code:

var $this = $(this),
    box = $('textarea.CommentsFields');
box.summernote({
    height: 100,
    focus: true,
    toolbar: [
        [ 'all', [ 'bold', 'strikethrough', 'ul', 'ol', 'link' ] ],
        [ 'sided', [ 'fullscreen' ] ]
    ],
    callbacks: {
        onEnter: function(){
            box.summernote('insertNode', document.createTextNode("<br>")); 
            console.log('uiwdbvuwecbweuiuinsjk');
        }
    }
});

I wrote a custom callback of the onEnter event, when the user hit the return button it raises a callback, and write the <br> tag which is not what I am looking for.

I read their documentation but can not understand how to stop the default action of the enter button and write <br> tag instead of wrapping the element in <p> tag.

Any idea? Thanks

Solution 1

This code worked for me:

$("#summernote").on("summernote.enter", function(we, e) {
     $(this).summernote("pasteHTML", "<br><br>");
     e.preventDefault();
});

This interceps the Enter press event and changes its default behaviour, inserting a <br> instead of a new paragraph.

Solution 2

If you don't want to change or fix the summernote library itself, you can use the shortcut keys for adding a line break.

• Use Shift + Enter for giving a line break.
• Use Enter for changing a paragraph, as summernote add a div/p to start a new line when you press Enter.

Hope this works.

Solution 3

Guaranteed 2 liner & no plugin:

$.summernote.dom.emptyPara = "<div><br></div>"; // js

.note-editor .note-status-output{display:none;} /*css*/