CODEWITHSUNDEEP
ckeditorckeditor4.x
Prasad
Prasad

Reputation: 59491

CKEditor 4.5.1 - Avoid removing style attributes while pasting into different page and browser

We are using CKEditor version 4.5.1 and there is an issue when pasting the table with background and inline styles.

Below is the code which we are trying to copy & paste:

<table border="0" cellpadding="50" cellspacing="0" style="border: 3px solid #545454;" width="100%">
<tbody>
    <tr>
        <td style="background:#000">
        <table border="0" cellpadding="25" cellspacing="0" style="background: #fff; border: 2px solid #FF9900;" width="100%">
            <tbody>
                <tr>
                    <td>Test Table</td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>

Editor1.jpg

This works fine when:

  1. Copy & Paste from chrome to chrome same Page only.
  2. chrome to FF - Works only when right click and paste
  3. chrome to IE, but it adds some inline styles like border-image: none;
  4. Firefox to FF, FF to IE.
  5. IE to IE.

It doesn't work when:

  1. Copying from chrome and paste it to another page of chrome, Chrome to FF, chrome to IE
  2. FF to chrome
  3. IE to chrome, IE to FF.

IE = Internet Explorer, FF = Firefox

This is also reproducible in the Samples Page(ckeditor\samples\index.html) downloaded.

Link for my build-config.js.

Below are the CKEditor config settings:

 CKEDITOR.disableAutoInline = true;
    CKEDITOR.config.height = 100;
    CKEDITOR.config.width = '15%';
    CKEDITOR.config.autoParagraph = false;
    CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
    CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P;
    CKEDITOR.config.allowedContent = true;
    CKEDITOR.config.protectedSource.push(/<(script)[^>]*>.*<\/script>/ig);
    CKEDITOR.config.extraAllowedContent = 'script(*)[*]{*};';
    CKEDITOR.config.title = false;

Please let me know how to handle this.

Upvotes: 0

Views: 3636

Answers (1)

Reinmar
Reinmar

Reputation: 22023

Among many features, CKEditor 4.5 introduced a special paste filter (working independently from the ACF). It is a useful feature itself, but it was crucial because of Chrome's awful clipboard integration. In general, Blink and Webkit based browsers put into the clipboard HTML full of inline styles (inexistent in the original HTML). And CKEditor must later clean this mess up, hence the need for this filter. The good thing is that it must be applied only when content CKEditor was not able to put the copied content into the clipboard itself. This is another thing that CKEditor 4.5 introduces – it handles copying and cutting itself whenever browser allows.

I wrote documentation of the config.pasteFilter option myself, so let me quote part of what I wrote:

Note that the paste filter is applied only to external data. There are three data sources:

  • copied and pasted in the same editor (internal),
  • copied from one editor and pasted into another (cross-editor),
  • coming from all other sources like websites, MS Word, etc. (external).

If Advanced Content Filter is not disabled, then it will also be applied to pasted and dropped data. The paste filter job is to "normalize" external data which often needs to be handled differently than content produced by the editor.

This setting defaults to 'semantic-content' in Chrome, Opera and Safari (all Blink and Webkit based browsers) due to messy HTML which these browsers keep in the clipboard. In other browsers it defaults to null.

If you compare this documentation with the results that you have you should see a match. So the solution will be to extend config.pasteFilter settings, what you can even do dynamically, by accessing editor.pasteFilter:

editor.pasteFilter.allow( 'table{background*,border*}' );

Note: I used * to match with all background-* and border-* properties, because you cannot tell what browsers will put into the clipboard. You can expect everything there.

Upvotes: 1

Related Questions