Editor is stripping tags

8 posts, 0 answers
  1. Scott
    Scott avatar
    4 posts
    Member since:
    Feb 2013

    Posted 15 Feb 2013 Link to this post

    Hello,
    I am looking at replacing our current editor with this Kendo Editor.  I have set up a small demo project in VS 2010 and I have noticed that when I send the editor complete html (i.e. with <html />, <body />, etc...) it all gets removed and anything in areas like <head> stays around.
    Is there a way to tell the editor not to strip these tags?
    what other sort of formatting does the editor do on the HTML that i send it?

    Thanks,
    -Scott
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Feb 2013 Link to this post

    Hi Scott,

    The Editor does not accept full page HTML as its content and there are two reasons for this:

    1. The Editor's editable area is an iframe element with its own <head> and <body> elements, which have some specific and required content or attributes.

    2. The Editor provides the ability to edit visible HTML content. A page <head> section does not contain any visible content, so there is no use in inserting it inside the Editor.

    If you need to store and use full page HTML markup, then I suggest you to send only the <body> content to the Editor (without the <body> tag itself) and then add it back to the full page on the server, e.g. before saving to the database.

    All the best,
    Dimo
    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. Scott
    Scott avatar
    4 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    Dimo,
    Thank you for you response.  Your suggested workaround is an option I have been playing with and will seem to work for saving and displaying existing items.  What I have done so far is replaced the stripped tags with <div /> tags when displaying the HTML and then changing those <div /> tags back when saving.  However, many of our clients paste full HTML into our current editor and many of them will add things like <title /> or <link /> tags.  It would seem that Kendo Editor does not remove these tags so what the editor ends up with is poorly formatted HTML.
    To resolve this I have been attempting to intercept the paste operation in order to change the stripped tags to <div /> tags that I can change back when saved to the DB.  Thus far I have been unsuccessful in intercepting that paste command and the doumentation available seems to be sparse at best.  Is there a way to achieve this goal?

    -Scott
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Feb 2013 Link to this post

    Hello Scott,

    Usage of the paste event handler is demonstrated at

    http://demos.kendoui.com/web/editor/events.html

    The event is documented at

    http://docs.kendoui.com/api/web/editor#paste

    Basically, you have to modify the value of the e.html event argument and it will be pasted instead of the intiial clipboard content.

    On a side note, it is unclear to me how full page HTML can be pasted into the Editor. If I open a web page, press Ctrl+A to select all and paste it into the editor, only the <body> inner content is present in e.html and this is what is pasted. My recommendation is to strip all content, which resides outside the <body> tag, because the Editor has not been designed to support invisible <head>-specific elements and we cannot claim that they will be preserved properly while the user edits the rest of the editable content.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Scott
    Scott avatar
    4 posts
    Member since:
    Feb 2013

    Posted 20 Feb 2013 Link to this post

    Is there an event for pasting into the HTML edit window?
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Feb 2013 Link to this post

    Hello Scott,

    I am afraid that Editor's paste event will not work inside the View HTML window. This dialogue is not an editor - its a Window widget with a textarea.

    If you want to bind to the paste event of that element, you can use jQuery on method. As an example:
    $("body").on("paste", ".k-editor-textarea", function(e) {
        console.log(e);
    });

    For more information regarding how to handle copy/paste events with jQuery please check this thread.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 14 Jul 2014 in reply to Alexander Valchev Link to this post

    $("body").on("paste", ".k-editor-textarea", function(e) {     console.log(e); });

    So this actually works for you?  I haven't been able to get this working in IE11 and I assumed it's an IFRAME thing.
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Jul 2014 Link to this post

    Hi Bob,

    You can make the following test.

    1. Go to http://demos.telerik.com/kendo-ui/editor/all-tools

    2. Execute the following in the browser's Javascript console.

    $("body").on("paste", ".k-editor-textarea", function(e) {
        alert("paste");
    });

    3. Open the Editor's "View HTML" tool.

    4. Paste something in the textarea. An alert will pop.

    Regards,
    Dimo
    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