Forum PHP.pl > [JavaScript] Tagowanie tekstu w textarea

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Tagowanie tekstu w textarea

Print_Screen

5.06.2012, 22:24:58

Chciałbym wstawić na stronę najprostszy button, który otaguje mi zaznaczone słowo w htmlowym textarea.

Zaznaczam wyraz, klikam na ów przycisk i robi się <tag>wyraz</tag>.

Nie znam javascriptu, więc w zasadzie proszę o gotowy wzór, który przerobiłbym na różne tagi, bo zasada z pewnością jest ta sama dla pogrubiania, podkreślania etc.

IProSoft

5.06.2012, 23:28:31

Nie ten dział: Gotowe rozwiązania
https://www.google.pl/search?q=bbcode+gotowy+skrypt

Print_Screen

6.06.2012, 00:40:12

Nie da się w javascripcie?

Nie buduję forum internetowego. Najlepiej, gdyby nie musiało działać po stronie serwera.

mccd

6.06.2012, 00:48:53

Tu masz gotowca z JQuery.
http://jsfiddle.net/43gqC/1/

Print_Screen

6.06.2012, 20:13:55

Wielkie dzięki! Oto mi chodziło! Poniższy kod uzyskany dzięki zlinkowanej stronie ładnie działa.

[HTML] pobierz, plaintext 
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
 
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
 
<textarea id='text'>
Ala ma kota, a kot ma Alę.
</textarea><br/>
 
<button type="button" id='tag'>Tag</button>
 
<script type="text/javascript"><!--
function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$('#tag').click(function(){
    wrapText("text", "<tag>", "</tag>");
});
//--></script>
</body>
</html> 
[HTML] pobierz, plaintext

Czy dałoby się może jakoś poprzestawiać te komendy tak, żeby dorobić opcję odwracającą ostatnie zmiany? (przycisk cofnij).

mccd

7.06.2012, 17:15:58

http://jsfiddle.net/43gqC/2/

W tym skrypcie możesz cofnąć ostatnią zmianę, żeby móc cofać więcej wstecz, musiałbyś zapisywać wartość textarea po każdej zmianie np. do tablicy.

Print_Screen

13.06.2012, 17:30:44

Wielkie dzięki!

Odświeżam temat, bo napotkałem mały problem. Otóż funkcja działa tylko z polem o nazwie text. Jeśli są dwa pola o nazwie text, to działa z tym pierwszym.

Czy możliwe jest by działało to na wszystkich polach w dokumencie? Czy też każde pole tekstowe musiałoby mieć swoje przyciski do tagowania?

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.