NAWTE:Not A WYSIWYM Text Editor

NAWTE is, indeed, not a WYSIWYM (What You See Is What You Mean) editor. What it is basically is a class that will help you create your custom WYSIWYM editor. It is heavily influenced by Control.Textarea but the main difference is that it is backed by mootools instead of prototype.

An example

This is a really simple example using BBCode.

Select some text here and play with the buttons above...

More Examples

Example 1: Language: HTML
Example 2: Language: Markdown

Because of NAWTE's simplicity, you can easily customize it to accommodate your own markup language. (Markup, textile, html, wiki etc.)

The idea

The idea basically is to provide you with simple functions that will let you create your very own customized WYSIWYM editor.

How to NAWTEize your textarea

It's pretty easy to use actually. The first thing you want to do is to include MooTools and the NAWTE scripts in your page. After that, I suggest using the OnReady event to create a new 'nawte' object. Just look at this code listing, it should be pretty straightforward. This is the code that was used to create the BBEdit example above. This code is in the head section...



Basically you just create a new "nawte" object and pass it your text area's id. Optionally you can also pass the id of a "ul" element that will serve as the toolbar. If you don't an empty UL will be created. (This is just to allow you more control over the style of your toolbar).

Note: For a full up-to-date documentation with examples, check out the API Docs just below.

API Docs

The complete documentation can be found here:
http://www.silverscripting.com/nawte/Docs/files/nawte-0-3-js.html

Download

NAWTE's source code can be found here: nawte.0.3.js.
A fully documented source code is available here.

Note: It requires MooTools 1.11 which is NOT INCLUDED in the download. The required module are required: Element.Form, and Element.Event (Make sure to keep the lower dependencies checked when downloading MooTools.)

So far I've tested it with IE6, FireFox 2 and Safari 2. More will follow...

Changelog

From 0.2 to 0.3:
- New onchange event.
- New interceptTabs option.
- Several bugs fixed.

Credits/License

As I mentioned in the intro, this idea is based on Control.Textarea for Prototype. It works in a very similar way and you should be able to do the same thing with NAWTE. All credits to Ryan Johnson for the original idea.

As far as NATWTE goes, it's licensed under the MIT License

Questions/Comments

Please leave any question/comment at the nawte post on my blog located here.