WYSIWYG Editor integration to a Rails application
back
Next article:
Implementation details for FCKEditor integration with Ruby on Rails
view
I have recently completed a migration of the integrated WYSIWYG (What You See Is What You Get) editor on this site from TinyMCE to FCKEditor, and would like to relate the experience to anyone who contemplates doing the same. This article will address the following points:
The reason for the switch
TinyMCE is a very capable WYSIWYG editor, and it is released under GPL licence, the same as FCKEditor. Both editors require minimal setup and configuration to embed into your web page. You essentially define a textarea field somewhere on your page, then call the initialisation script to create the editor object, which promptly wraps itself around the textarea automatically. Both editors support themes and a plugin mechanism (provided you speak Javacript as a native). You can get commercial plugins for the editors to achieve additional functionalities.
There is little to choose between the two browsers under default usage, although I prefer TinyMCE, which seems to load faster. Having said that, FCKEditor loads very fast after the first time, so there must be some caching going on.
FCKEditor is rather too feature rich for a basic use, with the default menu having all the buttons enabled. Although all the buttons can be turned off individually, I prefer the TinyMCE approach, which has the buttons for a basic text entry use, then you can add buttons for more advanced modes. This way you can embed the editor into a web page for all visitors to the site to leave some simple notes and maybe a picture or two, and only allow the full blown version with all the features enabled to the registered users.
If you plan to provide a facility for file upload, then FCKEditor comes with it builtin, whereas you need to buy a commercial plugin called ImageManager for TinyMCE, which does all kind of image manipulation, as well as image browsing and uploading. There is also an alternative open source iBrowser plugin, which works with both TinyMCE and FCKEditor. The problem with all these image and file browsing/uploading plugins is they require server side support. More popular server technologies such as PHP, Perl, ASP, ASP.NET, Java etc. are supported, but notably lacking is Ruby on Rails, which is the technology I happen to use for my site. The main problem with Ruby on Rails, as opposed to the above mentioned technologies, is its MVC (Model-View-Controller) architecture does not accomodate embedded server side scripts under the document root directory. Luckily FCKEditor supports a connector architecture, which allows for Rails applications to be plugged in without too much problem. More about that later.
I have compiled a feature matrix, which is based around my direct usage experience, rather on the marketing blurbs. It covers what I have found out so far, and I might enrich this matrix later if I discover something else worthwhile.
| Feature |
TinyMCE |
FCKEditor |
| Installation |
unzip into document root directory |
unzip into document root directory |
| Integration |
<script src="/tiny_mce/tiny_mce.js" />
<script>
tinyMCE.init({
mode : "textareas"
});
</script>
<textarea>Hello World</textarea>
|
<script src="/FCKeditor/fckeditor.js" />
<script>
window.onload = function() {
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "/FCKeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
<textarea id='content' name='content'>Hello World</textarea>
|
| Manual |
Online, basic but well laid out |
Online as a Wiki, difficult to find relevant information, also is not linked to the main product page (or was not too obvious) |
| Image and File Upload |
Commercial plugin called ImageManager |
Built in, has server side connectors provided for ASP, ASP.NET, Java, PHP, Perl |
| HTML element support |
Allows fine grain control of which HTML element is parsed. By default, dangerous elements such as <script> have to be specifically enabled. This is a good basic protection against cross site scripting |
Anything goes. You can embed a piece of Javascript and it will happily execute. I have not found a way to turn this off yet |
| Context menu |
Advanced function, has to be enabled |
Yes |
| Table support |
Advanced function, has to be enabled |
Yes |
| Images, anchors, rulers etc. |
Yes, some functions such as text colours, emoticons have to be enabled |
Yes |
| Spell Checker |
Advanced function |
Server side function |
| Clipboard functions |
No |
Yes, even paste special. Also multi level undo, select all etc. |
| Speed of response |
Quick |
First time access is slow |
| Previewer/Print |
Advanced function, has to be enabled, no Print function |
Yes |
| HTML source editor |
Yes, has builtin HTML code tidying function. The resulting HTML code is better looking than FCKEditor |
Yes |
| API |
No, apart from the plugin architecture. Server side integration for commercial plugin ImageManager. No debug support |
Access points allowing for interfacing at method call and event handler levels. Server side connectors for most languages except Ruby on Rails. There is builtin support for debugging, where all trace messages appear in a separate popup window |
| Support/Forums |
hosted forums |
Forum at http://fckeditor.biz/ |
So, in summary, FCKEditor provides a much more feature rich initial interface than TinyMCE. There are one or two things I prefer TinyMCE for, but ultimately, the main reason for making the switch is I need to be able to upload files and images to the server, and FCKEditor has a path of least resistance for achieving this. I do not like the FCKEditor online manual too much, as it takes longer to find the information I needed, but that is a minor point.
The reasons for this article
Now that I have settled on the reason behind switching to FCKEditor, I will talk a bit about why I am writing this article.
There are various articles on the net describing how to integrate FCKEditor into Ruby on Rails already, but having read all of them I find the following areas lacking:
- Most articles describe how to embed the editor into the web page, which, in my humble opinion, have been described already in the FCKEditor Wiki, albeit a bit hard to find
- The steps in these articles involve hacking into the files which are part of the FCKEditor distribution. This is fine and good, until the next time you have to upgrade to a later version. If you are not careful and hack the new files too, your editor will stop working mysteriously. There is support for overlaying your customisations on top of the default configurations, which is the approach I am adopting here.
- No information about how to implement server side support for file and image uploads in Ruby on Rails
I will aim to address the above bullet points in the rest of the article. The information shown here should be complimentary to other articles on the net, and not intended as their replacement. I will not cover AJAX integration, as you can already find that by typing fckeditor ruby on rails into Google
back
Next article:
Implementation details for FCKEditor integration with Ruby on Rails
view
|
