Issue in editing sample content by changing color and font in GrapesJS editor
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
- 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 #5037
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...
Issue #3194
How do I repurpose the Spectrum Color Picker?
I would like to repurpose the color picker used in GrapesJS. I have to use a color picker for some project level settings. These settings a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
GJSDocs: Say Goodbye to Manual Document Work
Invoices, contracts, proposals, reports — all generated automatically. GJSDocs turns your template into a live document in seconds.
Tutorial
10 Mistakes When Building a Visual Editor (And How to Avoid Them)
Visual editors are powerful tools — they enable non-technical users to create websites, emails, landing pages, and applications without writing code
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.