Wyświetlanie kolorów na czacie

Bartosz82 · 15 Marzec 2013 16:51

Mam na mojej stronie zainstalowany shoutbox i mam tam zrobione możliwość pisania kolorami. Jednak żeby napisać na czacie tekst jakimś kolorem trzeba zaznaczyć kolor jaki się chce i wtedy w miejscu pisania tekstu pojawia mi się takie coś: [/color]

Co zrobić, żeby takie coś się nie pojawiało tylko po kliknięciu w dowolny kolor żeby automatycznie wtedy można było już pisać wybranym kolorem ?

Tak samo jeśli chodzi o pogrubioną czcionke to polu tekstowym wyświetla mi to: [b][/b] a co zrobić żeby też automatycznie już był pogrubiony kolor ? a gdy się kliknie drugi raz w ikonke B to wtedy będzie już normalna czcionka nie pogrubiona. Czy ktoś może mi w tym pomóc ?

Tak wygląda mój kod czata:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’ icon_'. $listaEmotek['graph'][$i] .'.gif

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

Pablo_Wawa · 15 Marzec 2013 18:48

To co chcesz uzyskać wymaga przerobienia linii do wpisywania tekstu - teraz jest to zwykłe pole tekstowe INPUT, gdzie nie da się używać formatowania jakiego chcesz. Żeby uzyskać to co chcesz, musiałbyś w JavaScripcie:

stworzyć własny element do wpisywania tekstu (np. SPAN czy DIV).
napisać obsługę wciskanych klawiszy tak, by to co wpisujesz, pojawiało się w tym elemencie SPAN.
oprogramować wybieranie formatowania (kolor, pogrubienie, pochylenie i podkreślenie) i stosownie do tego modyfikować tekst w SPAN.

Rada: prościej jest zrobić tak, że się włącza kontrolkę (od koloru czy formatowania) i potem wpisywany tekst jest odpowiedniego koloru/formatowania. Zrobienie edycji tekstu w SPAN’ie do mały edytor WYSIWYG HTML - napisanie tego od zera to zbyt wiele roboty - już lepiej poszukaj czegoś w necie, co będzie miało taką funkcjonalność.

Bartosz82 · 15 Marzec 2013 18:59

Ja próbowałem to zrobić tak, że do pliku z czatem dodałem takie linijki kodu:

if ($('#message').val('data-color')) {

$('#message').val('[color=' + $('#message').attr('data-color') + ']' + $('#message').val() + '[/color]');

  }

Ale to mi nie pomogło tylko sprawiło że czat rozsunął się w lewo a stopka strony w prawo. Czy ktoś może mi pomóc jakoś to zrobić żeby mi to jakoś działało sprawnie ?

drobok · 15 Marzec 2013 20:11

Nawet jak by ci to poprawić zapomniałeś o tym, że w html nie ma czegoś takiego jak To nie ma prawa działać. To co masz to na razie zalążki pkt2 z postu Pablo_Wawa :))

Pablo_Wawa · 15 Marzec 2013 20:57

Gotowce do przystosowania dla swoich potrzeb:

http://forum.php.pl/lofiversion/index.php/emplate_IT/docs/latest/t143936.html

http://cstruter.com/blog/45

http://www.pradosoft.com/demos/quickstart/index.php?page=Controls.HtmlArea〈=pl

Bartosz82 · 15 Marzec 2013 22:44

Sprawdziłem te gotowce ale mi to nie chce działać na moim czacie Czy ktoś może mi pomóc mój kod poprawić , który podałem wyżej żebym miał tak jak chce ? bardzo Was proszę

Pablo_Wawa · 16 Marzec 2013 10:41

Spróbuj przerobić tak jednego z tych gotowców, aby wyglądał i działał tak jak to Ty chcesz mieć u siebie (pousuwaj zbędne elementy w przykładzie, resztę przerób na swoje potrzeby), a potem spróbuj to inteligentnie wstawić do swojego kodu.

Bartosz82 · 16 Marzec 2013 14:09

Pablo_Wawa przerabiałem pierwszy kod i kompletnie nie działa u mnie, nawet jak zaznacze jakiś teskt to nie ma żadnego efektu. Skrypt nie działa a kombinowałem z tym skryptem: http://forum.php.pl/index.php?s=&showto … t&p=718782

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’ icon_'. $listaEmotek['graph'][$i] .'.gif

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

Pablo_Wawa · 16 Marzec 2013 21:38

Moje uwagi:

A czytać potrafisz?Cytuję fragment wątku:

Tam jest pole tekstowe , które nie pokaże Ci tekstu pogrubionego (ani inaczej sformatowanego), tylko zwykły tekst typu [.b]pogrubiony tekst[./b] (bez kropek), co zresztą (o ile pamiętam) masz tak na swoim czacie. Także nie zajmuj się przykładami, które operują na zwykłym , czyli polu tekstowym.

Przykład drugi http://cstruter.com/blog/45 - czy przetestowałeś go u siebie i zweryfikowałeś, że rzeczywiście działa (u mnie na FF 19 i IE 9 działa poprawnie)? Jeśli działa, to powoli go przerabiaj tak, żeby miał takie pola i nazwy, jakie są u Ciebie. A potem go po prostu wklejasz do swojego kodu i gotowe.

Sugeruję zajęcie się akurat tym przykładem, ponieważ jest krótki, prosty i elastyczny.

I zwróć uwagę na to, co robi przycisk “Go”, bo on przepisuje sformatowany tekst (jako kod HTML) z okienka do ukrytego pola “text” - u Ciebie musi to być odpowiednio zrobione w funkcji wysyłającej wpisywany tekst z czata.

Zalecam “małe kroczki” przy przerabianiu przykładu, żebyś nie stracił kontroli nad jego poprawnym działaniem.

Bartosz82 · 16 Marzec 2013 23:02

Tylko że ten przykład: http://cstruter.com/blog/45 też operuje na input type żeby był [.b]pogrubiony tekst[./b] (bez kropek) i właśnie nie wiem jak te inputy durne poprawić żeby skrypt działał mi z button type I w ogóle nie wiem jak to zrobić. Czy wkleić kod js do osobnego pliku editor.js czy wkleić go do pliku czat.php i jak to poprzerabiać ? nie mam bladego pojęcia

Pablo_Wawa · 16 Marzec 2013 23:05

Mylisz się! Zwróć uwagę na linię

Editor = document.getElementById('textbox').contentWindow.document;

odwołanie jest do elementu o id=“textbox”, a w kodzie HTML stoi

[/code]

czyli to jest ramka, w której się pisze tekst na “żywca” (rozmiar oczywiście musisz sobie zmienić).

Kod w JavaScripcie możesz wrzucić do czat.php tam gdzie masz inne rzeczy z JS (np. związane z emotkami).

Pamiętaj, że u Ciebie linijka z wpisywanym tekstem na czacie ma id=“message” (a w przykładzie jest to id=“textbox”), więc musisz też to poprawić (“textbox” => “message”). No i jest to INPUT, który musisz zamienić na IFRAME.

Bartosz82 · 16 Marzec 2013 23:12

Mi tylko takie coś przychodzi do głowy i nic innego nie mogę wymyślić

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’ icon_'. $listaEmotek['graph'][$i] .'.gif

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

Pablo_Wawa · 16 Marzec 2013 23:14

Przeczytaj ze zrozumiem moje powyższe uwagi i wskazówki.

Element IFRAME nie może zawierać w sobie żadnych elementów - otwierasz znacznik i go potem zamykasz - jak w przykładzie (w “środku” niego masz właśnie obszar do wpisywania).

Bartosz82 · 16 Marzec 2013 23:21

Teraz dobrze poprawiłem ? w powyższym kodzie ? Czy możesz to sprawdzić i mi napisać albo mi to poprawić ? bardzo Cię proszę.

Pablo_Wawa · 16 Marzec 2013 23:35

Nie, ale prawie dobrze.

Jak pisałem, IFRAME nie zawiera już nic “w sobie”:

[/code]

poza tym zmień wielkość tego pola (szerokość masz zdefiniowaną w style.css, wysokość to 1 znak = 1em - nie testowałem, ale powinno być dobrze).

Bartosz82 · 16 Marzec 2013 23:41

Czy teraz może być dobrze:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’ icon_'. $listaEmotek['graph'][$i] .'.gif

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

Pablo_Wawa · 17 Marzec 2013 10:51

Wciąż masz błędy. Masz trzy pola mające id=“message” (a w dokumencie może być tylko jeden o tym samym id). Twój kod (fragment):

[/code]

Bartosz82 · 17 Marzec 2013 11:23

Zrobiłem tak jak napisałeś, ale niestety wpisywaniu zwykłego tekstu w pole tekstowe nie działa i jest koloru popielatego, a powinno być białe. To pole jest jakby nie aktywne. Nawet teraz zniknął pionowy pasek przewijania, który tam powinien być zawsze na dole. Możesz pomóc ? Tak wygląda teraz mój kod:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’ icon_'. $listaEmotek['graph'][$i] .'.gif

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

Pablo_Wawa · 17 Marzec 2013 12:11

W pliku style.css popraw linię 653 dotyczącą elementu message:

#message { margin: 2px 2px 0 1px; padding: 0; width: 510px; height: 1.5em; font-size: 12px; background-color: #ffffff;}

Dodatkowo możesz już usunąć styl z IFRAME i linia może mieć postać

[/code]


Na końcu dokumentu poprawić trzeba wpis

[code]Editor = $(‘message’).contentWindow.document;
na postać

Editor = document.getElementById('message').contentWindow.document;

No i popraw przyciski I (italic) oraz U (underline), bo teraz wszystkie trzy robią to samo (czyli bold’a). No i możesz usunąć przycisk “Zamknij tagi” bo teraz jest zbędny.

Bartosz82 · 17 Marzec 2013 16:17

Zrobiłem tak jak napisałeś, ale w miejscu pola tekstowego pojawił się suwak, który jest widoczny w czasie pisania tekstu i można nim podwyżyć tekst albo obniżyć a tak być nie powinno. Poza tym, Tekst nie wyświetla się na czacie i nie ma dalej pionowego paska na czacie. Jak klikma w przycisk wyślij to pojawiają się na czacie puste wiadomości. Możesz mi pomóc ? Tak to teraz wygląda:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’ icon_'. $listaEmotek['graph'][$i] .'.gif

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’