Issue in editing sample content by changing color and font in GrapesJS editor
Question
- 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.
"<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)
one solution might be defining these custom outlook tags as custom component types; editor is not recognizing these tags unless you define it. cheers.
@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.
@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.
Issue #2198
Issue in editing sample content by changing color and font in GrapesJS editor
I am seeing unexpected behavior in GrapesJS editor. can someone please assist me with the issue with GrapesJS editor?if I am copying conten...
Issue #3304
How I can customize the UI of Grapesjs?
I want to customize the ui of Grapesjs but the js and css files are minified.Please tell me how can I do this? I just want to keep some spe...
Issue #2716
issue in adding custom font in grapejs
@artf i have followed the method below and successfully added the font in list but not all of the fonts are showing correct behavior, I wan...
Issue #5037
FEATURE: How to drag external text into particular index inside the textable component?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link NA Describe...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.