Sitecore

Pasting ‘CLEAN’ text into Single line text fields

We come across a lot of customers complaining about pasting text into Sitecore fields. When pasting text from e.g Outlook or any other Microsoft applications, you usually get a lot of MSO styling with your text:

<p class="MsoNormal" style="background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">
<span style="font-size:10.0pt;font-family:"Arial",sans-serif">
Copied text from Outlook
</span> 
<o:p></o:p> 
</p>

When using the Rich Text Editor, you get the option to “clean” the pasted text. However, this is not the case for Single Line Text fields in Sitecore. Getting styling saved have the potential to break Sitecore Experience editor or any other custom code depending on the usage of the text field.

To clean the pasted text, you can simply implement a javascript on your layout and it will be applied to your fields:

    function handlePaste(e) {
        var clipboardData, pastedData;
 
        // Stop data being pasted into div
        e.stopPropagation();
        e.preventDefault();
 
        // Get pasted data via clipboard API
        clipboardData = e.clipboardData || window.clipboardData;
        pastedContent = clipboardData.getData('Text');
 
        // Execute paste with clean data
        document.execCommand('insertText', false, pastedContent);
    }
 
    document.addEventListener('paste', handlePaste);

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s