• Search
• Print
• Login

QuickTags

Addon Author: Susan E. Stoner
Version: 1.02
Last Release Date: November 18, 2005
License: LGPL license
Works with: Tested with Coranto v1.24 and V1.31.5
Available at: Coranto Demo

Description

From the addon docs by Sue Stoner:

QuickTags is a simple addon that will add buttons to the News Text field allowing users to insert selected HTML tags to news posts quickly and easily.

QuickTags will work with MSIE and Gecko-based browsers (Mozilla, Camino, Firefox, Netscape). QuickTags will not work correctly with browsers that do not support inserting at the cursor position (Opera, Safari, OmniWeb). QuickTags will append tags to the end of the content in unsupported browsers. Javascript must be enabled.

QuickTags has been tested with Coranto v 1.23 and 1.24. It should also work with older and newer versions of Coranto, but has not been tested.

QuickTags is not compatible with the WebWriter or HTMLBuilder Addons.

QuickTags comes with tags defined for bold, italic, underline, Mailto, and Link.

QuickTags is based on JS Quicktags by Alex King.

Using QuickTags

QuickTags adds buttons above the text entry field that can be used to insert html (or just about any other text into the text field.

This image shows an installation where custom tags have been added.

You simply click on the tag for the code you want to insert and it is inserted at the cursor in supported browsers. If the tag has both an open and close tag the button will change to the close tag after the open tag is inserted. If text is highlighted the tags are inserted before and after the text.

On a browser that does not support inserting at the cursor position the tags are inserted at the end of the text in the field, so you can still use QuickTags as you enter the text.

↑ Contents

Customizing the Tags

QuickTags depends on javascript to work. This section will not be a javascript tutorial, but will show you how to add and modify the tags that are available for you to use.

How It All Works

This function:

function edButton(id, display, tagStart, tagEnd, frmtTag, open) {
	this.id = id;			// used to name the toolbar button
	this.display = display;		// label on button
	this.tagStart = tagStart; 	// open tag
	this.tagEnd = tagEnd;		// close tag
	this.frmtTag = frmtTag		// for display separator
	this.open = open;		// set to -1 if tag does not need to be closed
}

defines the structure of each button. The comments tell us what each line of the button definition does. So this button:

edButtons[edButtons.length] = new edButton('ed_br'
                                          ,'BR'
                                          ,'<br />'
                                          ,''
                                          ,'&nbsp;&nbsp;'
                                          ,-1
                                          );

would be used for the html break tag.

• ed_br is the id (unique name
• BR is the text to be displayed on the button
• <br /> is the opening tag
• This line would have the closing tag if used
• This line is used to format the list (examples later)
• The last line is set to -1 if the tag does not have to be closed

So to add a new tag you simply copy a tag definition and edit it to fit your needs.

edButtons[edButtons.length] = new edButton('ed_test'
                                          ,'Test'
                                          ,'This is a test.'
                                          ,''
                                          ,''
                                          ,-1
                                          );

The above tag definition would insert the text This is a test. when clicked.

↑ Contents

edButtons[edButtons.length] = new edButton('ed_ul'
                                          ,'UL'
                                          ,'<ul>'
                                          ,'</ul>'
                                          ,''
                                          );

This tag definition inserts the opening and closing tags for an unordered list.

Pop-Up Information Entry

edButtons[edButtons.length] = new edButton('ed_link'
                                          ,'Link'
                                          ,''
                                          ,'</a>'
                                          ); // special case

This is the tag definition for entering a url to create a link. You will notice that the information for the opening tag is missing. In the script there is a series of routines to handle special cases like this. This is done by checking the id of the button clicked and then taking action based on that id.

The javascript above will cause a pop-up input window to open where the URL can be typed or pasted.

↑ Contents

Formatting the Tag Display

You can format the tag display to group tags together and to display multiple rows of tags.

You can use any valid html as separators. Possibilities include:

• '' - nothing, no space at all
• ' ' = a space
• ' ' - non-breaking space to provide spacing, but keep the buttons on the same row
• '  ' - a double non-breaking space to provide separation between groups
• '<br>' - html break to start a new row

Notes and Warnings

• Each button must have a unique name (id).
• Follow the correct format when adding a routine for a special button.
• Make a backup of the original file before making changes.

Further Reading

Empty Field Bug and Solution
QuickTags 1.02 Release Discussion

↑ Contents

You can leave comments using this form.