Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Grafika w textarea
Forum PHP.pl > Forum > Po stronie przeglądarki
sniezny_wilk
16.02.2008, 11:12:07
Witam,

przeglądałem trochę tematów na tym forum i nie znalazłem odpowiedniego, owszem znalazłem tinymce, ale to nie jest rozwiązanie o jakie mi chodziło. Szukam rozwiązania podobnego do tego, które jest zastosowane na tym forum w trybie z rozbudowanym edytorem postów. Tzn. chciałbym, aby po kliknięciu na wybraną emoticonę, pojawiła się w textarea. Czy ktoś wie jak wymusić to (grafikę) na textarea ? Będę wdzięczny za każdą podpowiedź.
b_chmura
16.02.2008, 12:34:25
chciałbyś zauważyć że to nie jest textarea a div...
Kod
<div style="width: 150px; height: 200px; overflow: auto;"> dużo treści </div>
Kowalikus
16.02.2008, 12:39:17
chciałbyś zauważyć że to nie jest div a iframe winksmiley.jpg

Poniżej prosty przykład:

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3. <script type="text/javascript" language="javascript">
  4.  
  5.  
  6.  
  7. function edytowalnyiframe() 
  8. {
  9.   var edytowalnyiframe = document.getElementById('edytowalnyiframe').contentWindow.document || document.getElementById('edytowalnyiframe').contentDocument.document;
  10.  
  11.     edytowalnyiframe.body.innerHTML = "<strong>poniżej php.pl:</strong><br /><img src='http://forum.php.pl/style_images/1/logo4.gif' border='1'>";
  12.  
  13.   //jeśli nie jest to IE
  14.   if(!document.all) 
  15.   {
  16.     edytowalnyiframe.designMode = "on";
  17.   } 
  18.   else 
  19.   {
  20.     edytowalnyiframe.body.contentEditable = true;
  21.   }
  22. }
  23.  
  24. window.onload = function() 
  25. {
  26.   edytowalnyiframe();
  27. }
  28.  
  29.  
  30.  
  31. </script>
  32.   </head>
  33.   <body>
  34.  
  35.  
  36.   <iframe scrolling="auto" name="edytowalnyiframe" id="edytowalnyiframe" style="width:400px; height:200px;">
  37.  
  38.  
  39.   </iframe>
  40.  
  41.   </body>
  42. </html>
[HTML] pobierz, plaintext
b_chmura
16.02.2008, 12:50:07
Kowalikus: żeby sie nie rozpisywać ramki trącą.

a Panu sniezny_wilk chyba jeszcze o coś innego chodzi. Poczytaj o "Javascript wstawianie tekstu do textarea", następnie o "BBCode na własnej stronie", wyrażeniach regularnych, funkcji preg_replace" title="Zobacz w manualu PHP" target="_manual
Kowalikus
16.02.2008, 13:03:24
Cytat
rozbudowanym edytorem postów

No więc chyba jednak o to chodzi. TinyMCE, Fck i reszta także używają iframe.

Do mojego przykładu dodaj jeszcze gdzieś w body link do umieszczenia obrazku:
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="document.getElementById('edytowalnyiframe').contentWindow.document.execCommand('InsertImage', false, 'http://forum.php.pl/style_images/1/logo4.gif'); return false;">Umieść logo php.pl</a>
[HTML] pobierz, plaintext
sniezny_wilk
16.02.2008, 13:11:19
Cytat(Kowalikus @ 16.02.2008, 13:03:24 ) *
No więc chyba jednak o to chodzi. TinyMCE, Fck i reszta także używają iframe.

Do mojego przykładu dodaj jeszcze gdzieś w body link do umieszczenia obrazku:
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="document.getElementById('edytowalnyiframe').contentWindow.document.execCommand('InsertImage', false, 'http://forum.php.pl/style_images/1/logo4.gif'); return false;">Umieść logo php.pl</a>
[HTML] pobierz, plaintext


Dzięki za odpowiedź, zaraz przetestuje rozwiązanie. Chodziło mi o wstawianie do textarea.

@kowalikus - mylisz się, tinymce używa jaknajbardziej textarea.
Kowalikus
16.02.2008, 13:26:04
@sniezny_wilk - tinyMCE i FCKeditor korzystają z iframe aby imitować textarea, obiekt textarea również znajduje się dokumencie. Działa to w ten sposób, że gdy jest coś zmieniane w iframe automatycznie zawartość body tego iframe'a jest uaktualniana do textarea, który jest ukryty. Textarea potrzebne jest do przechowywania danych i do ich późniejszego wysłania formularzem.
sniezny_wilk
16.02.2008, 13:30:15
Cytat(Kowalikus @ 16.02.2008, 13:26:04 ) *
@sniezny_wilk - tinyMCE i FCKeditor korzystają z iframe aby imitować textarea, obiekt textarea również znajduje się dokumencie. Działa to w ten sposób, że gdy jest coś zmieniane w iframe automatycznie zawartość body tego iframe'a jest uaktualniana do textarea, który jest ukryty. Textarea potrzebne jest do przechowywania danych i do ich późniejszego wysłania formularzem.


Ściągnąłem sobie tinyMCE nie widziałem tam zastosowania iframe. Zobacz źródło tego przykładu, czy tam jest iframe jakiś? Pytam, bo chciałbym znać zasadę działania. Jeśli jest tam jakiś iframe, to gdzie się on znajduje i jak działą ?
Kowalikus
16.02.2008, 13:52:45
To co Ty widzisz myśląc, że to textarea to jest własnie iframe, a textarea ma ustawione display:none; Podglądajac źródło widzisz textarea ale JavaScript robi tę podmianę i w źródle tego nie widać.


plik: http://tinymce.moxiecode.com/tinymce/jscri...tiny_mce_src.js

linijka 5999

[HTML] pobierz, plaintext 
  1. setupIframe : function() {
  2. 			var t = this, s = t.settings, e = DOM.get(s.id), d = t.getDoc();
  3.  
  4. 			// Setup body
  5. 			d.open();
  6. 			d.write(s.doctype + '<html><head xmlns="http://www.w3.org/1999/xhtml"><base href="' + t.documentBaseURI.getURI() + '" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body id="tinymce" class="mceContentBody"></body></html>');
  7. 			d.close();
[HTML] pobierz, plaintext


już widać?
sniezny_wilk
16.02.2008, 14:03:24
Cytat(Kowalikus @ 16.02.2008, 13:52:45 ) *
To co Ty widzisz myśląc, że to textarea to jest własnie iframe, a textarea ma ustawione display:none; Podglądajac źródło widzisz textarea ale JavaScript robi tę podmianę i w źródle tego nie widać.


plik: http://tinymce.moxiecode.com/tinymce/jscri...tiny_mce_src.js

linijka 5999

[HTML] pobierz, plaintext 
  1. setupIframe : function() {
  2. 			var t = this, s = t.settings, e = DOM.get(s.id), d = t.getDoc();
  3.  
  4. 			// Setup body
  5. 			d.open();
  6. 			d.write(s.doctype + '<html><head xmlns="http://www.w3.org/1999/xhtml"><base href="' + t.documentBaseURI.getURI() + '" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body id="tinymce" class="mceContentBody"></body></html>');
  7. 			d.close();
[HTML] pobierz, plaintext


już widać?


Tak biggrin.gif teraz już widać, miałeś rację. A mógłbyś jeszcze powiedzieć w takim razie co trzeba zrobić (na podstawie Twojego przykładu), aby taki iframe był zamknięty widoczny jako textarea ? Będę bardzo wdzięczny. I jeszcze jedno pytanie: Czy jak będę wysyłał zawartość takiego textarea np. POST'em czy zostanie odebrana poprawnie cała zawartość ? czy będę musiał bezpośrednio z ukrytego iframe wyciągać ?
Kowalikus
16.02.2008, 14:52:17
Trochę zabawy jest aby taki edytor zrobić ja Ci konkretnego edytora robić nie bedę. Pogoogluj, pokombinuj. przed wysłaniem formularza musisz skopiować innerHTML z body tego iframe'a do jakiegoś textarea z Twojego formularza

Sprawdź jak to działa w innych mniejszych edytorach
http://www.mozilla.org/editor/midasdemo/
http://www.webtips.pl/post20243.html
sniezny_wilk
17.02.2008, 16:53:30
Dzięki za pomoc. Szczególnie pomocy był ten drugi link z webtips, dobry tutorial jak napisać prosty edytor html w JS, dużo można się nauczyć i wywnioskować, choć ma swoje błędy (źle działa w IE6), ale z tym sobie poradziłem.
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.