Opened 4 years ago

Closed 4 years ago

#12951 closed Bug (fixed)

Extra span is added on paste

Reported by: Irina Owned by:
Priority: Normal Milestone:
Component: General Version: 3.6.6
Keywords: IBM Cc: Satya Minnekanti


  1. Open replacebyclass sample
  2. Clear all content
  3. Insert following content in Source tab:
<p dir="ltr"><span style="font-size: 16px; font-family: arial, helvetica,sans-serif; color: #ff0000">test abc</span></p>    
  1. Switch back to Rich Text editing
  2. Copy content and paste it on the new line

Result: multiple spans inserted in IE and Chrome. This can be reproduced in FF as well by repeating 'step 5' few times.

Note: The issue is not reproducible since version 4.0 when clipboard plugin was updated.

Attachments (1)

ff_issue.avi (2.3 MB) - added by Irina 4 years ago.
FF issue

Change History (6)

comment:1 Changed 4 years ago by Satya Minnekanti

We have a customer PMR for this issue. we need a patch for this fix on 3.6.x versions & our customer can't upgrade to 4.0.

comment:2 Changed 4 years ago by Wiktor Walc

We are looking into this. Unfortunately on both Chrome and Firefox we cannot reproduce it and it looks like 4.0 did not resolve the issue completely for IE8, pasting in IE8/XP started working correctly in 4.4.4 for all scenarios that I tested (due to #11970).

Could you provide a complete set of steps to reproduce it on Firefox / Chrome (and the case that you check on IE) for the following website: ?

I wan to be sure that we're testing the very same version, without any modifications or configuration changes.

When providing the steps to reproduce, please describe in details:

  • how do you select the content (e.g. set the cursor into "te^st abc", press Ctrl+A and Ctrl+C),
  • how do you move the cursor to the end of the text (e.g. press END key),
  • how do you paste content (Ctrl+V?) etc.

There is a big chance that the fix will be impossible to port, but before giving up we want to investigate the available options.

Last edited 4 years ago by Wiktor Walc (previous) (diff)

comment:3 Changed 4 years ago by Irina

To Reproduce this issue on FF:

  1. Insert the content in Source tab
  2. Switch back to Rich Text editing
  3. Select content with the mouse
  4. Press Ctrl+C
  5. Click at the end of the content, e.g. place the cursor after 'abc'
  6. Press Enter key
  7. Press Ctrl+V
  8. Repeat steps 6 and 7 few times

I was not able to reproduce this issue in Chrome anymore after clearing the cache, only FF and IE. IE8 and 9 were used for testing to reproduce the issue.

Note: In IE only 1 extra span is inserted

<p dir="ltr">                                                           
 <span style="font-size: 16px; font-family: arial, helvetica, sans-serif; color: #ff0000"><span style="font-size: 16px; font-family:arial, helvetica, sans-serif; color: #ff0000">test abc</span></span>

Changed 4 years ago by Irina

Attachment: ff_issue.avi added

FF issue

comment:4 Changed 4 years ago by Wiktor Walc

Thank you, confirmed on FF as well, we're investigating possible options now.

comment:5 Changed 4 years ago by Piotrek Koszuliński

Resolution: fixed
Status: newclosed

Being very careful I was able to reproduce the issue on FF. It is important that only an inline content is copied (so you can't select too much) and that you place the caret at the end of the line, but still inside the <span>.

Anyway, the difference between CKEditor 3.6.6 and CKEditor 4.0.0 is caused by the changes that we made in the editor.insertHtml method. In CKEditor 3 it was based on the native insertHTML command which had a lot of bugs on older IEs, many undesirable results and we couldn't control it at all. To solve this we implemented it from scratch (its code is located in editable.js). It required a lot of work (this method's tests take few seconds to run) because there is a huge number of cases to cover, but it paid off. With this single change we fixed dozens of bugs that were reported for pasting.

Unfortunately, because of the size of this feature it cannot be easily ported to CKEditor 3.6.6 without significant changes to it (e.g. in CKEditor 3 the CKEDITOR.editable does not exist) and many methods are missing so they would need to be ported as well. Plus the huge tests.

I feel, though, that more reasonable approach would be to use the editor#paste event to try to don't let the insertHTML command to nest those span tags. One of the idea could be to:

  1. Listen to editor#paste.
  2. Retrieving selection, splitting all inline elements in which its placed and setting it between them.

In other words - the pasted content will be inserted between those elements, so nesting will be avoided. This can be pretty easy to implement, but I'm not sure about undo manager and about some strange cases that selection modifications can create. Even though, this is what I would check first.

Another idea could be to filter the data being pasted. This is more complicated but it should be most precise. The ideas is to:

  1. Listen to editor#paste to catch the content before it's pasted.
  2. Parsing the pasted content (it's available in
  3. Checking if it contains block elements. If it does, I think that it's ok, so do nothing. If it doesn't though, and it contains inline elements like those spans, it must be filtered.
  4. Applying CKEDITOR.htmlParser.filter to that content or filtering the content in some other way. The goal is to remove every inline tag in which selection is placed at that moment.

In other words - the content being pasted should be striped from all tags that are already applied in the editor.

As for the ticket - there's no real solution for CKEditor 3 and this issue is fixed in CKEditor 4, so I'm closing it.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy