HTML cleanup on paste in Pimcore's WYSIWYG editor

Create a new file ckeditor_config.js in a folder filed under the web-root directory, in this example under /static/js/editmode/ckeditor/config.js.

Besides we need the Clipboard and the Notification Plugin (a dependency of clipboard plugin). You need to download and extract these files to /static/js/editmode/ckeditor/ directory.

Now add the following lines into ckeditor_config.js file:

CKEDITOR.plugins.addExternal( 'clipboard', '/static/js/editmode/ckeditor/clipboard/' );
CKEDITOR.plugins.addExternal( 'notification', '/static/js/editmode/ckeditor/notification/' );

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'notification,clipboard';
    config.pasteFilter = 'plain-text';
}

In addition to the clipboard plugin, what we need to interact with the system clipboard, we use an option called pasteFilter. The magic happens if we use "plain-text" as value. The filter plugin offers some other possibilities to filter the content. Further information can you find in the documentation.

Now we have to tell Pimcore where to find the custom config file as shown below:

{{  pimcore_wysiwyg("specialContent", {
        "customConfig": "/static/js/editmode/ckeditor/config.js"
    }) 
}}

<?= $this->wysiwyg("specialContent", [
    "customConfig" => "/static/js/editmode/ckeditor/config.js"
]); ?>

Photo: unsplash.com