'Emails created with summernote are formatted differently when sent from Firefox and Chrome

I am trying to use summernote to send emails from a text editor. When the email is sent from Firefox, it is correctly formatted and matches the text entered in the text editor.

Text editor Email received from Firefox

Code view in Firefox:

<span>Dear [OrderCustomerName],<br><br>Please click the link below to track your order.<br></span><div><span>[OrderTrackingURL] ONE</span></div><div><span>TWO</span></div><div><span><br></span></div><div><span>THREE<br></span></div><div><span></span></div>

However, if the same text is sent from Chrome, the formatting is broken.

Email received from Chrome

Code view in Chrome:

<span>Dear [OrderCustomerName],<br><br>Please click the link below to track your order.<br>[OrderTrackingURL] ONE</span><span>TWO</span><span><br></span><span>THREE</span>

I have prepared my summernote like this:

var height = 150;
$('#summernoteEmailBody').summernote({
    height: height,
    dialogsInBody: true,
    dialogsFade: true,
    toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['fontname', ['fontname']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link']],
          ['view', ['fullscreen', 'codeview', 'help']],
    ],
}).on("summernote.enter", function(we, e) {
    $(this).summernote('pasteHTML', '');
    e.preventDefault();
});

Does anyone know why the summernote isn't adding all the extra divs and spans in Chrome, as it does in Firefox? I believe this is why the email is sending differently.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source