search

Alex-D / Trumbowyg

A lightweight and amazing WYSIWYG JavaScript editor under 10kB
https://alex-d.github.io/Trumbowyg
MIT License
3.96k stars 606 forks source link

Sandbox CSS possible? #1467

Open mkrecek234 opened 2 weeks ago

mkrecek234 commented 2 weeks ago

I am using Trumbowyg to display incoming HTML-formatted emails, just as Outlook and other programs format them. What I noticed is that if I open some heavily formatted emails with meta fontface and other CSS definitions, those CSS definitions will then also be applied to the rest of the page. I noted this that even though my CSS definition for href links "a" is not underlined, after opening such an email, all "a" href links were displayed underlined. Is there any way to "sandbox" the CSS definitions of the displayed HTML in Trumbowyg?

Here is an HTML which caused this: 

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Generator" content="Microsoft Word 15 (filtered medium)"> <!--[if !mso]><style>v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style><![endif]--><style><!-- /* Font Definitions */ @font-face  {font-family:Helvetica;  panose-1:2 11 6 4 2 2 2 2 2 4;} @font-face  {font-family:"Cambria Math";  panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face  {font-family:Calibri;  panose-1:2 15 5 2 2 2 4 3 2 4;} @font-face  {font-family:Aptos;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal  {margin:0cm;  font-size:12.0pt;  font-family:"Aptos",sans-serif;} a:link, span.MsoHyperlink  {mso-style-priority:99;  color:blue;  text-decoration:underline;} span.E-MailFormatvorlage18  {mso-style-type:personal-reply;  font-family:"Helvetica",sans-serif;  color:#0E2841;} .MsoChpDefault  {mso-style-type:export-only;  font-size:10.0pt;  mso-ligatures:none;  mso-fareast-language:EN-US;} @page WordSection1  {size:612.0pt 792.0pt;  margin:70.85pt 70.85pt 2.0cm 70.85pt;} div.WordSection1  {page:WordSection1;} --></style><!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" /> </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]--> </head> <body lang="DE" link="blue" vlink="purple" style="word-wrap:break-word"> <div class="WordSection1"> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Hi Michael<o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Danke für den schnellen Draht. Ich habe uns direkt für morgen Mittag mal was gebucht </span><span style="font-size:11.0pt;font-family:&quot;Segoe UI Emoji&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">&#128522;</span><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"> <o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Test text </span><a href="https://www.google.com/">Test Link</a><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">BG<o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Tobias&nbsp; <o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841"><o:p>&nbsp;</o:p></span></p> <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top" style="padding:0cm 0cm 0cm 0cm"> <p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#053556;mso-ligatures:standardcontextual">Tobias</span></b><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif;color:#44546A;mso-ligatures:standardcontextual"><br> </span> <p class="MsoNormal"><span style="color:white">//-Ref 209951-//<o:p></o:p></span></p> </div> </div> </body> </html>