This is a migrated thread and some comments may be shown as answers.

Pasting in Chrome causes all fonts to change to default browser font.

3 Answers 432 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Mark Kucera asked on 15 Jun 2011, 02:57 PM

This problem seems to happen only in Chrome. If you copy text and paste it into the RadEditor (from notepad, so no formatting is applied), the font of the text that is pasted and all other text in the editor is changed to Chrome's default font (whatever that happens to be). I actually have a short video that demonstrates the issue that was put together by one of our users who reported the issue. In this case the default font is Times New Roman, size 3 and you can see that when the content is pasted all the fonts in the entire editor are affected. I changed my default font to "Stencil" in Chrome and was able to reproduce the same thing. The interesting thing to note is that if you use the RadEditor's Paste toolbar items it seems to work fine. again this is only an issue in Chrome. Do you have any suggestions for fixing this issue? I'm using Telerik.Web.UI.dll version 2011.1.315.35.

Thanks!
-Mark

3 Answers, 1 is accepted

answered on 20 Jun 2011, 10:52 AM

EditableIFRAME.zip

Hi Mark,

We tried to reproduce the problem demonstrated in the video on our end but without any success. Is it possible to open a support ticket and provide the initial HTML content loaded in RadEditor as well as the notepad plain text content file? Are you able to reproduce the problem using the attached editable iframe HTML file?

Please, also verify that the problem is reproducible in the Default Example of RadEditor in a freshly installed Chrome 12.0.742 (please make sure that there are not installed any add-ons, browser skins and CSS customizations.

Kind regards,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 20 Jun 2011, 03:29 PM

After-Paste-with-linebreak.png

After-paste-with-no-linebreak.png

notepad-text-to-paste-in.png

Ok, i was able to reproduce this problem on the Default Example RadEditor. But i did find a new caveat. The problem only appears when the text being pasted in contains a line break. If i just paste in content one sentence or paragraph at a time it works fine. any text with a line break will cause the editor to break. Please review my screenshots that i made using the default example RadEditor and the sample HTML is shown below.

<br />

<table style="border:2px solid #d2d0c7;background-color: white;" align="center" border="0" cellpadding="10" width="670">

<tbody>

<tr>

<td>

<table style="background-color: white;" align="center" border="0" cellpadding="0" cellspacing="0" width="650">

<tbody>

<tr>

<td style="width: 226px;"></td>

<td style="font-family: arial, helvetica, sans-serif; font-size: 10px; color: #6a6a6a; line-height: 15px; width: 424px;" align="right">- Type your preview text should go here. What is your email about?<br />

- Add a view in browser text snippet here</td>

</tr>

<tr>

<td colspan="2"><img alt="" src="http://images.publicaster.com/ImageLibrary/account3573/images/fish%20header.jpg" /></td>

</tr>

</tbody>

</table>

<table style="background-color: white;" align="center" border="0" cellpadding="0" cellspacing="0" width="650">

<tbody>

<tr>

<td style=

"font-family: arial, helvetica, sans-serif; font-size: 24px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; width: 471px;"

>

<strong><span style="color: #4a3637;"><span style="font-size: 22px;">Social Worker Job Alert You Requested</span><br />

</span></strong></td>

<td style="font-family: arial, helvetica, sans-serif; font-size: 18px; padding-right: 15px; width: 179px;" align="right"><span style="color: #9cab83;">Today's date here</span></td>

</tr>

<tr>

<td colspan="2" valign="top"><img alt="" src="http://images.publicaster.com/ImageLibrary/account3570/images/Screen%20shot%202010-12-13%20at%2011.45.19%20AM.png" style="width: 647px; height: 8px;" /></td>

</tr>

<tr>

<td colspan="2" style="height: 10px;" valign="top"></td>

</tr>

</tbody>

</table>

<table style="background-color: white;" align="center" border="0" cellpadding="15" cellspacing="0" width="650">

<tbody>

<tr>

<td style="font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 16px; width: 670px;" valign="top">

<h2 style="font-size: 18px;"><span style="color: #9cab83;"><span style="font-size: 26px;">Today's Job Alert</span><br />

</span></h2>

<h3 style="font-size: 14px;"><span style="color: #666666;">Adding Text to your Email</span></h3>

<p><span style="color: #666666;">To add/replace text into this email, you may either copy/paste your text where it should go or type the

text directly into the editor.</span></p>

<h3 style="font-size: 14px;"><span style="color: #666666;">Formatting Text in your Email</span></h3>

<p><span style="color: #666666;"

>Publicaster's HTML editor works much like any word processing program when formatting text. If you're familiar with Microsoft

Word, then you'll recognize these editing features. Just highlight the text you want to change, and use the buttons on this panel.</

span></p>

<p><span style="color: #666666;">You can format blocks of text with the panel on the editor. Center or align your text, make a bulleted list,

indent a block of text are amongst several options. The buttons on the next panel will change text size, color, style,

and you can also color the background color of your text with the paint bucket icon.</span></p>

<hr />

<h2 style="font-size: 18px; color: #2082cb;"><a name="2" id="2"></a></h2>

<span style="font-size: 12px; line-height: 16px; font-family: arial, helvetica, sans-serif;">

<h2 style="font-size: 18px;"><span style="color: #9cab83;">Working with Text</span></h2>

<h3 style="font-size: 14px;"><span style="color: #666666;">Adding Text to your Email</span></h3>

<p><span style="color: #666666;"

>To add/replace text into this email, you may either copy/paste your text where it should go or type the text directly into the editor.</

span></p>

<h3 style="font-size: 14px;"><span style="color: #666666;">Formatting Text in your Email</span></h3>

<p><span style="color: #666666;"

>Publicaster's HTML editor works much like any word processing program when formatting text. If you're familiar with Microsoft Word, then you'll recognize these editing features. Just highlight the text you want to change, and use the buttons on this panel.</

span></p>

<p><span style="color: #666666;"

>You can format blocks of text with the panel on the editor. Center or align your text, make a bulleted list, indent a block of text are amongst several options. The buttons on the next panel will change text size, color, style, and you can also color the background color of your text with the paint bucket icon.</

span></p>

</span>

<h2 style="font-size: 18px; color: #2082cb;"><a name="3" id="3"></a></h2>

</td>

</tr>

</tbody>

</table>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="650">

<tbody>

<tr>

<td style=

"padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 16px; color: #6a6a6a;"

align="center"></td>

</tr>

<tr>

<td valign="bottom"><img alt="" src="http://www.bsf01.com/creatives/bsf/publicaster/090530_Templates/images/fadeTop.gif" width="650" height="17" /></td>

</tr>

<tr class="RadEDomMouseOver">

<td class="white" style=

"font-family: arial, helvetica, sans-serif; font-size: 12px; color: #ffffff; padding-left: 15px; line-height: 17px; background-color: #9cab83;"

align="center"> [~Physical_Mailing_Address~]<br />

</td>

</tr>

<tr>

<td valign="top"><img alt="" src="http://www.bsf01.com/creatives/bsf/publicaster/090530_Templates/images/fadeBottom.gif" width="650" height="17" /></td>

</tr>

<tr>

<td style=

"padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 16px; color: #6a6a6a;"

align="center">Insert your opt out (unsubscribe) and forward to a friend snippets here.</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

answered on 21 Jun 2011, 03:22 PM

Hello Mark,

I am not sure what your browser settings and add-ons are, but we are still unable to reproduce this behavior on our end. Here is a video from my experiment: http://screencast.com/t/uDBQKoeLS. As you can see the change in the default font is applied, then I put your content in, tried pasting, typed, yet the formatting was correct. I am using the latest version with no add-ons and the only modification I made to the default settings was the default font (during the video).

Are you able to reproduce this only on your browser or on other computers as well? Do they have some custom setting in common that differentiates them from others that do not reproduce it?

In case this is not an isolated case on a single computer I would suggest is that you open a support ticket and send us a simple, runnable project, that isolates this case so we can investigate your editor setting and the content you put in with them.

Best wishes,
Marin
the Telerik team