AW Quick Tag Editor – Demo

by Aakash Chakravarthy

HTML

<script src="http://www.aakashweb.com/resources/js/aw-quick-tag-editor.js"></script>
<h3>Demo 1</h3>
<p>Simple buttons with basic functions</p>
<div class="awQuickTagToolbar">
     <select id="aw_awQuickTag_Tb_heading" onChange="awQuickTagsHeading('aw_content_1', 'aw_awQuickTag_Tb_heading');" title="Heading">
          <option value="1">Heading 1</option>
          <option value="2">Heading 2</option>
          <option value="3">Heading 3</option>
          <option value="4">Heading 4</option>
          <option value="5">Heading 5</option>
          <option value="6">Heading 6</option>
   </select>
  |
     <input type="button" onClick="awQuickTags('aw_content_1','<strong>','</strong>','');" value="B" title="Bold"/>
     <input type="button" onClick="awQuickTags('aw_content_1','<em>','</em>','');" value="I" title="Italic"/>
     <input type="button" onClick="awQuickTags('aw_content_1','<u>','</u>','');" value="U" title="Underline"/>
       |
  <input type="button" onClick="awQuickTags('aw_content_1','<a ','</a>','a');" value="Link" title="Add Link"/>
       <input type="button" onClick="awQuickTags('aw_content_1','<img ','/>','img');" value="Image" title="Add Image"/>
     <input type="button" onclick="awQuickTags('aw_content_1','<code>','</code>','');" value="Code" title="Code"/>
      |
     <input type="button" onclick="awQuickTags('aw_content_1','<ul>','</ul>','');" value="ul" title="Unordered List"/>
     <input type="button" onclick="awQuickTags('aw_content_1','<ol>','</ol>','');" value="ol" title="Ordered List"/>
     <input type="button" onclick="awQuickTags('aw_content_1','<li>','</li>','');" value="li" title="List"/>
     <input type="button" onclick="awQuickTags('aw_content_1','<p>','</p>','');" value="P" title="Wrap as a Paragraph"/>
</div>
<textarea id="aw_content_1" rows="10" style="width:99%"></textarea>

<h3>Demo 2</h3>
<p>Another demo with extra toolbar with cookie enabled, togglable and with replace / Add buttons</p>
<div...

CSS

input[type=button]{
    padding: 2px 10px;
}
.awQuickTagToolbar{
    background: #ECECEC;
    padding: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 99%;
    margin: 5px 0px;
}
.awQuickTagToolbar input{
    background: #FFFFFF;
    font-weight: bold;
    border: 1px solid #CCCCCC;
}
.awQuickTagToolbar input:hover{
    background: #999999;
    border-color: #CCCCCC;
    color: #FFFFFF;
    cursor: pointer;
}
.awQuickTagToolbar2{
    background: #A8EEFF;
    padding: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 99.%;
    margin: 5px 0px;
    width: 99%;
}
.awQuickTagToolbar2 input{
    background: #FFFFFF;
    font-weight: bold;
    border: 1px solid #CEF5FF;
    color: #000000;
}
.awQuickTagToolbar2 input:hover{
    background: #00CCFF;
    color: #FFFFFF;
    cursor: pointer;
    border: 1px solid #B9F1FF;
}
.toggleButton img{
    float: right;
    cursor: pointer;
    padding: 5px 3px 3px;
}
#moreAtts{
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #ececec;
    font-size: 10px;
    float: right;
    padding: 0px 5px 2px;
    margin-bottom: 5px;
    color: #999999;
}
#moreAtts a{
    text-decoration: none;
    color: #666666;
}
.awQTExtraBt{
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #CCCCCC;
}
.awQTExtraBt input{
    font-size: 10px;
    font-weight: normal;
    margin-top: 3px;
    padding: 3px 10px;
}

JavaScript

window.onload = function(){
    awQuickTagInitiliaze('awQTToolbar1');
}