Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor: PasteFromWord ignores pasteFilter

In CKEditor 4.6.2 (currently bundled in Drupal 8) ACF is disabled by default, to make sure some of the special plugins work correctly. So for the record: I do not want to enable ACF and am not able to use allowedContent or disallowedContent. I'm trying to prevent some elements to be injected on paste from Word (like h1 and p[styles]).

To accomplish this, I'm trying to add these to pasteFilter which works perfectly on non-Word-pasted content, though when pasting from Word the pasteFilter seems to be ignored? Is this a bug?

So, how can I:

  1. Keep ACF disabled - In favor of special Drupal elements
  2. Keep pastefromword enabled - To detect special Word styling like indentation and lists.
  3. Add additional filtering to all (including from Word) pastings - To remove some elements and attributes like h1, style="font-family: Verdana" etc...
like image 303
Ambidex Avatar asked Aug 04 '17 08:08

Ambidex


1 Answers

Handling content pasted from Word requires some serious amount of markup processing to transform it into clean, semantic content. The paste from Word filter is very specific covering many edge cases (especially with nested lists). The reason why pasting from Word has its own filter and does not reuse ACF rules is the fact that it may cause some conflicts - it is described in this issue.

As for now there is now out-of-the-box approach to add additional filtering to content pasted from Word. However, you may utilise afterPasteFromWord event, to filter the pasted data like:

var editor = CKEDITOR.replace( 'editor1' );

editor.on( 'afterPasteFromWord', function( evt ) {
    var filter = editor.activeFilter, // Use activeFilter so it reflects ACF settings.
    // var filter = new CKEDITOR.filter( 'p b' ), // Use custom new filter.
        fragment = CKEDITOR.htmlParser.fragment.fromHtml( evt.data.dataValue ),
        writer = new CKEDITOR.htmlParser.basicWriter();

    filter.applyTo( fragment );
    fragment.writeHtml( writer );
    evt.data.dataValue = writer.getHtml();
} );

Please see this codepen demo.

You may also refer to official docs on CKEDITOR.filter.applyTo and CKEDITOR.editor.activeProperty.

like image 58
f1ames Avatar answered Nov 09 '22 05:11

f1ames