So today I found myself in need of a WYSIWYG editor for the admin pages of the site I’m currently working on. I’ve used FCKEditor and Scott Rutherford’s Rails plugin before and Chris has recently been using TinyMCE for a few of our other projects but both of them seemed too heavy, especially when the project requirements only stated a need to apply simple formatting like bold, italic and headings.
As a bonus I thought it’d be nice if the editor made use of Prototype so that I wouldn’t have to worry about the two playing nicely together when the site gets ajaxed-up, but it seems that nobody has done this yet which is a shame.
Anyway, back to the story, a few carefully crafted Google searches and a look at the excellent Genii Software WYSIWYG editor list gave me some potential candidates. However I ended up ruling out a lot of them because they did too much and more often than not the code they produced was a little too late-90’s HTML for my liking (
<FONT> tag anyone?)
The story does have a happy ending though: I found widgEditor, an editor that I first tried out 3 years ago for a PHP project (those were the days) and, by coincidence, has just received its first update in about as many years. It fits the bill perfectly: simple, lightweight, and easy to integrate with a Rails project.
If you want to try it out in your Rails project here’s what you need to do:
Download the widgEditor 1.0.1 zip file and extract the contents to a temporary directory.
css/widgEditor.css files to your Rails application’s
Copy all except the
logo.gif files from
images to your
scripts/widgEditor.js file to your
var widgStylesheet = "css/widgContent.css";
Replace it with this:
var widgStylesheet = "/stylesheets/widgContent.css";
Edit your layout template (or whichever template you’re using to define the HTML
Note that if you’re using
stylesheet_link_tag :all and
You can then have widgEditor applied to textareas by adding the
widgEditor CSS class to them, like this:
<%= f.text_area(:description, :size => '60x3', :class => 'widgEditor') %>
I’ve given it a quick test in Internet Explorer 6 and 7, Firefox 2.0 and 3.0 beta, and Safari 3.0 on Windows and all seems to work. My next job will probably be to customise its appearance which looks like it should be fairly easy to do by tweaking the CSS and image files. I’ll also be keeping a lookout for the soon to be released version 2 - although given the gap between the last releases this could be sometime in 2012!