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 FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATECONTROLTEMPLATES

We have to modify four JavaScript file:

1. FCKCONFIG.JS

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

Add the following configurations in the “fckconfig.js” file to add two new toolbar sets:

https://gist.github.com/AnupamRanku/3ab7e9b15ca62ec1bef16fc839b08c0a.js

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\TEMPLATELAYOUTS\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.

https://gist.github.com/AnupamRanku/7082527294ff16c812b9822b0b359395.js

3. BFORM.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATELAYOUTS\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:

https://gist.github.com/AnupamRanku/a2af1b762eef6137beefdc54cdbbd291.js

4. FORM.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATELAYOUTS\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\TEMPLATELAYOUTS\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.