nanoWIME

nano Wikimarkup Editor

1. What is nanoWIME?

nanoWIME is a simple javascript editor. It turns a textarea-element into a lightweight editor by adding a simple toolbar. nanoWIME is extensible and flexible: every button and every action can be configured and customized.
[TOC ↑]

2. What is nanoWIME not?

nanoWIME is not a WYSIWYG editor like tinyMCE.
[TOC ↑]

3. Example 1 (internal)

[TOC ↑]

4. Examples 2 (external)

example.html
Webpage with nanoWIME, configured for WikiMarkup
example_html.html
Webpage with nanoWIME, configured for HTML-Markup
example_html2.html
Webpage with nanoWIME, configured for HTML-Markup, configuration in external file
example_html3.html
Webpage with nanoWIME, configured for HTML-Markup, configuration in external file and two button panels

[TOC ↑]

5. Usage

To use nanoWIME, you have to import the javascript file into the webpage:

<script type="text/javascript" src="nanoWIME.js"></script>

After importing the javascript library, the editor has to be configured:

<script type="text/javascript">
nanoWIME._init({
    // General options
    elementID : "my_textarea",
    buttonBar1 : "h1,h2,h3,h4,h5,h6,|,ulist,olist,|,bold,italic,underline,strikethrough,sup,sub,nowiki,|,link_intern,link_extern,|,simple_ref,ref_listing",
    conf : {
    	simple_ref : {
	    title : 'Simple reference [r]',
	    img : 'book_link.png',
	    cssclass : 'button',
	    align : 'middle',
	    elementId : 'toolbar_simpleref_btn',
	    on_mouseover : function() {
		this.className = 'raised';
	    },
	    on_mouseout : function() {
		this.className = 'button';
	    },
	    on_mousedown : function() {
		this.className = 'pressed'; 
	    },
	    on_mouseup : function() { 
		this.className = 'raised'; 
	    },
	    on_click : function() {
		var refName = prompt("Name of reference:", "");
		var groupName = prompt("Groupname of the reference:", "");
		var inString = "');
	    },
	    shortcut: 'r'
	}
    }
});
</script>

Thats all!
[TOC ↑]

6. Configuration

The nanoWIME configuration in details:

elementID (MUST)

ID of the textarea-element

buttonBar1 (MUST)

First button panel: defines the visible buttons in the toolbar.
Pre-defined buttons are:

h1
h2
h3
h4
h5
h6
ulist
olist
bold
italic
underline
strikethrough
sup
sub
nowiki
link_intern
link_extern
| (SPACER)

Every button has to be separeted with a ','-character.

buttonBar2 (OPTIONAL)

Second button panel

buttonBar3 (OPTIONAL)

Third button panel

buttonsConf (OPTIONAL)

Contains the configuration for self-defined buttons. See Example for more informations.

iconsPath (OPTIONAL)

Customized path for the icons.

[TOC ↑]

7. Download

nanoWIME is published under the artistic license 2.0: If you use the library in your own project, please don't remove the original header with informations about the author (me) and the used icon-set!
Latest version: 0.10.01.26.22
Download the latest version: nanoWIME-0.10.01.26.22.zip/download
[TOC ↑]

8. nanoWIME on Sourceforge

nanoWIME (this page) on Sourceforge.net: http://nanowime.sf.net
nanoWIME project page on Sourceforge.net: http://sourceforge.net/projects/nanowime/
File Manager of nanoWIME: https://sourceforge.net/project/admin/explorer.php?group_id=299150
[TOC ↑]

9. Contact / Bugs etc.

Author of nanoWIME: Janne Schulz
If you want to contact me, send an e-mail to:

or visit my website: http://www.janneschulz.net.
[TOC ↑]

Fr 22 Jan 2010 14:54:36 CET