Issue #2199💬 AnsweredOpened August 16, 2019by ghost1 reactions

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

快速解答by pouyamiralayi1

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

Read full answer below ↓

Question

  1. I am seeing unexpected behavior in GrapesJS editor. can someone please assist me with the issue with GrapesJS editor?
代码片段HTML
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.

"<td class="c3065" style="box-sizing: border-box; font-size: 11.0pt; font-family: Arial,sans-serif; color: #434449;">
                        <p style="box-sizing: border-box;">
                        </p>
                        <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.

Answers (3)

pouyamiralayiAugust 16, 2019

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

inaLarAugust 21, 2019

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

ghostAugust 21, 2019

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.