We build Web & Mobile Applications.

< All Articles

Choosing a simple, lightweight WYSIWYG editor

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.

Try it yourself

If you want to try it out in your Rails project here’s what you need to do:

  1. Download the widgEditor 1.0.1 zip file and extract the contents to a temporary directory.

  2. Copy the css/widgContent.css and css/widgEditor.css files to your Rails application’s public/stylesheets directory.

  3. Copy all except the header_bg.gif and logo.gif files from images to your public/images directory.

  4. Copy the scripts/widgEditor.js file to your public/javascripts directory.

  5. Open the public/javascripts/widgEditor.js file in your text editor and search for this line:

    var widgStylesheet = "css/widgContent.css";

    Replace it with this:

    var widgStylesheet = "/stylesheets/widgContent.css";
  6. Edit your layout template (or whichever template you’re using to define the HTML <head> element for your pages) to include the widgEditor stylesheet and JavaScript like this:

    <%= stylesheet_link_tag 'widgEditor' %>
    <%= javascript_include_tag 'widgEditor' %>

    Note that if you’re using stylesheet_link_tag :all and javascript_include_tag :all then you can skip this step.

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!

Updated on 15 October 2015
First published by Rob Anderton on 08 April 2008
© TheWebFellas Limited 2016
"Choosing a simple, lightweight WYSIWYG editor" by Rob Anderton at TheWebFellas is licensed under a Creative Commons Attribution 4.0 International License.