Coped sentences from MS Word produce different HTML in different browser

[mkerchenski]

We have a client who complaining that if you copy word document and paste to the design view and select Yes I would like to clean this from WORD. the html output different in different in different browsers


Here is my Test document


Here is the output in Google Chrome

<p><span style="text-decoration: underline; color: #0070c0;">Other City Services</span> – Link to event app pdf</p>
<p>Other services the City offers for events include, trash cans, street sweeping, electrical hook up, street closures, security and much more! These items may be requested through the Special Events Application.</p>
<p><span style="text-decoration: underline; color: #0070c0;">Mobile Food Vendor Program</span> (photo) – link to mobile vendor app pdf<strong><span style="text-decoration: underline;"></span></strong></p>
<p>Do you have a Food Truck? A Food Trailer? A Hot Dog Cart? This program is for you! The City offers locations downtown and throughout our City parks where you can park your truck, cart or trailer and sell your wonderful cuisine! Complete the above application and provide all requested documentation and we can get you permitted today!</p>

Here is the output in IE 9

<p style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;"><span style="color: #0070c0; text-decoration: underline;">Other City Services</span> – Link to event app pdf</span></p>
<p style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">Other services the City offers for events include, trash cans, street sweeping, electrical hook up, street closures, security and much more! These items may be requested through the Special Events Application.</span></p>
<p style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;"><span style="color: #0070c0; text-decoration: underline;">Mobile Food Vendor Program</span> (photo) – link to mobile vendor app pdf<b><span style="text-decoration: underline;"></span></b></span></p>
<p style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">Do you have a Food Truck? A Food Trailer? A Hot Dog Cart? This program is for you! The City offers locations downtown and throughout our City parks where you can park your truck, cart or trailer and sell your wonderful cuisine! Complete the above application and provide all requested documentation and we can get you permitted today!</span></p>

[Rumen]

Hello,

The sample docx file is not available for download and I was unable to test the reported behavior.

Nevertheless, let me explain in details what is happening when pasting content from MS Office program. The paste process is controlled entirely by the Operating System and by the browser. The editor is not allowed to interfere in this process much. Thus, with respect to pasting - the original MS Word formatting is not HTML. It is MS Office specific XML formatting. When this is exported to the clipboard, and is made available for paste, it "announces" what "paste flavors" it supports - and those would be MS Word, HTML, Plain text, RTF and so on.

When a client entity (such as the editable iframe/div content area of RadEditor) wants to consume the content of the clipboard, it announces what paste formats it supports (and the editor - any editor - only supports plain text and HTML). So, MS Word converts the original MS Word content to HTML, and this process is controlled entirely by MS Word, and not at all possible to interfere by the editor. The pasted XML content is different in the different browsers and RadEditor just strips the non XHTML compliant tags and attributes.

You can verify this behavior using a standard editable <iframe> or editable <div> elements. For your convenience I have attached a sample EditableIfrmae HTML page.

Kind regards,
Rumen
the Telerik team

[Oleg]

I have the same issue. It was reproduced here.
Documment for test here.

[Ianko]

Hello Oleg,

I tested the scenario with the provided document. You can find attached the resulted HTML output.

After examining them I am unable to find any drastic differences, that could affect the formatting of the text.

Please check them and if you find something that concerns you, please open a support ticket with more details about the possible issues from this HTML.

Regards,
Ianko
Telerik

[Oleg]

After test my document on IE8-IE10 I receive such result and it was different result that you have:

<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: center;"><strong style="mso-bidi-font-weight: normal;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">Some
title</span></strong></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: center;"><strong style="mso-bidi-font-weight: normal;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;"></span></strong></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoListParagraph" style="margin: 0mm 0mm 0pt 36pt;"><em style="mso-bidi-font-style: normal;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">Some sub title</span></em></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: center;"><strong style="mso-bidi-font-weight: normal;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;"></span></strong></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><strong style="mso-bidi-font-weight: normal;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">Some
theme – </span></strong><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla:</span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;"></span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;"><span style="mso-spacerun: yes;"> </span>“bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla”</span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;"></span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">Abstract #:<span style="mso-spacerun: yes;">
</span>O03.01</span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla</span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bl</span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">Location:<span style="mso-spacerun: yes;">
</span>bla bla bla bla bla bla bla bla bla bla</span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">Presenter:<span style="mso-spacerun: yes;">
</span>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla<span style="mso-spacerun: yes;">  </span></span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;"></span></p>
<span style="font-family: Times New Roman;">
</span>
<p class="MsoNormal" style="margin: 0mm 0mm 0pt; text-align: justify;"><span style="font-family: 'Arial','sans-serif'; font-size: 11pt;">bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla </span></p>
<span style="font-family: Times New Roman;">
</span>

[Ianko]

Hello Oleg,

Could you please provide details about your concerns? I am unable to determine any possible faulty behavior that could originate by the provided HTML markup.

Regards,
Ianko
Telerik

[Oleg]

Hello Ianko,

Examples of formating in attachment.
It must be as in the document.
Different is in alignment and margin.

[Ianko]

Hi Oleg,

I tried to reproduce the problem on my end with this live example, but to no avail. You can examine this screencast and observe that the formatting under FF is the same as under IE.

If the mentioned content is provided by using a different RadEditor control, which has additional StripFormattingOptions set, it would be helpful to provide the exact configuration of the used control.

Regards,
Ianko
Telerik

[Oleg]

When you paste to IE the message appears.
You need to click "Don't allow button" and will have result that I have.

[Danail Vasilev]

Hello Oleg,

When you paste content in RadEditor under Internet Explorer you must ensure that the Paste from Clipboard is allowed. It should be enabled, because in other case RadEditor's scripts will be unable to access the clipboard content and provide a programmatic way to modify (e.g. execute the filters that clear MS Word formatting.). You can also check whether the Paste from Clipboard is allowed in the Internet Explorer settings: Tools -> Internet Options -> Security -> Custom Level -> Allow Programmatic clipboard access.

Regards,
Danail Vasilev
Telerik

[Oleg]

Can You look at my example below?

<telerik:RadEditor ID="radEditor" runat="server" Width="1019px"
        StripFormattingOptions="MSWord,ConvertWordLists"
        Toolsfile="~/App_Themes/Default/ToolsEmailBody.xml"
        EditModes="Design,Html"
        ContentFilters="MakeUrlsAbsolute"
        StripAbsoluteAnchorPaths="False"
        StripAbsoluteImagesPaths="False"
        EnableResize="False"
        Height="80"
      >

HTML that provide IE10 after pasting from doc:

<p align="center" style="margin: 0mm 0mm 0pt; text-align: center;"><b><span style='font-family: "Arial","sans-serif"; font-size: 11pt;'>Some title</span></b></p>

<p align="center" style="margin: 0mm 0mm 0pt; text-align: center;"><b><span style='font-family: "Arial","sans-serif"; font-size: 11pt;'> </span></b></p>
<p style="margin: 0mm 0mm 0pt 36pt;"><i><span style='font-family: "Arial","sans-serif"; font-size: 11pt;'>Some sub title</span></i></p>

HTML that provide Chrome after pasting:

<p class="" align="center" style="text-align: center;"><b><span style="font-size: 11pt; font-family: Arial, sans-serif;">Some title</span></b></p>
<p class="" align="center" style="text-align: center;"><b><span style="font-size: 11pt; font-family: Arial, sans-serif;"> </span></b></p>
<p class=""><i><span style="font-size: 11pt; font-family: Arial, sans-serif;">Some sub title</span></i></p>

What can I do to make it the same as in IE?

[Ianko]

Hello Oleg,

The paste process is controlled entirely by the Operating System and by the browser. The editor is not allowed to interfere in this process much (of course there are some minor differences between browsers). Thus, with respect to pasting - the original MS Word/Outlook formatting is not HTML. It is MS Office specific XML formatting. When this is exported to the clipboard, and is made available for paste, it "announces" what "paste flavors" it supports - and those would be MS Word/Outlook, HTML, Plain text, RTF and so on. When a client entity (such as the editor) wants to consume the content of the clipboard, it announces what paste formats it supports (and the editor - any editor - only supports plain text and HTML). So, MS Word/Outlook converts the original content to HTML, and this process is controlled entirely by MS Word/Outlook, and not at all possible to interfere by the editor.

I regret to inform that there is no firm approach that could let you handle such matters easy. You could create custom content filters that strip or clean unwanted tags or attributes, although handling all major browser and all MS Word formatting cases would be a difficult and time consuming task.

Regards,
Ianko
Telerik