Coped sentences from MS Word produce different HTML in different browser

12 posts, 0 answers
  1. mkerchenski
    mkerchenski avatar
    8 posts
    Member since:
    Jun 2012

    Posted 21 Nov 2012 Link to this post

    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>




  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 23 Nov 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Oleg
    Oleg avatar
    9 posts
    Member since:
    Sep 2012

    Posted 18 Dec 2013 Link to this post

    I have the same issue. It was reproduced here.
    Documment for test here.
  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 21 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Oleg
    Oleg avatar
    9 posts
    Member since:
    Sep 2012

    Posted 23 Dec 2013 Link to this post

    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>
  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Oleg
    Oleg avatar
    9 posts
    Member since:
    Sep 2012

    Posted 24 Dec 2013 Link to this post

    Hello Ianko,

    Examples of formating in attachment.
    It must be as in the document.
    Different is in alignment and margin.
  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. Oleg
    Oleg avatar
    9 posts
    Member since:
    Sep 2012

    Posted 24 Dec 2013 Link to this post

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

  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 26 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  12. Oleg
    Oleg avatar
    9 posts
    Member since:
    Sep 2012

    Posted 26 Dec 2013 Link to this post

    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?

  13. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 27 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017