Declined
Last Updated: 27 Apr 2021 11:18 by ADMIN
Erik
Created on: 26 Apr 2021 09:18
Category: UI for ASP.NET AJAX
Type: Bug Report
0
Cut and paste inconsisten between Firefox and Chrome

Inconsistent behavior between Firefox and Chrome (other browser not tested) when cutting and pasting content within the editor.

We have more advanced cases but I tried to simplify the case here as much as I could.

 

This has been tested on you demo page at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

I have tested using Firefox 88 and Chrome 90, both on Widows 10.

 

Reproduce:
Paste the following content in html-mode:

<p>Lorem ipsum dolor sit amet.</p>
<p>Ut enim ad minim veniam.</p>
<figure>
  <img src="../../images/attractions_LosGigantes.png" alt="Test">
  <figcaption>Image text</figcaption>
</figure>
<p>Excepteur sint occaecat cupidatat non proident.</p>

Switch to designmode.

Mark text, including the dot after veniam until before the first character in Excepteur

Cut

(First difference noted here)

Goto after Lorum Ipsum
Paste

(Second difference here)

 

First difference:

In Chrome you get:

<p>Lorem ipsum dolor sit amet.</p>
<p>Ut enim ad minim veniamExcepteur sint occaecat cupidatat non proident.</p>

In Firefox you get:

<p>Lorem ipsum dolor sit amet.</p>
<p>Ut enim ad minim veniam</p>
<p>Excepteur sint occaecat cupidatat non proident.</p>



Second difference:

Chrome:
<p>Lorem ipsum</p>
<p>.</p>
<p><figure><img src="https://demos.telerik.com/aspnet-ajax/editor/images/attractions_LosGigantes.png" alt="Test" /><figcaption>Image text</figcaption>
<div>&nbsp;</div>
</figure> dolor sit amet.</p>
<p>Ut enim ad minim veniamExcepteur sint occaecat cupidatat non proident.</p>

Firefox:
<p>Lorem ipsum.
<figure>
<img src="https://demos.telerik.com/aspnet-ajax/editor/images/attractions_LosGigantes.png" alt="Test" />
<figcaption>Image text</figcaption>
</figure>
dolor sit amet.</p>
<p>Ut enim ad minim veniam</p>
<p>Excepteur sint occaecat cupidatat non proident.</p>

 

1 comment
ADMIN
Rumen
Posted on: 27 Apr 2021 11:18

Hi Erik,

RadEditor content area is an editable div/iframe (see ContentAreaMode property) which uses the underlying rich text editing engine to render the content and some of its functions. What is copied with the Copy command and what is coming from the clipboard is controlled by the OS and the browser and my advice is to test the same scenario with a standard editable div/iframe element as in the following dojo project - http://dojo.telerik.com/@nlazarov/IFIPAR. You can find more in the RadEditor documentation: https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/pasting-content/overview#radeditor-and-the-browser-clipboard

What you can do is to attach to the OnClientPasteHtml event of RadEditor, check for the Paste command execution and modify the pasted content as per your requirements. 

 

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/.