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.

11 comments:

  1. Nice, I changed the code to support the new CKEditor, just the basics:

    var CKEDITOR_BASEPATH = '/_layouts/ckeditor/';

    function SLAC_NonIERichText2() {


    var rx = /RTE_ConvertTextAreaToRichEdit\("(\w+)"/;
    var as = document.getElementsByTagName("script");
    var oXML = new XMLHttpRequest();
    oXML.open('GET', '_layouts/ckeditor/ckeditor.js', false);
    oXML.send('');
    eval(oXML.responseText);

    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;

    CKEDITOR.replace( ctlid );

    }
    }
    }

    _spBodyOnLoadFunctionNames.push('SLAC_NonIERichText2');

    ReplyDelete
  2. @Pjotr,

    your code dosnt wor for me!
    1) I replaced your code in the CORE.CSS
    2) added the code from Step (1. FCKCONFIG.JS) int the config.js
    Whas wrong?

    ReplyDelete
  3. Hi Wasili,

    Are you having problem with FCKEditor or CKEditor? And probably you have noticed, you have to modify 4 files. Let us know if you still facing problem.

    ReplyDelete
  4. @Anupam Ranku

    FCKEditor works fine with IE7/IE8 Firefox but not with IE6, have you got a solution for this one?

    Kind Regards

    Wasili

    ReplyDelete
  5. @Wasili: Unfortunately we have not tested the editor with IE6. We recommend user to use higher version of IE. You probably know, the previous IE versions (<8.0) have some critical security flaws! http://www.microsoft.com/technet/security/bulletin/ms08-078.mspx

    ReplyDelete
  6. @Anupam Ranku: I know the security flaws of IE6, but the most of our people has installed the IE6, and i need a solution for this one, it would be great if someone could help me!
    Many Thanks
    Regards

    Wasili

    ReplyDelete
  7. Hi Wasili, you can also build custom column that can have FCKEditor. In the doc I found FCKEditor supports IE6, so that will work well. But the problem will be to migrate the existing columns and adding in all places.

    ReplyDelete
  8. Hi, i found a solution for this problem.

    in the CORE.JS

    i replaced the code in line 4.

    OLD VALUE: var oXML = new XMLHttpRequest();

    NEW VALUE: var oXML = new ActiveXObject("Microsoft.XMLHTTP");

    now it works perfect

    Regards

    Wasili

    ReplyDelete
  9. Hi
    I have followed the steps exactly..now how do i access this tool in my sharepoint 2007?
    From the question you can make out i m no programer :)
    please help

    Thanks
    Maadu

    ReplyDelete
  10. Hi,
    Just add a Text column (of type Rich Text or Extended rich text) in any list. Then try to add/edit any item in that list, you will find this FCKEditor there.

    ReplyDelete