Monday, October 26, 2009

FCKEditor in SharePoint (IE & Non-IE)

In SharePoint, we face one common problem while editing a Rich Text field from Non-IE browsers; the field does not have any Rich text editor. There are few blogs and forum posts showing how we can add FCKEditor in Non-IE browser. But after deployment we will no longer have consistent UI in IE and Non-IE browser for that screen. And after deployment, many users also find th FCKEditor more useful and easy than the default SharePoint Rich Text editor.

So in our project, we decided to use FCKEditor in both IE and Non-IE browser. To do this, I spent some time and came up with the following solution. However after deploying the solution we have tested well and we have not found any side effect, which is very nice :)



Steps:

You can download the FCKEditor controls from here. In our case we have unzipped the control in the following location:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES\

We have to modify four JavaScript file:

1. FCKCONFIG.JS

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES\fckeditor\

Add the following configurations in the "fckconfig.js" file to add two new toolbar sets:
FCKConfig.ToolbarSets["RichTextEditorMinimal"] = [
['Source','-','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','-','Print'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
'/',
['FontFormat','FontName','FontSize'],['Link','Unlink'],
'/',
['Bold','Italic','Underline','StrikeThrough'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['TextColor','BGColor'],['SpecialChar'],
['FitWindow']
] ;


FCKConfig.ToolbarSets["RichTextEditor"] = [
['Source','-','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','-','Print'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
'/',
['FontFormat','FontName','FontSize'],
'/',
['Bold','Italic','Underline','StrikeThrough'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'], 
'/',
['TextColor','BGColor'],['Image','Table','Rule','Smiley','SpecialChar'],
['FitWindow']
] ;


Why two?

Multi lines of text has two Rich Text type. One is Rich text (Bold, italics, text alignment) and another is Enhanced rich text (Rich text with pictures, tables, and hyperlinks). In above toolbar set I have listed the appropriate ones, those are supported by the field type. However, you can remove controls, if you want.

2. CORE.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\

Add the following JavaScript at the end of the "CORE.JS" file. While webpage loading, this JavaScript will replace all textarea with FCKEditor dynamically. This will enable FCKEditor control in both IE & Non-IE browser.

function SLAC_NonIERichText() {
    var rx = /RTE_ConvertTextAreaToRichEdit\("(\w+)"/;
    var as = document.getElementsByTagName("script");
    var oXML = new XMLHttpRequest();
    oXML.open('GET', '/_controltemplates/fckeditor/fckeditor.js', false);
    oXML.send('');
    eval(oXML.responseText);
    // alert("Loaded FCKEditor.js");
  
    for (i = 0; i < as.length; i++) 
    {
        var st = as[i].text;
        if (rx.test(st))
        {
            var ctlid = rx.exec(st)[1];
            var t = document.getElementById(ctlid);
            var f = t.form;
            var oFCKEditor = new FCKeditor(ctlid);
            // alert(ctlid);
            oFCKEditor.BasePath = "/_controltemplates/fckeditor/";
            // oFCKEditor.ToolbarSet = "XWEB";
            oFCKEditor.ToolbarSet = "RichTextEditorMinimal";

            if (st.indexOf('FullHtml') >= 0)
            {
              oFCKEditor.ToolbarSet = "RichTextEditor";
            } 
            oFCKEditor.Width = t.clientWidth;

            if (oFCKEditor.Width < 500)
            {
              oFCKEditor.Width = 500;
            } 
            oFCKEditor.Height = t.clientHeight + 100;

            if (oFCKEditor.Height < 400) 
            {
              oFCKEditor.Height = 400;
            }
            oFCKEditor.ReplaceTextarea();
        }
    }
}

_spBodyOnLoadFunctionNames.push('SLAC_NonIERichText');

3. BFORM.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\

Search with RTE_ConvertTextAreaToRichEdit in the file "BFORM.JS". You will find two results. One of those is a function. Modify the function and put return; as the first statement of the function. This will prevent the function from being executed. The function will look like the following:
function RTE_ConvertTextAreaToRichEdit(
   strBaseElementID,
   fRestrictedMode,
   fAllowHyperlink,
   strDirection,
   strWebLocale,
   fSimpleTextOnly,
   fEditable,
   fUseDynamicHeightSizing,
   iMaxHeightSize,
   iMinHeightSize,
   strMode,
   urlWebRoot,
   strThemeUrl,
   strBodyClassName,
   fAllowRelativeLinks,
   strBaseUrl,
   fUseDynamicWidthSizing,
   iMaxWidthSize,
   iMinWidthSize,
   fEnforceAccessibilityMode,
   fPreserveScript,
   fHookUpEvents,
   fGenerateToolbar
   )
{ 
 return; //we need to add only this. 
 //keep rest of the code as it is.
 //.....
}

4. FORM.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\

Follow the same steps as we did for file "FORM.JS". Search with RTE_ConvertTextAreaToRichEdit in the file "FORM.JS". You will find one result, a function. Modify the function and put return; as the first statement of the function.

NON_IE.JS (Caution!)
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\

We should not modify this file any more. To enable FCKEditor in only Non-IE, we need to modify this file. But now we are enabling FCKEditor for both IE and Non-IE. And for that we have modified CORE.JS, which is invoked for all browsers. So we no longer need to modify NON_IE.JS. Well, if you mistakenly modify this file then if you open the page with Non-IE browser, you will find two FCKEditor for each field :)

However, I have used JavaScript function SLAC_NonIERichText from this forum.