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 =].
on Feb 13th, 2008 at 7:23 am
LOVE your blog, thanks for entertaining me
Hope there will be more posts soon
regards, terry
ps - sorry im not that good in writing in english because I came from europe - but i understand a lot
on Mar 12th, 2008 at 8:04 am
works great, thx.
Is it possible to set sharepoint to use tinymce in iexplore also?
on Mar 12th, 2008 at 9:59 am
Sure, this should be possible. But, you’d want to intercept the call to: RTE_ConvertTextAreaToRichEdit which is the call used by Internet Explorer to replace a given textarea to MicroSoft’s ActiveX control for Rich-Text Editing.
on Jun 3rd, 2008 at 8:28 am
I couldn’t get this to work using the code above. I keep getting a tinyMCE is null or not an object error on the page.
on Jun 19th, 2008 at 1:01 pm
I’d recommend viewing the ‘generated source’ of the sharepoint page, and ensuring that the TinyMCE scripts are getting included in the page.
on Aug 15th, 2008 at 10:31 am
Do you use MCImageManager and MCFileManager within SharePoint also and can they be pointed at SharePoint libraries to list images etc?
on Aug 21st, 2008 at 3:09 pm
Sir,
I was wondering if there is a chance to talk to you offline about this integration
Thanks,
Mike Simonds
Maxim Integrated Products
on Aug 24th, 2008 at 8:02 pm
Mike: sure thing; use my about page to get my contact info.
on Aug 24th, 2008 at 8:05 pm
Johnny: in short - no. Though, this would be a pretty cool enhancement. Please let me know if you get this working. Perhaps we could create a google code project for the integration?
on Dec 10th, 2008 at 7:33 am
Hi, fantastic solution.
Did you get anywhere with trying to make it work in the MYSITE collections?
Ryan
on Mar 2nd, 2009 at 5:07 am
[...] Integrating TinyMCE with SharePoint (MOSS) 2007 [...]
on Mar 5th, 2009 at 9:43 am
First great info.
Two questions:
1) Has anyone have this working with ie? Or can provide a sample.
2) Its installed and the editor works, but then the edits are saved the old version of the document is saved. I am using version 3.2.1.1.
Thanks
on Mar 5th, 2009 at 11:01 am
@Phil thanks for the kind words.
1) This implementation actually doesn’t work for IE. This is intentional, because out of the box - SharePoint uses an ActiveX control for IE.
2) Interesting, though I haven’t seen this issue.
on Mar 11th, 2009 at 2:21 am
[...] Integrando TinyMCE en MOSS: Link [...]
on Mar 22nd, 2009 at 6:06 pm
[...] denn MOSS Editor durch einen der beiden genannten Editoren zu ersetzen. Dafür existieren bereits Anleitungen. Problematisch - und für den Behördeneinsatz leider ausschlaggebend - ist dabei allerdings der [...]
on May 17th, 2009 at 11:47 am
Had nothing show up, until I noticed that your code has:
script.src = ‘/_layouts/1033/tinymce3/jscripts/tiny_mce/tiny_mce.js’;
but on my system this needed to be changed to:
script.src = ‘/_layouts/1033/tinymce_3_2_3_1/jscripts/tiny_mce/tiny_mce.js’;
When this still made no difference, I rebooted SharePoint, and the changes took effect.
Then, the familiar RTE buttons showed up, and text entry became as I had hoped. However, upon saving the entry, only the title was still there when I next looked at the page. All RTE text had disappeared/never been saved.
Any ideas?
on May 17th, 2009 at 11:43 pm
Great stuff Andy.
I had the same issue as Phil using TinyMCE version 3.2.3.1.
It looks like it was running the tinyMCE.execCommand(”mceAddControl”, false, ctlid);
twice. I don’t know why but it was. So I put a break; after it and it works.
Hope this saves someone else some time.
on Aug 10th, 2009 at 2:14 pm
I’m having the same issue that Phil is having. Permissions are set and the editor comes up properly; I can edit a wiki page and do everything I need to, but when it comes time to save the contents of the editor, nothing is saved and the page shows the previous contents as a new version.
What’s up with that?
on Aug 12th, 2009 at 11:37 am
How to make a feature? I do not work NON_IE.JS manually. How can add addition to NON_IE.JS?
Do you have any idea samething to IE? I dont want to use two different editors. TinyMCE for IE/FireFor/Safari.