Any Way to Stop Summernote Creating <br> AND <p> Tags?

Wappler General How To
#1

I’m using Summernote to create HTML documents that are then sent by email. The problem I have is that they are appearing double spaced when received and viewed in an email client like gmail.

Here is the code Summernote creates:

<p>Some text<br></p>
 <p>Some more text on the next line<br></p>
<p><br></p>
<p>A new paragraph<br></p>

So the double spacing is coming from creation of <p> AND <br> tags.

Is there any way to have it produce just one of these?

I’ve looked at a few ideas on the internet, but as this is an officially supported Wappler feature then I wondered if Wappler has a solution for this.

Many thanks!
Antony.

In summernote:

summernote

In gmail:

gmail

#2

Something similar cropped up here and might offer a solution.

1 Like
#3

If it uses <p> tags, would simply replacing the <br> ones work? It could be done either on the client before submitting or server-side.

summernoteinput.value.replace('<br>','')
#4

Thanks for your input folks!

@bpj, I have a load of pre-prepared content now copied to 100s of database rows which have only <br> and no <p> tags… so removing the <br> will mess those up…

I’ve tried removing the </p><p> combination on save and that changes how it looks in when read back into Summernote. Seems Summernote doesn’t deal consistently with lots of <br> tags.

Maybe I can remove </p><p> on the way out to the email provider… I’ve messaged them too to try and find a solution from their end.

Happy days! :exploding_head:
Antony.

#5

When you get the content from your DB, but before sending, can you not remove the </p><p> combo then using replace?

#6

Yes, that is my plan!

#7

Sorry, didn’t see the ‘too’ in this bit - time for alcohol!

1 Like
#8

Happy Hour! :beers:

1 Like
#9

Okay, so removing <p></p> didn’t work, as Summernote doesn’t create enough <br> to make the right number of new lines.

BUT…

what works like a dream is this:

.replace('<p>', '<p style="margin:0">')

Because it just tells gmail etc to put no margin on the paragraphs!

YIPPEE! :partying_face:

1 Like
#10

Did you check compatibility with Outlook? EDM is notorious for ignoring padding, spacing and margins.

OutlookMeme
OutlookMeme500×833 61.7 KB

#11

No… I didn’t know that was the case!