== jQuery NaW ==
Thank you for your interest in my jQuery NaW plugin. NaW has been tested in jQuery 1.4.x - 1.6.x but should work just fine in 1.3.x.

NaW (**N**ot **a** **W**YSIWYG) takes a textarea and adds a customizable toolbar above it for easily adding HTML tags, BBCode, or what have you. It's not meant to provide a pretty GUI or rich text editing functionality. Instead, NaW is designed to be a very light weight, fast, and relatively flexible way of editing stuffs in a textarea. Content is inserted into the textarea at the current insertion point or wrapped around selected text in the textarea.

== Invoking the Plugin, Options, and Public Methods ==
=== Setting up the Plugin ===
The plugin requires a toolbar variable to be loaded. The toolbar is a JSON variable that defines the buttons to be used with the textarea you're targeting. See the "NaW Toolbar" section below for more info.

To invoke the plugin, just use this line in your document.ready function...
  $("#mytextarea").naw({options});

=== Plugin options ===
Currently the plugin only has one option: toolbar. This is the variable the NaW uses to build the toolbar.
  var mytoolbar = {
    "buttons" : [
      { 
        "label": "bold",
        "type": "tag",
        "opentag": "<strong>",
        "closetag": "</strong>"
      },
      { 
        "label": "italic",
        "type": "tag",
        "opentag": "<em>",
        "closetag": "</em>"
      }
    ]
  };
  ...
  $("#mytextarea").naw({toolbar: mytoolbar});

=== Public Methods ===
NaW has one public method. It is the method used to inject text into the textarea.
  $.fn.naw().appendText(textarea_jquery_element, begintag [, endtag]  );

This is useful for adding text to the textarea from within user defined functions that the NaW Toolbar invokes (see below).


== NaW Toolbar ==
The toolbar for NaW is defined by a JSON variable.
The plugin demo contains an example toolbar configuration.

=== NaW Toolbar Configuration ===
As said before, an example toolbar is included in this plugin's demo...
  var toolbar = {
    "buttons" : [
      { 
        "label": "bold",
        "type": "tag",
        "opentag": "<strong>",
        "closetag": "</strong>"
      },
      { 
        "label": "italic",
        "type": "tag",
        "opentag": "<em>",
        "closetag": "</em>"
      },
      { 
        "label": "Line Break",
        "type": "tag",
        "opentag": "<br />"
      },
      { 
        "label": "Image",
        "type": "function",
        "func": "getImage"
      },
      { 
        "label": "Date",
        "type": "function_noreturn",
        "func": "putDate"
      },
      { 
        "type": "break",
      },
      { 
        "label": "Font Color",
        "type": "select",
        "func": "setFontColor",
        "options": [
          { "display": "Red", "value": "red" },
          { "display": "Blue", "value": "blue" },
          { "display": "Green", "value": "green" },
        ],
      },
    ]
  };

This example toolbar shows off all the different ways you can create a button on the toolbar. Let's break each down one at a time...

==== HTML Tag Insertion ====
  { 
    "label": "bold",
    "type": "tag",
    "opentag": "<strong>",
    "closetag": "</strong>"
  },

Here is an example of creating a button that will put <strong> tags surrounding the currently selected text in the NaW textarea. The label key is what displays on the toolbar button. The type of "tag" tells NaW you will be injecting tags into the text area. Opentag and closetag are the tags NaW will insert.
  { 
    "label": "Line Break",
    "type": "tag",
    "opentag": "<br />"
  },

This button puts a break tag into the textarea. It's set up the same as the button above except it lacks a closetag key. You can use this configuration for tags that are self-closing.

==== New Toolbar Line ====
  { 
    "type": "break",
  },

A button entry with just a type of "break" will end the current line of toolbar buttons and puts all buttons declared after this on a new line.

==== Buttons That Call User-Defined Functions ====
  { 
    "label": "Image",
    "type": "function",
    "func": "getImage"
  },

A button with a type of "function" calls a user-defined function. The func key takes a string that is the name of the function you want to call. When called, NaW will pass the textarea element into it. NaW expects the function to return either a string (which acts as opentag) or a two element array (which acts as opentag and closetag). After returning a string or array, NaW treats it like a type "tag" button.
  { 
    "label": "Date",
    "type": "function_noreturn",
    "func": "putDate"
  },


A button with a type "function_noreturn" acts the same as "function" does above EXCEPT NaW doesn't handle the function returning anything. This can be useful for button actions that integrates ckfinder or for functions that require user input and may or may not need to put anything into the text area.
  { 
    "label": "Font Color",
    "type": "select",
    "func": "setFontColor",
    "options": [
      { "display": "Red", "value": "red" },
      { "display": "Blue", "value": "blue" },
      { "display": "Green", "value": "green" },
    ],
  },


Finally, we come to buttons with a type "select". This creates a select box with options and accompanying button that fires off a user-defined function. As before, the string defined in "func" is the function the button will call. With a select box, NaW will pass the textarea element and the value of the selected element in the select box. NaW does no expect anything to be returned from the function. The options key is an array of display-value combinations to populate the select box.