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

11 thoughts on “FCKEditor in SharePoint (IE & Non-IE)

  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');

  2. @Pjotr,your code dosnt wor for me!1) I replaced your code in the CORE.CSS2) added the code from Step (1. FCKCONFIG.JS) int the config.jsWhas wrong?

  3. @Anupam RankuFCKEditor works fine with IE7/IE8 Firefox but not with IE6, have you got a solution for this one?Kind RegardsWasili

  4. @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 ThanksRegardsWasili

  5. 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.

  6. Hi, i found a solution for this problem.in the CORE.JSi replaced the code in line 4. OLD VALUE: var oXML = new XMLHttpRequest();NEW VALUE: var oXML = new ActiveXObject("Microsoft.XMLHTTP");now it works perfectRegardsWasili

  7. HiI 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 helpThanksMaadu

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s