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ą.
np:
Przyjmujemy ze niebieski kolor to zaznaczony tekst
białe koty nie lubią czarnych psów

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 -->

[mortus]

Wykorzystaj w kodzie JavaScript selectionStart, selectionEnd i replace.
Radziłbym zrobić odpowiednie funkcje i właśnie je wywoływać poprzez onclick.

PS. Używaj na forum właściwego BBCode.

[korey]

nie dałbyś rady jakiegoś przykładu mi napisać..? na Js to ja zieloniutki jestem

[Pawel_W]

hmm, najprościej to wejdź na jakieś forum i zobacz jak oni mają to zrobione

[mortus]

Heh, podałem Ci linki, pod którymi znajdziesz przykłady użycia obu funkcji. Trzeba je tylko w odpowiedni sposób połączyć. Najlepiej w ciele jednej funkcji, która będzie wywoływana przez onclick. Ewentualnie zrób tak, jak radzi Pawel_W.

[korey]

no wlasnie mam forum ale tamte funkcje są dla mnie zbyt skomplikowane

[Pawel_W]

[JAVASCRIPT] pobierz, plaintext 
function getSelectedText(theForm) {
	var message = theForm.message;
	var selected = '';
 
	if(navigator.appName=="Netscape" &&  message.textLength>=0 && message.selectionStart!=message.selectionEnd ) 
  		selected=message.value.substring(message.selectionStart,message.selectionEnd);	
 
	else if( (myVersion >= 4) && is_ie && is_win ) {
		if(message.isTextEdit){ 
			message.focus();
			var sel = document.selection;
			var rng = sel.createRange();
			rng.colapse;
 
			if((sel.type == "Text" || sel.type == "None") && rng != null){
				if(rng.text.length > 0) selected = rng.text;
			}
		}	
	}
  	return selected;
}
[JAVASCRIPT] pobierz, plaintext 

wzięte "na żywca" z pierwszego lepszego forum

powiedz mi, co jest w tym niezrozumiałego? podstawiasz formularz a skrypt zwraca ci zaznaczenie z pola o nazwie "message" w tym formularzu...

[korey]

Dobra po siedziałem troszke w google i znalazłem cos takiego:

[JAVASCRIPT] pobierz, plaintext 
<script>
function bbcode_ins(fieldId, tag)
{
field=document.getElementById(fieldId);
if(tag=='b' || tag=='i' || tag=='u' || tag == 'php' || tag == 'code')
{
if (document.selection)
{
field.focus();
sel = document.selection.createRange();
sel.text = '[' + tag + '][/' + tag+']';
}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos)
+ '[' + tag + '][/' + tag+']'
+ field.value.substring(endPos, field.value.length);
}
}
else if(tag == 'img')
{
var path = prompt('Podaj adres Obrazka', 'http://');
if(!path)
{
return;
}
if (document.selection)
{
field.focus();
sel = document.selection.createRange();
sel.text = '[' + tag + ']' + path + '[/' + tag+']';
}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos)
+ '[' + tag + ']' + path + '[/' + tag+']'
+ field.value.substring(endPos, field.value.length);
}
}
else if(tag == 'url')
{
var url = prompt('Podaj Adres URL', 'http://');
var linkText = prompt('Podaj treść odnośnika', '');
if(!url || !linkText)
{
return;
}
if (document.selection)
{
field.focus();
sel = document.selection.createRange();
sel.text = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';
}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos)
+ '[' + tag + '='+url+']' + linkText + '[/' + tag+']'
+ field.value.substring(endPos, field.value.length);
}
}
}
</script>
[JAVASCRIPT] pobierz, plaintext 

Teraz powie mi ktoś jak moge to połączyć z takim formularzem.?

Kod

<form name="myform" id="fieldId" action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<table class="form" name="form" border="0px" cellpadding="3px" cellspacing="0px">
<tbody>

     <h3>Dodawanie newsa.</h3>
      <div id="targetDiv">
<link rel="stylesheet" type="text/css" href="functions/newsy.css" media="screen"/>
    
    <tr>
    <td></td>
    <td>
<input type="button" id="fieldId" onclick="bbcode_ins('comment', 'b')" value="B" style="width:15px;font-weight:bold;" />
<input type="button" id="fieldId" onclick="bbcode_ins('comment', 'u')" value="U" style="width:15px;" />
<input type="button" id="fieldId" onclick="bbcode_ins('comment', 'i')" value="I" style="width:15px;font-style:italic;" />
<input type="button" id="fieldId" onclick="bbcode_ins('comment', 'img')" value="img" style="width:25px;" />
<input type="button" id="fieldId" onclick="bbcode_ins('comment', 'url')" value="url" style="width:25px;" />
<input type="button" id="fieldId" onclick="bbcode_ins('comment', 'php')" value="php" style="width:25px;" />
<input type="button" id="fieldId" onclick="bbcode_ins('comment', 'code')" value="code" style="width:30px;" />
    </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>
    
    </body>
    </table>
    </form>

Z góry dzięki za pomoc

Ten post edytował korey 14.04.2010, 18:26:59