Integrating TinyMCE with SharePoint (MOSS) 2007 / WSS 3.0

The Problem

At my company, we use Sharepoint 2007 for our internal intranet. It’s a pretty good off-the-shelf product overall, but in typical M$ fashion, the rich-text editing capabilities in MOSS 2007 are Internet Explorer-only. The thing is, at a technology company, a lot of users tend to use other better browsers, like Opera or Firefox. In fact, a lot of the folks I work with have Macs and use Safari.

The Goal

Integrate a freely available javascript-based RTE for browsers other than IE. My primary choices were between FCKEditor and TinyMCE. There’s a very useful forum entry over at Arstechnica about integrating FCKEditor into MOSS 2007.

I decided to go with TinyMCE, because:

  • it supports more browsers
  • it loads faster than FCKEditor
  • development community seems to prefer it
  • supposedly cleaner xhtml
  • I’ve used it in the past (usually w/Drupal sites, but also some plugin development)

Some down-sides to TinyMCE:

  • Larger file sizes than FCKEditor
  • Only experimental support for Safari as of version 3rc1

The Solution

Based on the Arstechnica forum post, I decided to integrate TinyMCE in Sharepoint’s NON_IE.JS (subtle isn’t it?). I first tried using the same XMLHttpRequest approach. It turns out that TinyMCE has some internal dependencies that require including the javascript with a <script> tag. So, I decided to dynamically write out the script tag:

...
var head = document.getElementsByTagName("head")[0]
script = document.createElement(’script’);
head.appendChild(script);

I also created two different configurations for Sharepoint’s FullHtml or Basic RTEs.

View the code: NON_IE.JS addition!

From there, I just had to move the tinymce package out to C:\Program Files\Common Files\ Microsoft Shared\web server extensions\12\ TEMPLATE\LAYOUTS\1033. You’ll need to set the Windows-explorer file security on files you move out to allow Sharepoint to serve them up.

Polishing it up

As I said, TinyMCE’s support for Safari is currently experimental, so I added some code to warn users of possible problems and allow them to disable TinyMCE during their session.

I compressed the custom javascript that I wrote with the YUI compressor, bringing the total size of my code to 3.1KB. Also, you’ll want to tweak the theme/button alignment to your liking and to ensure that the RTE fits the screen well at reasonable resolutions (I optimized for 1024 X 768).

Notes

  • NON_IE.JS didn’t appear to be loaded from the My Site collection, thus no RTE on My Site profile, etc. – still looking into this one.
  • There will probably be some issues/changes for deploying this to a non-US Sharepoint install. The 1033 directory (which I’ve hard-coded) is the US-specific templates directory.
  • Also, as mentioned in the original Arstechnica forum entry, NON_IE.JS may be modified by an M$ release, so you may need re-patch it from time-to-time.
  • Please note that making these modifications may put your Sharepoint installation in an unsupported state according to M$. So, I guess what you *should* have done, is asked M$ support why, out-of-the-box their RTE only works in IE.
  • Thanks to Pont at Arstechnica for his original look at FCKEditor integration and being kind enough to share =].

1 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

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: