Thursday, 25 April 2013

Paste content into SharePoint with no formatting

Hello Again,

These days I am working heavily into SharePoint Ribbon customization. If you have not read my previous blog on this, I would recommend you to read Previous Ribbon Blog before reading this one.

SharePoint 2010 brings the new evolution in user interface and have brought common functionalities into same page by introducing the Ribbon concept.

In SharePoint user is allowed to copy content from various sources like email, office applications like word, excel  and paste into SharePoint.

By default there are two ways to paste content into SharePoint from ribbon.


1. Paste (paste content with styles and formatting)
2. Paste palintext (paste content without styles but keeps the formatting)


However; pasting the content even as Plain text from word and other sources into SharePoint  introduces breaks and other markup issues in Html.

Paste  (format:break line and color:Blue)
Add-PSSnapIn Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue | out-null
Write-Host "Hello All"

Paste Plaintext (only format:break line)
Add-PSSnapIn Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue | out-null
Write-Host "Hello All"

I wanted to achive something shown below.

Paste with no formatting (no format no color)
Add-PSSnapIn Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue | out-null Write-Host "Hello All"



I have created a sandbox solution and added element.xml as shown below.
<?xml version="1.0" encoding="UTF-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Location="CommandUI.Ribbon" Id="AddNewPaste">
-<CommandUIExtension><CommandUIDefinitions>
<!--Add Paste with no formatting to the Paste Group -->
<CommandUIDefinition Location="Ribbon.EditingTools.CPEditTab.Clipboard.Paste.Menu.Paste.Controls._children">
<Button Id="Ribbon.Inset.CustomGroup.Paste"
Alt="Paste as plain text with no formatting"
ToolTipTitle="Paste as plain text with no formatting"
ToolTipDescription="Paste the contents of clipboard as plain text with no formatting."
Sequence="30" LabelText="Paste with no formatting"
Image16by16="_layouts/images/Paste.gif"
Image32by32="_layouts/images/PasteHH.png"
TemplateAlias="o1" Command="Ribbon.Paste"/>
</CommandUIDefinition></CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="Ribbon.Paste" CommandAction="javascript:pasteAsPlainTextWithNoFormatting();"/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>
view raw gistfile1.xml hosted with ❤ by GitHub
On click of this flyout anchor menu I have called a javascript function as defined in commandaction attribute in the command handler.
function pasteAsPlainTextWithNoFormatting() {
var cursorLocation = RTE.Cursor.get_range();
var copiedData = window.self.clipboardData.getData('Text'); //Copy content from clipboard
var copiedDataSpan = document.createElement('span');
copiedDataSpan.setAttribute('id', 'copiedData');
copiedDataSpan.innerText = copiedData; //add clipboard content to new span element
cursorLocation.deleteContent();
cursorLocation.insertBefore(copiedDataSpan); //add the content with the span element at the cursor location
var rawContent = $ribbon('#copiedData').html(); //find that span
var cleanContent = rawContent.replace(/<[^>]*>/gi, ''); //remove all the formatting
$ribbon('#copiedData').html(cleanContent);//add the content back
RTE.RteUtility.removeNodeAndKeepChildNodes(copiedDataSpan);//remove the span by keeping the data
RTE.Cursor.update(); //update the cursor position
}
view raw gistfile1.js hosted with ❤ by GitHub


Hope you find this useful.
Cheers,
Isha Jain

No comments:

Post a Comment