This is a migrated thread and some comments may be shown as answers.

Editor is stripping tags

9 Answers 722 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 15 Feb 2013, 07:35 PM
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

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Feb 2013, 10:29 AM
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!
0
Scott
Top achievements
Rank 1
answered on 19 Feb 2013, 05:20 PM
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
0
Dimo
Telerik team
answered on 20 Feb 2013, 08:57 AM
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!
0
Scott
Top achievements
Rank 1
answered on 20 Feb 2013, 11:38 PM
Is there an event for pasting into the HTML edit window?
0
Alexander Valchev
Telerik team
answered on 22 Feb 2013, 05:14 PM
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!
0
Bob
Top achievements
Rank 1
answered on 14 Jul 2014, 03:35 PM
$("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.
0
Dimo
Telerik team
answered on 15 Jul 2014, 03:28 PM
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!
 
0
harsh
Top achievements
Rank 1
answered on 15 May 2017, 06:06 AM

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

0
Dimo
Telerik team
answered on 15 May 2017, 08:42 AM
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.
Tags
Editor
Asked by
Scott
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Scott
Top achievements
Rank 1
Alexander Valchev
Telerik team
Bob
Top achievements
Rank 1
harsh
Top achievements
Rank 1
Share this question
or