TinyMce Adapter for EPiServer CMS
The EPiServer CMS editor is a great editor. It is easy to use, simple yet gives you all the complicated features it should. The only issue is that it doesn’t work for non IE browsers. I know that the dev team is working hard on a solution for r3 but until then I was asked to create a tinymce plug-in for EPiServer CMS. There already exists a plug-in for the FCK Editor made by Johan Olofsson which works great. This module uses the same technology but with some extra features.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. There exists a .Net wrapper, a PHP wrapper but in this plug-in we used the javascript package of TinyMCE. The editor is easy to use and even easier to configure for your needs. I first used it for WikiX and it was love at first sight. The plug-in has been tested on FireFox 3.0.6 in XP and on Safari, Firefox 3 on MAC OS X and Chrome in Vista.
Here are some of the features with this implementation:
- Insert links and images from EPiServer showing the file manager and the tree
- It includes a function for search and replace
- Insert objects such as flash movies, QuickTime, vm…
- Full Screen editing
- Honors property settings (e.g. dont show font)
- Honors editor.css
This implementation includes around 20 options. You can easily add your own by adding a few lines in the javascript file. Unfortunately this means that the settings are not honored. In the Download package I include a javascript file with all the features available. All you need to do is change the name of the simple one and the advanced one.
Simple one that insetlink.js includes
Advanced one with no honoring advanced,js
The most interesting buttons on the editor are the insert link and insert image
These buttons have the integration with EPiServer CMS. When you click to add an image or media you get a simple image editor with a small button to browse the server. This opens the EPiServer Filemanager. Select an image or media and then you can use the simple TinyMce Editor to change the image size, etc.
When you want to add a link you click the insert link button and the same browse button appears but now you are redirected to the cms tree. Here you select a link and simply add it.
This is released on EPiCode so go ahead and download. The installation details are also on epicode
Enjoy
20 February 2009