Copy text from Office to Editor

16 posts, 1 answers
  1. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 25 Apr 2013 Link to this post

    Hello,
     
    I have special requirements for the Editor and I don't know if its possible or not. I need the editor to paste the fonts of an Microsoft Office Document 1:1. So if the text is written in Calibri, it should show the text in Calibri. And if its a blue heading - it should also paste the text in a blue color with the right font.
     
    Right now that doesn't seem to work for every font. The pasted text is declared as "Inherited Font" but actually it is using a completely different font (e.g.: Calibri doesnt work - there is no span-tag like the others have one declaring their style)! If i am pasting a heading (Cambria 14) it makes just a h1-tag around the text - and that is definitely not what I want it to do!!! I want it be shown in Cambria 14.
     
    I attached a word-document with the text I used. The first two lines (the heading and the Calibri-text) are not copied correctly. What I need is, that the editor pastes the text 1:1 and that it looks exactly the same.
     
    What can I do? Or will I get just the answer: "Not supported"?
     
    Thank you
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Apr 2013 Link to this post

    Hello Dietmar,

    The content pasted from Word is cleaned automatically so that it becomes pure HTML. You can override this behavior by cleaning the content manually in the editor paste event -- update the html field of the event argument as needed, persisting any styles that you want to keep.

    Kind regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 25 Apr 2013 Link to this post

    Hello Alex,

    thank you for your reply. That sounds quite good but can you tell me how I can get the clean pasted content in the event?

    Thank you
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 26 Apr 2013 Link to this post

    Hello Dietmar,

    Can you please elaborate? The event is triggered before the formatting is cleaned. The html field of the event argument holds the pasted content, which you can process. After you change the content as you need, store it back in the html field, and it will be inserted in the editor.

    Greetings,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 29 Apr 2013 Link to this post

    Hi Alex,

    I think that doesn't solve my problem. e.g. if i copy a text which has "Calibri" as its font the html-content I get in the event is:
    <p class="MsoNormal">Calibr<b style="mso-bidi-font-weight: normal;">i<o:p></o:p></b></p>
    As you can see, there is no span-tag declaring the text as "Calibri"-Font.

    Same with e.g. "Courier New" has a span-tag with the style-attribute "line-height: 115%; font-family: "Courier New"; font-size: 12pt;" - thats what I'm missing with some other fonts like Calibri.

    I think I am missing something. I uploaded a picture to show you what I mean. Specially you can see it with the heading. The color, the font, nothing gets copied. There is just a h1-tag arount the text. I need the complete style of the text copied to the editor. Also in the html-field in the paste-event I only get <h1>Heading1</h1> - no fonts. And also the Calibri-text is shown with the default-font "Verdana,.."

    Thank you
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 30 Apr 2013 Link to this post

    Hello Dietmar,

    Indeed, it appears that Word does not report the default font. One possible solution that comes to mind is to change the default editor font to Calibri, you can do so through its stylesheets configuration option and provide a font-family for the <body> element.

    Regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 30 Apr 2013 Link to this post

    Hello Alex,

    thanks again for your reply. I think that you are wrong and that Word reports the fonts. Otherwise all the other web-editors wouldn't insert these correctly.

    Let me give you an example by the ComponentArt-Editor:
    http://aspnetajax.componentart.com/control-specific/editor/features/core_features/webform1.aspx

    And also the RadEditor does everything correctly!
    http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

    These editors are able to insert the headline correctly and also the Calibri-font is correctly inserted. And this is what I exactly need the Kendo-Editor to do.

    Thanks for your help!
  9. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 30 Apr 2013 Link to this post

    Hello Dietmar,

    In order to achieve this, you need to disable all processing of the clipboard. This will result in non-standard markup that is unsupported by the editor and may yield strange results. You can disable the pasting handler with the following lines:

    var editor = $("[data-role=editor]").data("kendoEditor");
    $(editor.body).off("paste");

    It is highly recommended to use a stylesheet that mimics the default styles of MS Word. this will also provide consistent styling along all browsers, not to mention the validity of the generated HTML.

    Regards,

    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 30 Apr 2013 Link to this post

    Hi Alex,

    thanks to your solution that looks much better. This is something we can work with. At first sight the only problem is, that the editor makes a blank line after every paragraph, which the RadEditor is not doing. Any idea how to fix this? Or do I have to delete them manually in the paste-event?

    EDIT: Ok this problem only occurs when there is already some text in the editor. If it is empty everything gets pasted correctly. Any idea?
  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 May 2013 Link to this post

    Hello Dietmar,

    Since the editor does not modify the pasted content in this case, you may need to remove any excessive markup manually, in a custom paste handler.

    Kind regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 06 May 2013 Link to this post

    Hi Alex,

    the problem is, that when pasting text into the editor, it seems that the currently chosen font-format at the position effects on the pasted text.

    e.g.: if the format is "Paragraph", the pasted text gets a blank line after every paragraph. If the format is "Heading 1", the font of the text changes totally (a few lines are bold, a few are normal, a few are completely different)

    That is the reason why it works fine, when the editor is empty --> no format selected --> text gets pasted 1:1

    And again, the RadEditor doesn't have this problem. Is there any way to prevent it using the format when pasting text? I don't think that a custom paste event is a good solution.
  13. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 06 May 2013 Link to this post

    Hello Dietmar,

    Since the provided hack does not fit your needs, consider that pasting uncleaned from Word is not supported. You can log this functionality as a feature request on uservoice; if needed, use RadEditor until this is implemented.

    Greetings,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Kirk
    Kirk avatar
    2 posts
    Member since:
    Jan 2015

    Posted 18 Aug 2015 in reply to Alex Gyoshev Link to this post

    Hi Alex,

    My ultimate goal is to offload HTML sanitation to the backend as much more powerful libraries are available (e.g. JSoup on Java platform).

    In my particular case I am using this with Angular. My first example below works fine but very limited in what can be done as the HTML from various sources can be quite complex (e.g. Microsoft Office, etc.). The second example doesn't work as I expect it is far too late to make changes to the paste HTML buffer. So that leaves us with the last theoretical method below using promises.

    Is there a way to achieve my end goal with locking up the event queue during remote call?

    self.onPaste = function (event) {
    $log.log('paste', event);
    // this works
    event.html = 'You got served!';
    };

    self.onPasteWithTimeout = function (event) {
    $log.log('paste', event);

    // timeout fires but HTML not updated
    $timeout(function () {
    $log.log('timeout occurred');
    //Content.sanitize(event.html).then(function (sanitizedHtml) {
    // $log.log('Update sanitized content');
    // event.html = sanitizedHtml;
    //});
    event.html = 'You got timeout served!';
    }, 5000);
    };

    self.onPasteWithPromise = function (event) {
    $log.log('paste', event);

    // ideal but not supported
    var deferred = $.Deferred();
    $timeout(new function () {
    $log.log('timeout');
    deferred.resolve('You got deferred served!');
    }, 2000);
    event.html = deferred.promise();
    };

    self.onPaste = function (event) {
    $log.log('paste', event);
    // this works
    event.html = 'You got served!';
    };

    self.onPasteWithTimeout = function (event) {
    $log.log('paste', event);

    // timeout fires but HTML not updated
    $timeout(function () {
    $log.log('timeout occurred');
    //Content.sanitize(event.html).then(function (sanitizedHtml) {
    // $log.log('Update sanitized content');
    // event.html = sanitizedHtml;
    //});
    event.html = 'You got timeout served!';
    }, 5000);
    };

    self.onPasteWithPromise = function (event) {
    $log.log('paste', event);

    // ideal but not supported
    var deferred = $.Deferred();
    $timeout(new function () {
    $log.log('timeout');
    deferred.resolve('You got deferred served!');
    }, 2000);
    event.html = deferred.promise();
    };

  15. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Aug 2015 Link to this post

    Hello Kirk,

    > Is there a way to achieve my end goal with locking up the event queue during remote call? ​

    No, and blocking the UI for an AJAX call on every paste would kill the user experience. You can keep the HTML sanitation on the server-side when the data is posted to the server, and provide an alternative approach on the client-side (for example, the sanitize-html project).

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  16. Kirk
    Kirk avatar
    2 posts
    Member since:
    Jan 2015

    Posted 19 Aug 2015 in reply to Alex Gyoshev Link to this post

    Thanks that's what I figured. Is adding a promise to the event API (i.e. event.html = promise)  above a feasible future solution offering? I was trying to avoid having the content flash changes post paste which IMO would be also a bad UX. 

    Otherwise would you suggest maybe hanging off the "change" event and then doing a server side check then? I think it would be surprising to the end user if the content changed only after hitting "save". Any other options?

     

    Thanks again

  17. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 21 Aug 2015 Link to this post

    Hello Kirk,

    My suggestion is to use a client-side library that filters the content synchronously on paste (e.g. the sanitize-html project I linked previously). It may differ slightly from doing the same validation on the server, but will achieve similar results and will not be disruptive.

    If that is not a viable option, you can execute the following steps to achieve remote filtering:

    1. cancel the immediate paste operation
    2. show an overlay over the window
    3. make a request to the server-side to filter the content
    4. insert the content at the current caret position
    5. remove the overlay
    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready