Pasting text into RadEditor adds container html tags and inline styles

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 11 Nov 2024 15:03 by ADMIN

Alan

Created on: 30 Mar 2023 15:17

Category: UI for ASP.NET AJAX

Type: Bug Report

Pasting text into RadEditor adds container html tags and inline styles

Pasting plain text content from notepad or other text editor into the RadEditor control (design view) results in container HTML tags adding to the content and inline styles that make the text unreadable.

Content pasted:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut placerat orci nulla pellentesque dignissim enim sit. Diam quam nulla porttitor massa id neque. Ipsum suspendisse ultrices gravida dictum fusce ut. Sed odio morbi quis commodo odio aenean. Sed faucibus turpis in eu mi bibendum neque egestas congue. Sed pulvinar proin gravida hendrerit. Cras semper auctor neque vitae tempus. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Quis vel eros donec ac odio tempor. Tellus in metus vulputate eu scelerisque felis imperdiet proin. Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Neque viverra justo nec ultrices.

Result in RadEditor:

<div class="telerik_paste_container" style="border-width: 0px; position: absolute; overflow: hidden; margin: 0px; padding: 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut placerat orci nulla pellentesque dignissim enim sit. Diam quam nulla porttitor massa id neque. Ipsum suspendisse ultrices gravida dictum fusce ut. Sed odio morbi quis commodo odio aenean. Sed faucibus turpis in eu mi bibendum neque egestas congue. Sed pulvinar proin gravida hendrerit. Cras semper auctor neque vitae tempus. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Quis vel eros donec ac odio tempor. Tellus in metus vulputate eu scelerisque felis imperdiet proin. Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Neque viverra justo nec ultrices.</div>

See accompanying screenshots.

Attached Files:

2 comments

ADMIN

Rumen

Posted on: 11 Nov 2024 15:03

The item status has been changed to complete since the reported issue is not reproducible with the latest 2024 Q3 version.

ADMIN

Rumen

Posted on: 30 Mar 2023 20:57

Hi Alan,

I tried to reproduce the reported problem by copying and pasting plain text from notepad to RadEditor in its overview demo but without success.

I am aware of a similar issue fixed in the past logged in this feedback item. You can try its workaround to see whether the problem will be solved on your side.

Some info about the scenario - the paste container is used for getting the pasted content and stripping its content according to the editor's StripFormattingOptions. The paste functionality deletes it when pasting is done. It looks like that in some specific cases paste element still exists in the content.

You can prevent inserting this DIV by setting editor's property StripFormattingOptions to NoneSupressCleanMessage. This will also disable stripping the content. Additional information about pasting can be found in the Pasting Content Overview article.

Another solution is to attach to the OnClientPasteHtml client event, check for the Paste command and strip any unwanted tags from the args.get_value() method prior to the pasting via the args.set_value() method.

You can also use regular expressions to strip the paste container tags in the OnClientSubmit client event:

var htmlResult = editor.get_html(true);
htmlResult = htmlResult .replace(/<div[^>]+class=\"telerik_paste_container\"[^>]*><br[/\s]*><\/div>/gi, "<br/>");
htmlResult = htmlResult .replace(/<div[^>]+class=\"telerik_paste_container\"[^>]*>(.*?)<\/div>/gi, "$1<br/>");
htmlResult  = htmlResult .replace(/<br[/\s]*>$/i, "");

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.