[SOLVED] Add an underline at the push of a button

[malikah]

How would I add the functionality of an underline or bolding at the push of a button. ( The same way I can add them when I post in this forum ).

[kenrbnsn]

That can't be done with PHP, you need to use Javascript.

 

Ken

[mfindlay]

 

I know this isn't php!!, but I've just done this...so heres some JavaScript I found and modified which adds tags in a textarea....

 

//put this in head section..
<script type="text/javascript">
function getSelection(ta)
  { var bits = [ta.value,'','','']; 
    if(document.selection)
      { var vs = '#$%^%$#';
        var tr=document.selection.createRange()
        if(tr.parentElement()!=ta) return null;
        bits[2] = tr.text;
        tr.text = vs;
        fb = ta.value.split(vs);
        tr.moveStart('character',-vs.length);
        tr.text = bits[2];
        bits[1] = fb[0];
        bits[3] = fb[1];
      }
    else
      { if(ta.selectionStart == ta.selectionEnd) return null;
        bits=(new RegExp('([\x00-\xff]{'+ta.selectionStart+'})([\x00-\xff]{'+(ta.selectionEnd - ta.selectionStart)+'})([\x00-\xff]*)')).exec(ta.value);
      }
     return bits;
  }

function matchPTags(str)
  { str = ' ' + str + ' ';
    ot = str.split(/\[[H1|H2|H3|B|U|I|SUB|SUP|UL|OL].*?\]/i);
    ct = str.split(/\[\/[H1|H2|H3|B|U|I|SUB|SUP|UL|OL].*?\]/i);
    return ot.length==ct.length;
  }

function addPTag(ta,pTag)
  { bits = getSelection(ta);
    if(bits)
      { if(!matchPTags(bits[2]))
          { alert('\t\tInvalid Selection\nSelection contains unmatched opening or closing tags.');
            return;
          }
        ta.value = bits[1] + '<' + pTag + '>' + bits[2] + '</' + pTag + '>' + bits[3];
      }
  }
</script>

//put this in body
<p><input type="image"  class="format_button" src="images/text_heading_1.png" onclick="addPTag(document.getElementById('text'),'H1')" />  
<input type="image"  class="format_button" src="images/text_heading_2.png" onclick="addPTag(document.getElementById('text'),'H2')" />  
<input type="image"  class="format_button" src="images/text_heading_3.png" onclick="addPTag(document.getElementById('text'),'H3')" />  
<input type="image"  class="format_button" src="images/text_bold.png" onclick="addPTag(document.getElementById('text'),'B')" />  
<input type="image" class="format_button" src="images/text_italic.png" onclick="addPTag(document.getElementById('text'),'I')" />  
<input type="image" class="format_button" src="images/text_underline.png" onclick="addPTag(document.getElementById('text'),'U')" />  
<input type="image" class="format_button" src="images/text_superscript.png" onclick="addPTag(document.getElementById('text'),'SUP')" />  
<input type="image" class="format_button" src="images/text_subscript.png" onclick="addPTag(document.getElementById('text'),'SUB')" />  
<input type="image" class="format_button" src="images/text_list_bullets.png" onclick="addPTag(document.getElementById('text'),'UL')" />  
<input type="image" class="format_button" src="images/text_list_numbers.png" onclick="addPTag(document.getElementById('text'),'OL')" /></p>

 

I've used images, you could as easily use buttons, you also need to make sure the textarea id=text

 

hope this helps...