CODEWITHSUNDEEP
ckeditor
lauren
lauren

Reputation: 47

ckeditor 'paste from Word': retain font color if not black

I'd like to get rid of most font styles as I paste in from Word, but have a way to retain font colours if they aren't the default (black). This way, if the text in my Word doc has a line of red text, I won't lose that.

Config options for the PasteFromWord plugin include a way to retain Word's font styles as they are pasted in (pasteFromWordRemoveFontStyles = false), but this opens the gates to whole lot of font cruft. All I want to let through is any non-default font color.

Retaining font sizes can be largely dealt with in Word by using H1-H6 styles there, but I don't see how I could have a style in Word for red text and have that paste over to CKEditor. Any help or ideas appreciated. Thanks.

Upvotes: 0

Views: 966

Answers (1)

Atzmon
Atzmon

Reputation: 1318

Here's a little hack to preserve the color styles by modifying the Paste From Word plugin.

First, turn on the style filter in your ckeditor config:

config.pasteFromWordRemoveFontStyles = true;

Now, Under the "ckeditor/plugins/pastefromword" folder, open "default.js".

Find this code section (line 956 at the time of writing):

// Assume MS-Word mostly carry font related styles on <span>,
// adapting them to editor's convention.
if ( styleText ) {
    attrs.style = stylesFilter( [
        // Drop 'inline-height' style which make lines overlapping.
        [ 'line-height' ],
        [ ( /^font-family$/ ), null, !removeFontStyles ? styleMigrateFilter( config.font_style, 'family' ) : null ],
        [ ( /^font-size$/ ), null, !removeFontStyles ? styleMigrateFilter( config.fontSize_style, 'size' ) : null ],
        [ ( /^color$/ ), null, !removeFontStyles ? styleMigrateFilter( config.colorButton_foreStyle, 'color' ) : null ],
        [ ( /^background-color$/ ), null, !removeFontStyles ? styleMigrateFilter( config.colorButton_backStyle, 'color' ) : null ]
    ] )( styleText, element ) || '';
}

In the line that starts with /^color$/ change !removeFontStyles to removeFontStyles so the new line is now:

[ ( /^color$/ ), null, removeFontStyles ? styleMigrateFilter( config.colorButton_foreStyle, 'color' ) : null ],

Clear your browser cache before testing.

Upvotes: 2

Related Questions