Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: BBCode
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
korey
13.04.2010, 17:41:39
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ą. sad.gif
np:
Przyjmujemy ze niebieski kolor to zaznaczony tekst biggrin.gif
białe koty nie lubią czarnych psów 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 -->
mortus
13.04.2010, 18:18:31
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
13.04.2010, 18:23:44
nie dałbyś rady jakiegoś przykładu mi napisać..? na Js to ja zieloniutki jestem sad.gif
Pawel_W
13.04.2010, 18:28:48
hmm, najprościej to wejdź na jakieś forum i zobacz jak oni mają to zrobione smile.gif
mortus
13.04.2010, 18:31:17
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
13.04.2010, 18:36:01
no wlasnie mam forum ale tamte funkcje są dla mnie zbyt skomplikowane sad.gif
Pawel_W
13.04.2010, 18:41:21 
[JAVASCRIPT] pobierz, plaintext 
  1. function getSelectedText(theForm) {
  2. 	var message = theForm.message;
  3. 	var selected = '';
  4.  
  5. 	if(navigator.appName=="Netscape" &&  message.textLength>=0 && message.selectionStart!=message.selectionEnd ) 
  6.   		selected=message.value.substring(message.selectionStart,message.selectionEnd);	
  7.  
  8. 	else if( (myVersion >= 4) && is_ie && is_win ) {
  9. 		if(message.isTextEdit){ 
  10. 			message.focus();
  11. 			var sel = document.selection;
  12. 			var rng = sel.createRange();
  13. 			rng.colapse;
  14.  
  15. 			if((sel.type == "Text" || sel.type == "None") && rng != null){
  16. 				if(rng.text.length > 0) selected = rng.text;
  17. 			}
  18. 		}	
  19. 	}
  20.   	return selected;
  21. }
[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
13.04.2010, 18:55:56
Dobra po siedziałem troszke w google i znalazłem cos takiego:

[JAVASCRIPT] pobierz, plaintext 
  1. <script>
  2. function bbcode_ins(fieldId, tag)
  3. {
  4. field=document.getElementById(fieldId);
  5. if(tag=='b' || tag=='i' || tag=='u' || tag == 'php' || tag == 'code')
  6. {
  7. if (document.selection)
  8. {
  9. field.focus();
  10. sel = document.selection.createRange();
  11. sel.text = '[' + tag + '][/' + tag+']';
  12. }
  13. //MOZILLA/NETSCAPE/SAFARI support
  14. else if (field.selectionStart || field.selectionStart == 0)
  15. {
  16. var startPos = field.selectionStart;
  17. var endPos = field.selectionEnd;
  18. field.focus();
  19. field.value = field.value.substring(0, startPos)
  20. + '[' + tag + '][/' + tag+']'
  21. + field.value.substring(endPos, field.value.length);
  22. }
  23. }
  24. else if(tag == 'img')
  25. {
  26. var path = prompt('Podaj adres Obrazka', 'http://');
  27. if(!path)
  28. {
  29. return;
  30. }
  31. if (document.selection)
  32. {
  33. field.focus();
  34. sel = document.selection.createRange();
  35. sel.text = '[' + tag + ']' + path + '[/' + tag+']';
  36. }
  37. //MOZILLA/NETSCAPE/SAFARI support
  38. else if (field.selectionStart || field.selectionStart == 0)
  39. {
  40. var startPos = field.selectionStart;
  41. var endPos = field.selectionEnd;
  42. field.focus();
  43. field.value = field.value.substring(0, startPos)
  44. + '[' + tag + ']' + path + '[/' + tag+']'
  45. + field.value.substring(endPos, field.value.length);
  46. }
  47. }
  48. else if(tag == 'url')
  49. {
  50. var url = prompt('Podaj Adres URL', 'http://');
  51. var linkText = prompt('Podaj treść odnośnika', '');
  52. if(!url || !linkText)
  53. {
  54. return;
  55. }
  56. if (document.selection)
  57. {
  58. field.focus();
  59. sel = document.selection.createRange();
  60. sel.text = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';
  61. }
  62. //MOZILLA/NETSCAPE/SAFARI support
  63. else if (field.selectionStart || field.selectionStart == 0)
  64. {
  65. var startPos = field.selectionStart;
  66. var endPos = field.selectionEnd;
  67. field.focus();
  68. field.value = field.value.substring(0, startPos)
  69. + '[' + tag + '='+url+']' + linkText + '[/' + tag+']'
  70. + field.value.substring(endPos, field.value.length);
  71. }
  72. }
  73. }
  74. </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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.