When pasting from Word, the clean-up in Ckeditor 4 is generally excellent. However I have noticed two things, when the Word doc is not ideally formatted:

1. If a Word doc contains "  " this is replicated as is in Ckeditor. I want to simple insert "" on paste.

2. Pasting from Word often creates "<p>&nbsp;</p>". I have partly fixed this by using fillEmptyBlocks = false, which means I am left with "<p></p>".

I'm not sure how I can add an additional javascript function to extend Ckeditor's functionality to tackle these. Ckeditor 4 offers an Advanced Content Filter, but the documentation is frankly baffling to me and it's not clear if it can do the above.

This is my current CKeditor config.js:

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = <removed>;
    config.format_tags = 'p;h2;h3;div';
    config.contentsCss = '/css/site.min.css';
    config.height = 500;
    config.removePlugins = 'elementspath';
    config.resize_enabled = false;
    config.allowedContent = true;
    config.fillEmptyBlocks = false;
};

I have attempted this Ckeditor 3 style approach, which doesn't appear to work. evt.data.dataValue does contain the HTML from the editor though.

CKEDITOR.on('instanceReady', function(ev) {
  ev.editor.on('paste', function(evt) { 
    evt.data.dataValue = evt.data.dataValue.replace(' ','');
    evt.data.dataValue = evt.data.dataValue.replace('<p></p>;','');
    console.log(evt.data.dataValue);
  }, null, null, 9);
});

Answer must include making this work via some form of Ckeditor on paste event, function that interacts with Ckeditor or via ACF. Please don't suggest doing this in PHP on-save, I regard that as a last resort and would be able to do that myself.

Thanks!

When pasting from Word, the clean-up in Ckeditor 4 is generally excellent. However I have noticed two things, when the Word doc is not ideally formatted:

1. If a Word doc contains "  " this is replicated as is in Ckeditor. I want to simple insert "" on paste.

2. Pasting from Word often creates "<p>&nbsp;</p>". I have partly fixed this by using fillEmptyBlocks = false, which means I am left with "<p></p>".

I'm not sure how I can add an additional javascript function to extend Ckeditor's functionality to tackle these. Ckeditor 4 offers an Advanced Content Filter, but the documentation is frankly baffling to me and it's not clear if it can do the above.

This is my current CKeditor config.js:

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = <removed>;
    config.format_tags = 'p;h2;h3;div';
    config.contentsCss = '/css/site.min.css';
    config.height = 500;
    config.removePlugins = 'elementspath';
    config.resize_enabled = false;
    config.allowedContent = true;
    config.fillEmptyBlocks = false;
};

I have attempted this Ckeditor 3 style approach, which doesn't appear to work. evt.data.dataValue does contain the HTML from the editor though.

CKEDITOR.on('instanceReady', function(ev) {
  ev.editor.on('paste', function(evt) { 
    evt.data.dataValue = evt.data.dataValue.replace(' ','');
    evt.data.dataValue = evt.data.dataValue.replace('<p></p>;','');
    console.log(evt.data.dataValue);
  }, null, null, 9);
});

Answer must include making this work via some form of Ckeditor on paste event, function that interacts with Ckeditor or via ACF. Please don't suggest doing this in PHP on-save, I regard that as a last resort and would be able to do that myself.

Thanks!

• javascript
• ckeditor

• Do you mean that the actual text in Word is like "This is an example of an entity:  "? In that case, it would be correct to keep it as text. Or when pasting does   get generated into the content? For me, I handle this with config.removePlugins = 'elementspath, entities'; but that's just because I really don't want any entities ever, which might not work for you. – Joel Peltonen Commented Jul 4, 2013 at 8:11
• The Word docs sometimes contain nsbp (that look like spaces) which when pasted appear as   in Ckeditor source view. While Word is at fault really, I'm just regarding this as a custom clean-up stage at the Ckeditor paste stage. – Space Commented Jul 4, 2013 at 9:49
• In that case wouldn't   actually be correct? If you don't want entities, I again would just remove the entities plugin entirely. I save my content as Unicode XML, so for me entities actually break the content pletely. As far as I know, ACF can't help you here as it doesn't touch content and   there is part of the content. – Joel Peltonen Commented Jul 4, 2013 at 11:30
• Just gave removing entities plugin a go. Instead of getting nbsp it is just a blank nbsp char but this still means I have gaps between some words this wide ` ` instead of ` `. The root cause is Word docs where I think multiple pastings have at some point caused justified text to been converted to multiple nbsps along side a space. That is totally a Word issue, but I want to intercept and fix on paste into Ckeditor. Basically I just want to strip them all out on paste and not have any nbsp whether entitised or not. – Space Commented Jul 4, 2013 at 14:31

2 Answers 2

Figured it out after a lot of debugging. The approach in the question was actually spot on, but I mistakenly assumed the JS replace function did a global replace. So what was happening was only the first instances were being removed. Here is the amended version that uses regex style syntax, replacing globally:

CKEDITOR.on('instanceReady', function(ev) {
  ev.editor.on('paste', function(evt) { 
    evt.data.dataValue = evt.data.dataValue.replace(/ /g,'');
    evt.data.dataValue = evt.data.dataValue.replace(/<p><\/p>/g,'');
    console.log(evt.data.dataValue);
  }, null, null, 9);
});

I am using CKEditor 4.7 and in my case when I paste from Gmail, it adds <p><br></p> in final result. which show as a big white space in editor. to solve this I used below CSS.

p:not(:first-child):empty {
    display:none
}
p:not(:first-child) > br {
    display:none
}