HOWTO: FCKEditor Rich Text Editor in SharePoint 2007 / MOSS / WSS 3.0

Just a quick HOWTO. We tried the officially recommended "RadEditor" for SharePoint 2007 to enable Rich Text editing in FireFox, but we weren’t too happy with it. Mainly, it was too much of a pain to deploy, given the way it was implemented as a "Feature" that had to be enabled manually on each site by someone with both admin access to the Site and write access to the actual filesystem of the SharePoint 2007 server machine. That’s probably a bug that will get fixed down the line.

The following steps will let you use FCKeditor as your Rich Text editor for non-IE browsers in SharePoint 2007.

1) "install" FCKeditor by unpacking it in Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\fckeditor

2) add the following to the bottom of Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\NON_IE.JS

EDIT: This is a little out of date. See later in the thread for an updated version.

function SLAC_NonIERichText() {
    var rx = /RTE_ConvertTextAreaToRichEdit\("(\w+)"/;
    var as = document.getElementsByTagName("script");
    var oXML = new XMLHttpRequest();
    oXML.open('GET', '_layouts/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 = "_layouts/fckeditor/";
	oFCKEditor.ToolbarSet = "DEFAULT";
	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');

This function dynamically loads fckeditor.js using XMLHttpRequest, finds all the TEXTAREAs that would be enabled for Rich Text in IE by looking through the SCRIPTs on the page, and turns them into FCKeditor controls.

You will probably need to re-patch NON_IE.JS in the future when Microsoft releases a service pack or hotfix that updates NON_IE.JS for some other reason. We chose this deployment method because it’s easier than bundling it in a Feature and is applied to one central location instead of a site-by-site basis, but that may not be your organization’s priority.

Question:

I, too, am less than impressed with Telerik’s product. While they offer great support, the editor still pales in comparison to the likes of FCKEditor and Xstandard and TinyMCE.

One question…does this ONLY replace the editor in non-IE browsers? Does the default MOSS editor still exist in IE?

Answers:

This technique requires editing "NON_IE.JS", which is only sent to non-IE browsers. So yes, the default MOSS editor is still used for IE.

It wouldn’t be too hard to use FCKEditor for IE if you really, really wanted to, but I can’t imagine how that would be a good idea.

Also, this technique can be easily adapted to use TinyMCE or other rich text editors as well. The basic premise behind it is to find all the scripts on the page where MS uses RTE_ConvertTextAreaToRichEdit() to enable the rich text stuff in IE, grab the ID of the TEXTAREA, and from there you can initialize whatever browser-based Rich Text Editor you want.

Reply:

Thanks for the tip — this will make the one Mac user in the office happy

A couple of notes though: non_ie.js is in a localized directory under layouts (1033 for en_us folks). Also, I grabbed the latest release version of FCKeditor and using it with Firefox 2.0 and it’s being persnickity and wants "Default" instead of "DEFAULT" for the .ToolbarSet value.

Right now I’m trying to figure out how to create my own toolbar that matches the default one IE users get. Here’s what I’ve got so far:

FCKConfig.ToolbarSets["WSS"] = [    

['FontName','FontSize','-','Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','OrderedList','UnorderedList','Indent','Outdent','-','TextColor','BGColor']
];

(No doubt this will be very ugly formatting wise)

Re: Actually, I wrote the OP quite a while ago and have updated my NON_IE.JS script. As Coredog64 points out, it’s in the 1033 directory (for US folks). 12\TEMPLATE\LAYOUTS\1033\NON_IE.JS.

There is a problem with the version in the OP. There are, in fact, 2 different rich text editing scenarios in MOSS. There is the BASIC Rich Text Editor for List Item fields and then there is the full-fledged Rich Text Editor for editing wiki pages and such. This updated version handles both. It looks for "FullHtml" in the call to RTE_ConvertTextAreaToRichEdit and enables the advanced options if it is present.

Here is the updated code for NON_IE.JS:

function SLAC_NonIERichText() {
    var rx = /RTE_ConvertTextAreaToRichEdit\("(\w+)"/;
    var as = document.getElementsByTagName("script");
    var oXML = new XMLHttpRequest();
    oXML.open('GET', '_layouts/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 = "_layouts/fckeditor/";
	// oFCKEditor.ToolbarSet = "XWEB";
	oFCKEditor.ToolbarSet = "MOSSBASIC";
	if (st.indexOf('FullHtml') >= 0)
	{
		oFCKEditor.ToolbarSet = "MOSSFULL";
	}
	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');

And here are the toolbar definitions I’m using. They’re not quite a 1:1 mapping to what the IE users get, but they’re close.
In fckconfig.js:

FCKConfig.ToolbarSets["MOSSBASIC"] = [
	['FontName','FontSize'],
	['Bold', 'Italic', 'Underline'],
	['JustifyLeft', 'JustifyCenter', 'JustifyRight'],
	['OrderedList', 'UnorderedList', 'Outdent', 'Indent'],
	['TextColor', 'BGColor'],
	['Undo', 'Redo']
] ;

FCKConfig.ToolbarSets["MOSSFULL"] = [
	['FitWindow', 'Source'],
	['Cut', 'Copy', 'Paste', 'RemoveFormat'],
	['Undo', 'Redo'],
	['Table', 'Rule', 'SpecialChar'],
	['Link', 'Image'],
	'/',
	['FontName','FontSize'],
	['Bold', 'Italic', 'Underline'],
	['JustifyLeft', 'JustifyCenter', 'JustifyRight'],
	['OrderedList', 'UnorderedList', 'Outdent', 'Indent'],
	['TextColor', 'BGColor'],
	['Undo', 'Redo']
] ;
 

2 phản hồi »

  1. Bư béo said

    anh ơi cho em hỏi sao sao em làm như anh mà nó mãi không tích hợp vào nhỉ? anh đã làm lần nào chưa hay cũng chỉ là cop nhặt trên mạng

  2. thanglee said

    Chào bạn @Bư béo:

    Bạn đọc các bài của mình, xin đừng hỏi là mình đã làm lần nào chưa hay …

    Mình là dân Công nghệ nên bài của mình dù có copy của các bài trên mạng thì đều dựa trên nguyên tắc thực nghiệm được mới Post.

    Bạn có thể xem link sau: http://learning.novavn.com/bai-4-cau-hinh-bo-cong-cu-soan-thao-tinymce-tren-sharepoint.aspx
    Đây là clip mình làm trên dự án Intranet.

    Chúc thành công.

RSS feed for comments on this post · TrackBack URI

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: