Thursday, May 10th, 2007

Rich Text Controls: Tiny MCE 2.1.1 and Control.TextArea

Category: JavaScript, Library, RichTextWidget

There are a couple of updates in the world of rich text controls.

Ryan Johnson has created a new control: Control.TextArea. This is a very different tool, as it isn’t about WYSIWYG functionality, but rather building toolbar based text areas that wrap simple text. It has support for functionality such as Markdown, Textile, etc. Everything can be driving from JavaScript to create your own functionality:


  1. textarea = new Control.TextArea('textarea_id');
  2. textarea.textarea; //refers to the DOM element 'textarea_id'
  3. textarea.observe('change',function(){
  4.     //called after the user types content, or clicks a button
  5.     //the change event refers to the Control.TextArea object, NOT the DOM element object
  6. });
  7. textarea.onChangeTimeoutLength = 500; //default value, amount to wait before firing the change callback
  9. textarea.getValue(); //gets the contents of the whole textarea
  10. textarea.getSelection(); //gets the current selection as a string
  11. textarea.replaceSelection('my new text'); //repalce the current selection with this text
  12. textarea.wrapSelection('before text','after text'); //wrap the current selection with these two strings
  13. textarea.insertBeforeSelection('before text'); //inserts the string before the current selection
  14. textarea.insertAfterSelection('after text'); //inserts the string after the current selection
  15. textarea.insertBeforeEachSelectedLine('> '); //inserts the string before each selected line
  16. textarea.injectEachSelectedLine(function(lines,line){ //works just like Hash.inject() for each selected line
  17.     lines.push(line); //this logic won't modify the selection, but you can modify each line here
  18.     return lines;
  19. });

TinyMCE has a new 2.2.1 release, that has update such as:

  • Fixed problem where TinyMCE failed to initialized if used together
    with libraries like Scriptaculous.
  • Fixed various problems with the media plugin, now easier to embed
  • Fixed so store/restore selection logic works in Opera and Safari
  • Cleaned up the source code by removing some obsolete code.
  • Removed debug option, no longer needed since the devkit does it better.
  • Removed old IE 5.0 code and reduced the overall code by using smarter
    prototype add methods.

Posted by Dion Almaer at 9:26 am

3.9 rating from 39 votes


Comments feed TrackBack URI

Hot damn! The TinyMCE news is awesome! That was so frustrating before.

Comment by Tim Bendt — May 10, 2007

Took me one minute to find a bug in the otherwise intriguing Control.TextArea… Click to insert a hyperlink or image and click cancel — the link or image URL isn’t added, but the markup around it is. Oops!

Comment by Brian — May 10, 2007

Brian, thanks for posting that. I’ve fixed that in all three of the toolbar implementations. I was checking for false instead of null.

Comment by Ryan Johnson — May 10, 2007

It’s me or I see TinyMCE 2.1.1 as last version?

Comment by Garito — May 11, 2007

Awesome! That’ll save my life. I was getting bored with a mass of non-working bits of Javascript code and my faulted attempts to find some nice workaround to work with selections.

Comment by GK — May 12, 2007

Fantastic stuff. I can’t get over how useful the Control suite by Ryan is. I’ve found myself including his libraries all over the place, particularly the tidbits and tabs systems. I can’t see Control.TextArea being any different.

Comment by Ben — May 14, 2007

I am using the fantastic javascript framework MooTools for most of my projects. I need a sweet and simple way for my clients to add Markdown markup, but the awesome Control.TextArea was sadly not compatible with MooTools.

So I started to work on markdown_toolbar.js which is just a port of Control.TextArea to the MooTools framework.

Find out more over at


Comment by Peter Hellberg — September 18, 2007

Leave a comment

You must be logged in to post a comment.