Tuesday, December 4, 2018

Remove format on paste in SXA Experience Editor

The experience editor uses the contenteditable feature. To remove formatting on paste you cannot use the Telerik RTE feature, because that one isn't used.



To solve, I've created a new Editing Theme in the medialibrary\Base Themes:



Upload the editor.js file containing:

window.$xa(document).ready(function () {
    $('[contenteditable]').on('paste', function(e) {
     e.preventDefault();
     var text = '';
     if (e.clipboardData || e.originalEvent.clipboardData) {
       text = (e.originalEvent || e).clipboardData.getData('text/plain');
     } else if (window.clipboardData) {
       text = window.clipboardData.getData('Text');
     }
     if (document.queryCommandSupported('insertText')) {
       document.execCommand('insertText', false, text);
     } else {
       document.execCommand('paste', false, text);
     }
 });
});

Then add My Editing Theme to the Editing Theme of your site:




Now you can do paste from word without keeping the content. Happy content editors, happy developers!

Cheers, Luuk