Issue in editing sample content by changing color and font in GrapesJS editor

[ghost]

1) I am seeing unexpected behavior in GrapesJS editor. can someone please assist me with the issue with GrapesJS editor?

if I am copying content from outlook and directly pasting into GrapesJS editor. it's adding some outlook specific tags (Junk Tags Like : MsoNormal, </o:p> , etc ) into the content, because of these junk tags I am facing difficulty to edit the content what ever i saved. Example : its adding these many things for this content Hi Arjun, please find below are the things which you need to confirm on Sunday.

Thanks.

"

                    <p class="MsoNormal" style="box-sizing: border-box;">
                      <span class="c4099" style="box-sizing: border-box; font-size: 11.0pt; font-family: 'Calibri',sans-serif;">Hi
                        Arjun,<o:p style="box-sizing: border-box;">
                        </o:p></span>
                    </p>
                    <p class="MsoNormal" style="box-sizing: border-box;">
                      <span class="c4141" style="box-sizing: border-box; font-size: 11.0pt; font-family: 'Calibri',sans-serif;"> </span>
                    </p>
                    <p class="MsoNormal" style="box-sizing: border-box;">
                      <span class="c4165" style="box-sizing: border-box; font-size: 11.0pt; font-family: 'Calibri',sans-serif;">please
                        find below are the things which you need to confirm on Sunday.<o:p style="box-sizing: border-box;">
                        </o:p></span>
                    </p>
                    <p class="MsoNormal" style="box-sizing: border-box;">
                      <span class="c4207" style="box-sizing: border-box; font-size: 11.0pt; font-family: 'Calibri',sans-serif;"> </span>
                    </p>
                    <p class="MsoNormal" style="box-sizing: border-box;">
                      <span class="c4231" style="box-sizing: border-box; font-size: 11.0pt; font-family: 'Calibri',sans-serif;">Thanks.<o:p style="box-sizing: border-box;">
                        </o:p></span>
                    </p>
                    <p style="box-sizing: border-box;">
                    </p>
                  </td>"

2) it is not reflecting the colors for the content whatever we are saving.

3) it is adding some extra div tags while entering the enter.

[pouyamiralayi]

one solution might be defining these custom outlook tags as custom component types; editor is not recognizing these tags unless you define it. cheers.

[inaLar]

@arju1503, this usually happens when the message is forwarded in Outlook. Forwarded e-mail is a different thing than a sent e-mail in terms of markup. But it can happen with e-mails also as since Outlook 2007, Outlook uses Microsoft Word to render emails. Those elements are injected in order to enable Word to convert the HTML back to fully compatible Word document. I strongly advice you to not use a code from a forwarded message from any e-mail client. If you decide to use it anyway, you could add a parser to trim the non html supported tags and attach it to the import command of GrapesJS.

[ghost]

@arju1503, this usually happens when the message is forwarded in Outlook. Forwarded e-mail is a different thing than a sent e-mail in terms of markup. But it can happen with e-mails also as since Outlook 2007, Outlook uses Microsoft Word to render emails. Those elements are injected in order to enable Word to convert the HTML back to fully compatible Word document. I strongly advice you to not use a code from a forwarded message from any e-mail client. If you decide to use it anyway, you could add a parser to trim the non html supported tags and attach it to the import command of GrapesJS.

Thanks @inaLar , can you please give me a example how can i add a parse to trim the non-html supported tags and attach it to the import command of GrapesJS.

[inaLar]

@arju1503 unfortunately I can't. I do not have this written. How do you import the html - do you use some GrapesJsS plugins?

[artf]

@arju1503 you can also follow @pouyamiralayi suggestion. Add a new custom component type and make them render as you want, eg.

editor.DomComponents.addType('o:p', {
    isComponent: el => el.tagName === 'O:P',
    model: {
        // Remove them from the final HTML
        toHTML: () => '',
    }
});

[ghost]

Thanks Artf/Grapesjs

On Sun, 25 Aug 2019, 11:30 pm Artur Arseniev, notifications@github.com wrote:

@arju1503 https://github.com/arju1503 you can also follow @pouyamiralayi https://github.com/pouyamiralayi suggestion. Add a new custom component type and make them render as you want, eg.

editor.DomComponents.addType('o:p', { isComponent: el => el.tagName === 'O:P', model: { // Remove them from the final HTML toHTML: () => '', } });

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/artf/grapesjs/issues/2199?email_source=notifications&email_token=AMECMLRRJR26PVK3PDR5X73QGLCC7A5CNFSM4IMG56XKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5CYSII#issuecomment-524650785, or mute the thread https://github.com/notifications/unsubscribe-auth/AMECMLQ7KI5ZHD2KAEOHPVDQGLCC7ANCNFSM4IMG56XA .