August 12, 2014

Paste From Word Plugin:UI Extension

In Tridion 2011 the paste-special feature doesn't work perfectly. The ask was to copy/paste articles directly from the Microsoft Word, as Tridion OOB feature was not working so client's whole process was impacted. 

so we come up with this plugin  Paste Special Cross Browser Extension  which helped them to copy paste from word without those problematic word tags. it was written on top of  excellent CKeditor (without reinventing :) )
Plugin Code Structure:


  • CKeditor
  • Client
  • Config

With this plugin it is possible to paste content from Microsoft Word and maintain original content formatting and also paste as a plain text. The plugin adds the Paste from Word and Paste as Text button which makes it possible to paste clipboard data. This Paste Special Cross Browser Extension removes the existing Paste Special Functionality from the CME/Experience Manager and replaces it with a cross browser solution.

CKeditor: Contains CKeditor’s java script, CSS and HTML files (PasteAsText and PasteFromWord)  

Client: Contains PasteSpecialFormatArea javascript file that is the main javascript file where we define the command for the UI extension buttons.

For e.g.

Extensions.PasteAsText.prototype.isAvailable = function PasteAsText$isAvailable(target){              
    return true;
};
Extensions.PasteAsText.prototype.isEnabled = function PasteAsText$isEnabled(target){
    return true;
};

Extensions.PasteAsText.prototype._execute = function
PasteAsText$_execute(target)
{
popUpData="";
var host = window.location.hostname;
var newwindow = window.open("http://"+host+"/WebUI/Editors/PasteSpecialFormatArea/ckeditor/PasteAsText.html",'FormatArea','height=356,width=750');
     
var unloadFunc = function () { setEditorData(); };
if (newwindow) { // null if a pop-up blocker does not create the window
if (newwindow.addEventListener) {
newwindow.addEventListener('unload', unloadFunc, false);
} else {
newwindow.attachEvent('onunload', unloadFunc);
}
}

function setEditorData()
{
if(popUpData != "")
{
target.editor.applyHTML(popUpData);
}
}
};

function setPopupText(data)
{
popUpData = data;
}


Config: Contains the config file that has the configuration for the UI extension button and also all the dependency files path.

Deployment
  
1.     Copy the plugin folder “BCGFormatArea” inside the Editor folder in the Tridion installation path “InstallationPath\Tridion\web\WebUI\Editors”.

2.     Now in IIS create a virtual directory with the name “BCGFormatArea” inside Editor Directory as shown in the below screen shot.


3.     Now open the “System.config” file in the path “C:\Program Files (x86)\Tridion\web\WebUI\WebRoot\Configuration” and add a new editor configuration setting inside the “<editors default="CME">” element tag 


Here is the configuration setting:

<editor name="BCGFormatArea" xmlns="http://www.sdltridion.com/2009/GUI/Configuration">
<installpath> InstallationPath\Tridion\web\WebUI\Editors\BCGFormatArea\</installpath>
<configuration>config\BCGFormatArea.config</configuration>
<vdir>BCGFormatArea</vdir>
</editor>
 Note: Make sure the virtual directory name in the editor setting <vdir> is matched with the created one.
4.     Now make the IIS reset and open the CMS you will see two new “Paste As Text” and “Paste From Word” buttons added in the component view as shown in the below screenshot.



5.     Click the button to open the popup.

How it works:

Most intersting methods to notice  are _execute, setEditorData, setPopupText.

_execute: It first trigger the popup "PasteAsText.html". which in turns intialize the ckEditor. 

so now when user enter the content in the text box and press ok, following code gets executed:

 function GetContents() {
                // Get the editor instance that you want to interact with.
                var editor = CKEDITOR.instances.editor1;                
window.opener.SetPopupText(editor.getData());
closeWin();
            }

if you notice it just set the text via calling formatArea's SetPopupText method. 
and closeWin(), which again triggers the unloadFunc method of FormatArea. which sets the data to the CME textbox.

No comments: