BBCode, Problem z porawieniem w BBCode zaznaczonego tekstu w textarea. HELP Opcje

[korey]

Witam.. Od kilku dni robię sobie BBCode na stronce. wszystkie Tagi działają poprawnie i oprawianie tekstu z polu textarea niby też, bo po kliknięciu na button w BBCode oznacza mi cały tekst jaki sie znajduje w textarea, a nie to co zaznaczyłem myszką. (IMG:style_emoticons/default/sad.gif)
np:
Przyjmujemy ze niebieski kolor to zaznaczony tekst (IMG:style_emoticons/default/biggrin.gif)
białe koty nie lubią czarnych psów (IMG:style_emoticons/default/biggrin.gif)

Kod

po kliknięciu na button B --> pogrubienie,
zaznacza cały tekst w  [b]białe koty nie lubią czarnych psów :D[/b]

a powinno oznaczyć tylko "nie lubią czarnych"

o to mój kod:

Kod

<!-- POCZĄTEK PROBLEMU -->
<form name="myform" action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<table class="form" name="form" border="0px" cellpadding="3px" cellspacing="0px">
<tbody>

     <h3>Dodawanie newsa.</h3>

<?php
      $dzien = date("j:m:Y");
      $godzina = date("H:i:s");
      $data = "Dnia $dzien, $godzina";
      
?>
      <div id="targetDiv">
<link rel="stylesheet" type="text/css" href="functions/newsy.css" media="screen"/>
      
      </div>
    <tr>
    <td colspan="2"><div id="alert"><?php echo $info_txt; ?></div></td>
    </tr>
    <tr>
    <td>Tytuł:</td>
    <td><input id="tytul" value="<?php echo $tytul; ?>" name="tytul" type="text" size="34" value="" /></td>
    </tr>

    <tr>
    <td>Data:</td>
    <td><input id="data" name="data" type="text" size="34" value="<?echo $data; ?>" /></td>
    </tr>

    <tr>
    <td>Autor:</td>
    <td><input id="autor"  name="autor" id="autor" type="text" id="autor"size="34" value="" /></td>
    </tr>

    <tr>
    <td></td>
    <td>
<input name="B" type="button" value="B" title="Pogrubiony tekst: [b]tekst[/b] " style="font-weight: bold;" onclick="java script:document.myform.tresc.value='[b]'+document.myform.tresc.value+'[/b]'" />

<input type="button" value="I" name="I" title="Tekst pochyły: [i]tekst[/i] " style="font-style: italic;" onclick="java script:document.myform.tresc.value='[i]'+document.myform.tresc.value+'[/i]''"/>

<input type="button" value="U" name="U" title="Podkreślony tekst: [u]tekst[/u] " style="text-decoration: underline;" onclick="java script:document.myform.tresc.value='[u]'+document.myform.tresc.value+'[/u]''"/>

<input type="button" value="IMG" name="obrazek" title="Wstawianie Obrazka: [img]url obrazka[/img] " />
<input type="button" value="URL" name="obrazek" title="Wstawianie Linku: [url]url obrazka[/url] " />
    <select>
    <option />Wybierz Kolor
    <option />----------------
    <option name="kolor" value="#FFFFFF" style="background-color: #FFFFFF;"/>#FFFFFF
    <option name="kolor" value="#E4E638" style="background-color: #E4E638;"/>#E4E638
    <option name="kolor" value="#E69238" style="background-color: #E69238;"/>#E69238
    <option name="kolor" value="#D2B7E9" style="background-color: #D2B7E9;"/>#D2B7E9
    <option name="kolor" value="#38E648" style="background-color: #38E648;"/>#38E648
    <option name="kolor" value="#3A9A30" style="background-color: #3A9A30;"/>#3A9A30
    <option name="kolor" value="#FF0000" style="background-color: #FF0000;"/>#FF0000
    <option name="kolor" value="#E63838" style="background-color: #E63838;"/>#E63838
    <option name="kolor" value="#38E4E6" style="background-color: #38E4E6;"/>#38E4E6
    <option name="kolor" value="#5B88DB" style="background-color: #5B88DB;"/>#5B88DB
    <option name="kolor" value="#385DE6" style="background-color: #385DE6;"/>#385DE6
    <option name="kolor" value="#E638D4" style="background-color: #E638D4;"/>#E638D4
    <option name="kolor" value="#7A1568" style="background-color: #7A1568;"/>#7A1568
    <option name="kolor" value="#000000" style="background-color: #000000;"/>#000000
    </select>
    </td>
    </tr>

    <tr>
    <td>Krótka Tresc:</td>
    <td><textarea id="tresc" name="tresc" id="content" cols="60" rows="7"><?php echo $tresc; ?></textarea></td>
    </tr>

<!-- KONIEC PROBLEMU -->