TagMaker

docs

Another thing we do a lot in our CMS environment is enter text. We have a simple text editor (see below) that helps users author html (it is not a WYSIWYG editor) and it supports custom commands and tags. Some tags require the user to enter data, for instance, an image tag. The user must supply things like the url to the image and the dimensions. Additionally, our CMS has custom tags that we use that aren't standard html. So what we have here is a shortcut to prompt the user to fill in the gaps in such a tag.

The syntax to create a new one looks like this:

var imgBuilder = new TagMaker.extend({
	name: "Image Builder",
	output: '<img src="%Full Url%" width="%Width%" height="%Height%" alt="%Alt Text%" style="%Alignment%"/>',
	help: {
		'Full Url':'Enter the external URL (http://...) to the image',
		'Width':'Enter the width in pixels.',
		'Height':'Enter the height in pixels.',
		'Alt Text':'Enter the alternate text for the image.',
		'Alignment':'Choose how to float the image.'
	},
	example: {
		'Full Url':'http://i.i.com.com/cnwk.1d/i/hdft/redball.gif'
	},
	'class': {
		'Full Url':'validate-url required',
		'Width':'validate-digits required',
		'Height':'validate-digits required',
		'Alt Text':'required'
	},
	selectLists: {
		Alignment: [
			{
				key: 'left',
				value: 'float: left'
			},
			{
				key: 'right',
				value: 'float: right'
			},
			{
				key: 'none',
				value: 'float: none',
				selected: true
			},
			{
				key: 'center',
				value: 'margin-left: auto; margin-right: auto;'
			}
		]		
	},
	showResult: false
});

This just creates the instance though. You still need to attach it to something. For this, you use the method prompt and pass it the element you want it associated with. This means you can have one instance for numerous inputs and just prompt it with each element as you use it.

$$('#input1, #input2').addEvent('click', function(){
   imgBuilder.prompt(this);
});

Here's a working example:
make anchor tag

Included in the library are two default examples: an image tag and an anchor tag: TagMaker.image and TagMaker.anchor. You can see both of these in action in the example for SimpleEditor.—-