Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Grafika w textarea
sniezny_wilk
post
Post #1





Grupa: Zarejestrowani
Postów: 732
Pomógł: 80
Dołączył: 25.05.2005
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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


--------------------
DevBlog - http://www.bartekrogus.pl
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 11)
b_chmura
post
Post #2





Grupa: Zarejestrowani
Postów: 813
Pomógł: 34
Dołączył: 18.03.2007
Skąd: o stamtąd

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
Kowalikus
post
Post #3





Grupa: Zarejestrowani
Postów: 111
Pomógł: 25
Dołączył: 23.07.2004

Ostrzeżenie: (0%)
-----

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


--------------------
Blog
Go to the top of the page
+Quote Post
b_chmura
post
Post #4





Grupa: Zarejestrowani
Postów: 813
Pomógł: 34
Dołączył: 18.03.2007
Skąd: o stamtąd

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Kowalikus
post
Post #5





Grupa: Zarejestrowani
Postów: 111
Pomógł: 25
Dołączył: 23.07.2004

Ostrzeżenie: (0%)
-----

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


--------------------
Blog
Go to the top of the page
+Quote Post
sniezny_wilk
post
Post #6





Grupa: Zarejestrowani
Postów: 732
Pomógł: 80
Dołączył: 25.05.2005
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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.


--------------------
DevBlog - http://www.bartekrogus.pl
Go to the top of the page
+Quote Post
Kowalikus
post
Post #7





Grupa: Zarejestrowani
Postów: 111
Pomógł: 25
Dołączył: 23.07.2004

Ostrzeżenie: (0%)
-----

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


--------------------
Blog
Go to the top of the page
+Quote Post
sniezny_wilk
post
Post #8





Grupa: Zarejestrowani
Postów: 732
Pomógł: 80
Dołączył: 25.05.2005
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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łą ?


--------------------
DevBlog - http://www.bartekrogus.pl
Go to the top of the page
+Quote Post
Kowalikus
post
Post #9





Grupa: Zarejestrowani
Postów: 111
Pomógł: 25
Dołączył: 23.07.2004

Ostrzeżenie: (0%)
-----

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

Ten post edytował Kowalikus 16.02.2008, 13:54:18


--------------------
Blog
Go to the top of the page
+Quote Post
sniezny_wilk
post
Post #10





Grupa: Zarejestrowani
Postów: 732
Pomógł: 80
Dołączył: 25.05.2005
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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


--------------------
DevBlog - http://www.bartekrogus.pl
Go to the top of the page
+Quote Post
Kowalikus
post
Post #11





Grupa: Zarejestrowani
Postów: 111
Pomógł: 25
Dołączył: 23.07.2004

Ostrzeżenie: (0%)
-----

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


--------------------
Blog
Go to the top of the page
+Quote Post
sniezny_wilk
post
Post #12





Grupa: Zarejestrowani
Postów: 732
Pomógł: 80
Dołączył: 25.05.2005
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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.


--------------------
DevBlog - http://www.bartekrogus.pl
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 06:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn