Complete usage guide for AW Quick tag editor

Basic Usage

• Include the javascript file awQuickTag.js in your page using the code

  <script type="text/javascript" src="Path to awQuickTag.js"></script>

• Include the CSS file awQuickTag.css if required in your page using the code

  <link rel="stylesheet" href="Path to awQuickTag.css" type="text/css" media="screen" />

• Add the buttons, links or images for the toolbar with the "onclick" value calling the function

  awQuickTags ('ID of the textarea', 'Opening Tag', 'Closing Tag', 'Action');

• Add the <textarea></textarea> tag below the buttons with a specific ID.
• Optionally add the

  <script type="text/javascript">awQuickTagInitiliaze('ID of the textarea');</script>

  for the cookieing the toolbar.

awQuickTags() Function

The awQuickTags() is the main function for adding the code to the textarea. You should call this function by the onclick event as

onclick="awQuickTags();"

This function has three parameters.

awQuickTags('Param 1', 'Param 2', 'Param 3', 'Param 4');

Param 1 :

ID of the <textarea> tag

Param 2 :

Opening Tag eg: <strong>

Param 3 :

Closing Tag eg: </strong>

Param 4 :

Action – Has Three actions and accepted values are

• '' – No value – For wrapping the selected text with Opening and Closing tag
• 'a' – Link – For adding link
• 'img' – Image – For adding Image
• 'replace' – Replace/Add – For replacing/adding text with the opening tag. The closing tag has no use when this action is used

Example

awQuickTags('textBox', '<strong>', '</strong>', '')

Reference Buttons

<input type="button" onClick="awQuickTags('aw_content','<strong>','</strong>','');" value="B" title="Bold"/>
<input type="button" onClick="awQuickTags('aw_content','<em>','</em>','');" value="I" title="Italic"/>
<input type="button" onClick="awQuickTags('aw_content','<u>','</u>','');" value="U" title="Underline"/>

Demo

See the demo here

Download

Click the link below to download AW Quick tag editor

[sc:donateForm]