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

Gorges

try this: github.com/summernote/summernote/issues/546 – Uncircumcision

I think they changed the module/plugin architecture in the latest release and it didnt works – Gorges

You have a workaround at this reply. – Leucotomy

Summernote blows now, becoming the bane of my existence at work after upgrading to version 8+ – Courtier

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

Anceline

Great solution! Thank you! – Photobathic

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

Vaca

Answer 3

There appear to be at least 10 or so bugs filed about this over at SummerNote, with no fix or plan to fix it unfortunately.

Fortunately you can fix it in a sneaky way, that is going to be pretty brittle to future versions - so upgrade carefully. You Monkey Patch it:

$.summernote.dom.emptyPara = "<div><br/></div>";
box.summernote(options);

The first line is the fix - the Monkey Patch. I included the second line, where SummerNote is initialized, just to demonstrate you MUST do your Monkey Patch before you start SummerNote - or the Monkey Patch will not make it in and you'll still get p tags on enter.

Lecialecithin

Answer 4

Guaranteed 2 liner & no plugin:

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

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

Haines

As div is already a block element, why add a br element? won't it just break 2 lines instead of one? – Erinnerinna

Answer 5

I encountered this problem and the solution is below.

onKeydown function in callbacks solves your problems.

Example:

$('.textarea-editor').summernote({
  height: 250, // set editor height  
  minHeight: null, // set minimum height of editor  
  maxHeight: null, // set maximum height of editor  
  focus: true, // set focus to editable area after initializing summernote  
  htmlMode: true,
  lineNumbers: true,
  codemirror: { // codemirror options
    theme: 'monokai'
  },
  mode: 'text/html',
  callbacks: {
    onKeydown: function(e) {
      e.stopPropagation();
    }
  }
});

Pilotage

Answer 6

Today summernote has no way to do what you want. You can check https://github.com/summernote/summernote/issues/702, so, the only way is to create your own pull-request with fixed logic for different paragraph style.

Muricate

Yes, thats why i am not trying to delete the parent <p> tag. so the idea is there should be only one p tag. – Gorges

hey are you find any solution For This issue? I have a same issue – Phyte

Answer 7

This worked for me

Replace (in Summernote.js line 3786)

    if (event.keyCode === key.code.ENTER) {
        context.triggerEvent('enter', event);
    }

in

    if (event.keyCode === key.code.ENTER) {
        return;
    }

Swatter

Answer 8

Add this javascript solved enter issues

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

using empty x - tag... it for dummy purpose tag....

100% working for me.. any doubt.. contact : [email protected]

Cyclopentane