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


Donate and show your love

If you find this project useful, please consider a donation. It gives me encouragement and support !

Related Posts

  • Features
  • Screenshot and Demo
  • Download

Features

  • Light weight (only 2.4kb) .
  • Cross browser support
  • No additional files or images required.
  • Customizable with CSS
  • Can be easily added.
  • Can include any no of toolbars in a single page.
  • Can add infinite no of buttons with various actions without the knowledge of coding.
  • Suits comment forms, reply forms and other simple needs
  • Can create sub toolbars for the main toolbar with the ability of toggling them with cookies.

Donate and show your love

If you find this project useful, please consider a donation. It gives me encouragement and support !

Screenshot

AW Quick Tag editor

Demo

Click here to see the demo

Download

Click the link below to download AW Quick tag editor

Download
(AW Quick Tag Editor, 6.8 KiB, 592 hits)


FAQs: FAQs and Usage on AW Quick Tag editor