Editor is stripping tags

10 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
    8407 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. 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
  4. Dimo
    Admin
    Dimo avatar
    8407 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!
  5. 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?
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2887 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!
  7. 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.
  8. Dimo
    Admin
    Dimo avatar
    8407 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!
     
  9. harsh
    harsh avatar
    1 posts
    Member since:
    May 2017

    Posted 15 May Link to this post

    Hi,

    We are using Kendo editor. Whenever we add full HTML code in pop up, it just removes (<html>,<body> tags.) and anything in areas like <head> stays around. We would like to provide full HTML code with <HTML>,<body> tags in Kendo editor with Pop up to our customers.
    Is there any way to tell the editor not to strip these tags?

    Thanks,

    Harsh

  10. Dimo
    Admin
    Dimo avatar
    8407 posts

    Posted 15 May Link to this post

    Hello Harsh,

    As a WYSIWYG component, the Kendo UI Editor is designed to work with HTML elements that can reside in the <body> of an HTML document. For example, if the Editor is in inline mode, its container is a <div>, so it cannot contain <html>, <body> and <head> tags, as determined by web standards. That's why these tags are stripped.

    My suggestion is to provide the application users with two HTML snippets to copy-paste: one with the <body> content (pasted into the Kendo UI Editor), and one with the <head> content, which should be pasted in a plain <textarea>. Then, merge the two snippets server-side.

    Regards,
    Dimo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top