Pasting from CKEditor to CKEditor pastes unwanted styles

I seem to have a problem I can't seem to figure out. Sometimes when I paste text from an instance of the CKEditor into a different instance of the CKEditor, the pasted code includes styles that were not part of the original CKEditor's code.

For example, I made a quick link to an anchor in Editor 1:

<p><a href="#General" target="_blank">Test</a></p>

When I copy it from the Visual view (not source) and paste it into Editor 2's Visual View, I get the following code:

<p><a href="#General" style="border-style: initial; border-color: initial; font: inherit; " target="_blank">Test</a></p>

Can anyone explain this behavior? I think that using the "Paste from Word" function may be a 'work around', but it seems strange that the CKEditor can't paste to and from itself without error.

Thu, 03/08/2012 - 09:31

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Pasting from CKEditor to CKEditor pastes unwanted styles

That's due to the browser that you are using and the styles in your stylesheet.
Are you using Chrome or Safari by any chance?

Thu, 03/08/2012 - 15:59

ekazda

Joined: 15/04/2008

Posts: 33

Re: Pasting from CKEditor to CKEditor pastes unwanted styles

alfonsoml wrote:That's due to the browser that you are using and the styles in your stylesheet.
Are you using Chrome or Safari by any chance?

Yes, I am using Chrome. However, my client showed this to me, and they are using IE 8.

*UPDATE*
I tested this internally in IE9, IE8 mode, IE7 mode, Firefox, Chrome & Safari. Your assumption is correct. This does not occur in IE (contrary to what my client said) or Firefire. It does happen in Chrome and Safari. And boy, I thought Chrome was bad!

<img alt="" class="right" src="/uploads/images/Resources/Chrysanthemum.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 12px; font: inherit; vertical-align: baseline; cursor: default; float: right; width: 100px; height: 75px; " />

Thu, 03/08/2012 - 16:04

ekazda

Joined: 15/04/2008

Posts: 33

Re: Pasting from CKEditor to CKEditor pastes unwanted styles

Another example. I created the following image with a class:

<img alt="" class="right" src="/uploads/images/Resources/Chrysanthemum.jpg" style="width: 100px; height: 75px; " />

Upon copy/paste, I get the following:

<img alt="" src="/uploads/images/Resources/Chrysanthemum.jpg" style="margin-bottom: 10px; border-style: initial; border-color: initial; float: right; width: 100px; height: 75px; " />

My class is completely lost, tons of garbage is added, and some styles covered by the class are even lost!

This issue is a NIGHTMARE for my clients, that have no knowledge of HTML/CSS and are borrowing elements from instances of the CKEditor for use on other pages. Is there a reason that the copy function within the CKEditor doesn't simply copy the code of the selected element???

Thu, 03/08/2012 - 19:16

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Pasting from CKEditor to CKEditor pastes unwanted styles

The copy and paste operations are handled by the browser and in webkit they have decided that it's better to put inline styles instead of using the original HTML

If you or your users don't like that behavior you should ask yourselves what good is a browser that doesn't behave like you want.

Thu, 03/08/2012 - 20:37

ekazda

Joined: 15/04/2008

Posts: 33

Re: Pasting from CKEditor to CKEditor pastes unwanted styles

alfonsoml wrote:...you should ask yourselves what good is a browser that doesn't behave like you want.