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.

The search

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:

Download the widgEditor 1.0.1 zip file and extract the contents to a temporary directory.
Copy the css/widgContent.css and css/widgEditor.css files to your Rails application’s public/stylesheets directory.
Copy all except the header_bg.gif and logo.gif files from images to your public/images directory.
Copy the scripts/widgEditor.js file to your public/javascripts directory.
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";
```
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!

16 comments

Skip to comment form

Comment on Choosing a simple, lightweight WYSIWYG editor by amy

June 26th, 2008 @ 16:22 – permalink

do you know how to change the displayed text within the textarea once the form is displayed. (just show different texts in one textarea, no submit) i try to replace the text.value but this is not enough (too simple). Once the right text is accepted by the user (found) it can be changed interactive (editor).
Comment on Choosing a simple, lightweight WYSIWYG editor by Rob Anderton

July 1st, 2008 @ 14:24 – permalink
Hi amy,

Looking at the code it seemed like something like this would work:
```
document.getElementById('text_field_id').value = 'hello!'; 
widgEditor.refreshDisplay();
```
But this obviously won't work because there is no way of accessing a widgEditor once it has been created.

You might want to try the solution posted by tpbriano on the widgEditor issue tracker, it uses an array to keep track of individual widgEditors and provides a function to update the content of a specific widgEditor.

Hope that helps,
Rob
Comment on Choosing a simple, lightweight WYSIWYG editor by Mohan

July 19th, 2008 @ 12:05 – permalink

I tried to integrate this editor and everything went well.Editor appeared in the form.but i could not get the value of text area using params.

This is my code text area in the form <%= text_area 'blog', 'description', :cols => 25, :rows => 3, :class=> "widgEditor"%>

when i submit the form. i could not get the value of description.Actually params[:description] is not passed.Anybody have faced this problem.

let me know

Thanks, Mohan
Comment on Choosing a simple, lightweight WYSIWYG editor by Rob Anderton

July 22nd, 2008 @ 14:12 – permalink

I've not had this problem before. I'd be interested to see what the rest of your page template looks like as it may give some clues as to what is going wrong.
Comment on Choosing a simple, lightweight WYSIWYG editor by Don

August 7th, 2008 @ 20:00 – permalink

I am trying to get this to work, but when I look at the "show" view, my text is not formatted as html, but you only see the tags that were added by the wysiwyg. What did I do wrong?
Comment on Choosing a simple, lightweight WYSIWYG editor by Rob Anderton

August 7th, 2008 @ 20:31 – permalink
It sounds like you're HTML encoding the text. If you're doing something like this:
```
<%= h(@object.method) %>
```
Then getting rid of the call to h() should fix it.

As an aside, if you want to prevent your users from doing anything crazy in their HTML you should take a look at the Rails sanitize helper.
Comment on Choosing a simple, lightweight WYSIWYG editor by Don

August 7th, 2008 @ 22:16 – permalink

Rob,

It worked! Thanks so much!
Comment on Choosing a simple, lightweight WYSIWYG editor by Alex

September 8th, 2008 @ 04:09 – permalink

Anyone else find this is interfering with remoteformfor? Works fine without, forces a text-render of the update with...
Comment on Choosing a simple, lightweight WYSIWYG editor by dingo

October 31st, 2008 @ 12:28 – permalink

ha, it works! thanks.
Comment on Choosing a simple, lightweight WYSIWYG editor by تبلیغات

December 21st, 2008 @ 02:04 – permalink

thanks for your great solution.
Comment on Choosing a simple, lightweight WYSIWYG editor by Ray Parker

June 29th, 2009 @ 20:24 – permalink

cols and rows (or size) don't seem to have any effect.
Comment on Choosing a simple, lightweight WYSIWYG editor by Rob Anderton

July 11th, 2009 @ 23:25 – permalink

Yep, it doesn't seem to do anything with dimensions. I think there's an issue tracker for it on Google code, so it might be worth posting on there.
Rob
Comment on Choosing a simple, lightweight WYSIWYG editor by Foton

December 8th, 2009 @ 20:47 – permalink

To Mohan: you have maybe the same error when sending post params . Cause is way that widgEditor rename fields. Solution is on http://www.elctech.com/snippets/-solved-500-internal-server-error-string-not-matched
Comment on Choosing a simple, lightweight WYSIWYG editor by Subodh D. Choure

May 11th, 2010 @ 06:59 – permalink
Hi! I tried using widgEditor on pages to add new description field for my application. I followed the steps mentioned here. The editor appears on the page , but unable to add and edit the content. It gives following message :

" We're sorry, but something went wrong.

We've been notified about this issue and we'll take a look at it shortly. "

My form is :

<% form_for(@forum) do |f| %> <%= f.error_messages %>

<%= f.label :name %>
<%= f.text_field :name %>

<%= f.label :description %>
<%= f.text_area :description , :rows=>4, :class=>"widgEditor" %>

<%= f.label :status %>
<%= f.text_field :status %>

<%= f.submit 'Create' %>
<% end %>

<%= linkto 'Back', forumspath %>

And the contoller code is :

def new @forum = Forum.new @subject = Subject.find(params[:id]) respond_to do |format| format.html # new.html.erb format.xml { render :xml => @forum } end end

# GET /forums/1/edit def edit @forum = Forum.find(params[:id]) end

# POST /forums # POST /forums.xml def create @forum = Forum.new(params[:forum])
```
respond_to do |format|
  if @forum.save
    flash[:notice] = 'Forum was successfully created.'
    format.html { redirect_to(@forum) }
    format.xml  { render :xml => @forum, :status => :created, :location => @forum }
  else
    format.html { render :action => "new" }
    format.xml  { render :xml => @forum.errors, :status => :unprocessable_entity }
  end
end
```
end

Please help me if somebody had solution for this. Or write me - subodh.dhruwaraj@gmail.com

Thanks
Comment on Choosing a simple, lightweight WYSIWYG editor by Wout

June 24th, 2010 @ 21:00 – permalink

Hi,

I'm the author and maintainer of the Qutensil (http://qutensil.com) toolset. In a search for a lightweight rich text editor myself I came across this post. For a few years now I'm struggling with this issue. TinyMCE is not so tiny, way too heavy actually. CKEditor is great but not free, WidgEditor is ok but underdeveloped, nicEdit produces horrible HTML and is not really Webkit friendly, and I could go on...

Your post inspired me to start writing a new editor that is lightweight, Prototype-based, customizable and produces clean output (no <font> tags etc.). It is still in beta but all input is welcome! http://qutensil.com/pages/qtextarea

We're also working on a Rails gem to make it even easier to use Q.js in your Rails apps.

Wout
Comment on Choosing a simple, lightweight WYSIWYG editor by Rob Anderton

July 16th, 2010 @ 23:05 – permalink

@wout: looks very nice, the UI (especially for headings) is miles better than widgEditor. We've also been using uEditor recently, a port of widgEditor for jQuery which is our current Javascript framework of choice. Now if someone can do a jQuery version of yours I'll be very happy :)

You can use Markdown in your comment as well as plain HTML. You can use <filter:jscode lang="ruby"> and </filter:jscode> tags to surround code blocks (supported languages are css, html, javascript and ruby). Your email address will not be published.

If your comment doesn’t appear immediately after posting it could have been marked as spam. Don’t worry: we regularly check for and approve incorrectly filtered comments so you shouldn’t have to wait too long for it to be shown.

About this entry

Author: Rob Anderton
Published: April 8th, 2008 @ 18:55
Updated: July 17th, 2010 @ 23:37
Tags: dhtml, fckeditor, javascript, prototype, rails, rails development, rich text editor, tinymce, widgeditor, wysiwyg
Comments: 16 comments

ruby on rails, jruby, aws, ec2, exalead