Internet marketing resources, ecommerce web site design tutorials and  just for fun - free cell phone ringtones!
  Taming the Beast - quality web marketing and ecommerce development services

Turn a textarea into a WYSIWYG

Posted by Michael Bloch in web development (Thursday August 9, 2007 )

If you’re running an application that requires users to have knowledge of HTML in order to apply formatting to their submissions and comments, this free utility may well be the answer for you.

Many CMS and blog applications offer very little in the way of easy to use formatting tools for the administrator and users, but you can easily turn any textarea element into a full blown WYSIWYG (What You See Is What You Get) editor with a very handy and free application called TinyMCE. You’ll likely recognize it as it’s used on many sites.

If you’ve considered using TinyMCE in the past (its been around since 2004) but found it too limited or bulky, it’s really worthwhile checking out again – there’s been some major improvements to it over the last 12 months.

I’ve just implemented TinyMCE on a new site I’m working on, EcoSpace.cc, for story submissions as I suspect many of the people who’ll want to submit items might find having to manually enter HTML code too difficult or just plain inconvenient. Using TinyMCE makes adding hyperlinks, embedding Flash movies and all sorts of text formatting a snap.

TinyMCE is highly configurable – here’s just a few example implementations:

Simple Theme
Advanced Theme Full
All Buttons and Plugins

The full metal jacket configuration is still pretty hefty load-time wise, but the great thing about TinyMCE is that you can specify certain buttons and features be switched on or off. If you have a page where there’s multiple textareas and you only want the editor appearing on one of the instances, that’s easy to set up as well (which is what I’ve done on EcoSpace.cc).

Additionally, if you don’t want to alienate the ubergeeks amongst your users by offering such a “toy”, they can either work directly in HTML mode or you can set TinyMCE to “ask” mode – example.

Hat tip to MoxieCode, the makers of TinyMCE for such a wonderful little app!



 

 
7 comments for Turn a textarea into a WYSIWYG
  1. […] Turn a textarea into a WYSIWYG […]

    Pingback by Max Design - standards based web design, development and training » Some links for light reading (7/8/07) — August 13, 2007 @ 5:49 pm

  2. how do you add styles to the styles dropdown? I had a little look and couldn’t figure out how..

    Comment by stuart — August 14, 2007 @ 4:03 am

  3. 142 Kb of code for a simple theme core? Oh, no…

    Comment by dreamwind — August 14, 2007 @ 4:56 am

  4. Hi Stuart; this should help regarding styles and TinyMCE:

    Dreamwind, if you’re looking for a lighter application, OpenWYSIWYG might be of interest.

    Comment by Michael Bloch — August 14, 2007 @ 5:23 am

  5. I found TinyMCE creates poor X/HTML. A much better alternative is WYMeditor or XStandard. This link might also be of help evaluating WYSIWYG editors:

    http://www.standards-schmandards.com/2007/wysiwyg-editor-test-2

    Comment by Erik — August 14, 2007 @ 8:45 am

  6. Thanks for your contribution Erik!

    Comment by Michael Bloch — August 14, 2007 @ 11:01 pm

  7. Something I’ve just added is a compressor for TinyMCE – has speeded things up a bit:

    “Serverside GZip compresses TinyMCE to reduce overall download size. Makes TinyMCE 75% smaller and a lot faster to load.”

    You can get it here:

    http://tinymce.moxiecode.com/download.php

    Comment by Michael Bloch — August 14, 2007 @ 11:03 pm

Sorry, the comment form is closed at this time.