Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Obrazek w textarea help, Umieść obrazek w textarea
programista28
post
Post #1





Grupa: Zarejestrowani
Postów: 88
Pomógł: 2
Dołączył: 14.05.2011

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


Witam jak wstawić obrazek do textarea tak by był on wyświetlany jako obraz (nie jako link ) w javascript ?


<textarea></textarea>







Go to the top of the page
+Quote Post
Kshyhoo
post
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




 
[HTML] pobierz, plaintext 
  1. <img alt="" src="00.jpg" style="width: 100px; height: 100px;" />
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
skowron-line
post
Post #3





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

Nie da się, textarea przyjmuje tylko i wyłącznie tekst.
Go to the top of the page
+Quote Post
programista28
post
Post #4





Grupa: Zarejestrowani
Postów: 88
Pomógł: 2
Dołączył: 14.05.2011

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

kshyhoo sprawdziłem twój kod nie działa niesteety (IMG:style_emoticons/default/sad.gif) (to by bylo za proste (IMG:style_emoticons/default/smile.gif) )

Skworon line da sie ściągnąłem wysiwyg gdzie wyraźnie widać że polem tekstowym do którego jest wkładany obrzek jest textarea też mi się nie chciało wierzyć bo czytałem już podobne opinie jak twoja ale tak jest w text area umieszczany jest obrazek który potem można ustawiać

nadal czekam na pomoc w tym temacie
Go to the top of the page
+Quote Post
IceManSpy
post
Post #5





Grupa: Zarejestrowani
Postów: 1 006
Pomógł: 111
Dołączył: 23.07.2010
Skąd: Kraków

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

Bo widziałeś może edytor wysiwyg:
http://www.tinymce.com/tryit/full.php
Go to the top of the page
+Quote Post
programista28
post
Post #6





Grupa: Zarejestrowani
Postów: 88
Pomógł: 2
Dołączył: 14.05.2011

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

nie miałem na myśli ten edytor : openWYSIWYG
Go to the top of the page
+Quote Post
skowron-line
post
Post #7





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

@programista28 a wiesz na jakiej zasadzie działa wysiwyg (IMG:style_emoticons/default/questionmark.gif) To że widzisz tam textarea wcale nie oznacza że on tam jest.
Go to the top of the page
+Quote Post
programista28
post
Post #8





Grupa: Zarejestrowani
Postów: 88
Pomógł: 2
Dołączył: 14.05.2011

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

no tak ale jednak obrazek musi być skojarzony z polem textarea żeby został wysłany tak ? bo teraz to już sam nie wiem (IMG:style_emoticons/default/smile.gif)

(właśnie szukam tego po stronach ale nigdzie tego nie ma żeby móc sobie obczaić co i jak (IMG:style_emoticons/default/sad.gif) )
Go to the top of the page
+Quote Post
skowron-line
post
Post #9





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

http://www.devarticles.com/c/a/HTML/Buildi...-Editor-Part-1/
Go to the top of the page
+Quote Post
programista28
post
Post #10





Grupa: Zarejestrowani
Postów: 88
Pomógł: 2
Dołączył: 14.05.2011

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

Skowron ten przykład jest dla Internet Explororera przeczytałem cały artykuł i wykonałem proste wysiwyg na jego podstawie (IMG:style_emoticons/default/smile.gif)

z tego kodu wynikalo by ze rzeczywiscie obrazek wstawia sie do textarea (IMG:style_emoticons/default/tongue.gif) (oczywiscie tak nie jest i calosc "obrabia" zapewne silnik przeglądarki (IMG:style_emoticons/default/smile.gif)
zmieniłem tok myślenia i widzę że do textarea dodawany jest sam znacznik z którym skojarzony jest obraz który widzimy (IMG:style_emoticons/default/smile.gif)

jednak interesowało by mnie coś takiego jak ten artykuł tylko dla mozilli Firefox (IMG:style_emoticons/default/smile.gif) (jak ktoś ma coś takiego w zakładkach to bardzo proszę o rucenie linka (IMG:style_emoticons/default/smile.gif) )

jednak jak kogoś interesuje temat dla IE to poniżej zamieszczam kod WYSIWYG dla IE (IMG:style_emoticons/default/smile.gif) 






[PHP] pobierz, plaintext 
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title> Using execCommand to bold text </title>
  6.  
  7. <script type="text/css">
  8.  
  9. .butClass
  10.  
  11. {
  12.  
  13. border: 1px solid;
  14.  
  15. border-color: #D6D3CE;
  16.  
  17. }
  18.  
  19.  
  20. </script>
  21.  
  22.  
  23. <script language="JavaScript">
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30. function Init()
  31.  
  32. {
  33.  
  34. iView.document.designMode = 'On'; // włączamy tryb edycji designMode 
  35.  
  36. }
  37.  
  38. function boldIt()
  39.  
  40. {
  41.  
  42. iView.document.execCommand('bold', false, null); // jest to funkcja pogrubienia zaznaczonego obszaru 
  43.  
  44. }
  45. function doForeCol()
  46.  
  47. { 
  48.  
  49. var fCol = prompt('Enter foreground color', '');
  50.  
  51.  
  52.  
  53. if(fCol != null)
  54.  
  55. iView.document.execCommand('forecolor', false, fCol);
  56.  
  57. }
  58. function selOn(ctrl)
  59.  
  60. {
  61.  
  62. ctrl.style.borderColor = '#000000';
  63.  
  64. ctrl.style.backgroundColor = '#B5BED6';
  65.  
  66. ctrl.style.cursor = 'hand';
  67.  
  68. }
  69.  
  70.  
  71. function doBold()
  72.  
  73. {
  74.  
  75. iView.document.execCommand('bold', false, null);
  76.  
  77. }
  78.  
  79. function doCenter()
  80.  
  81. {
  82.  
  83. iView.document.execCommand('justifycenter', false, null);
  84.  
  85. }
  86.  
  87. function doBulList()
  88.  
  89. {
  90.  
  91. iView.document.execCommand('insertunorderedlist', false, null);
  92.  
  93. }
  94.  
  95.  
  96. function doLink()
  97.  
  98. {
  99.  
  100. iView.document.execCommand('createlink');
  101.  
  102. }
  103. function doImage()
  104.  
  105. {
  106.  
  107. var imgSrc = prompt('Enter image location', '');
  108.  
  109.  
  110.  
  111. if(imgSrc != null)
  112.  
  113. iView.document.execCommand('insertimage', false, imgSrc);
  114.  
  115. }
  116.  
  117.  
  118.  
  119. function doRule()
  120.  
  121. {
  122.  
  123. iView.document.execCommand('inserthorizontalrule', false, null);
  124.  
  125. }
  126.  
  127. function doFont(fname)
  128.  
  129. {
  130.  
  131. if (fname!='')
  132.  
  133. iView.document.execCommand ("fontname", false, fname);
  134.  
  135. }
  136.  
  137.  
  138.  
  139.  
  140.  
  141.  
  142.  
  143.  
  144.  
  145. </script>
  146.  
  147. <body onLoad="Init()"> <!-- wywolujemy funkcje Init poleceniem onLoad (przy wczytaniu strony uruchamia sie funkcja -->
  148.  
  149. <iframe id="iView" style="width: 600px; height:370px"></iframe> <!-- iframe funkcja init wlącza designMode tryb edycji -->
  150.  
  151. <br><br>
  152.  
  153. <input type="button" onClick="boldIt()" value="Toggle Bold">      <!-- przycisk ktory jest uruchamiany wywoluje fukcje boldIt() -->
  154. <input type="button" onClick="doForeCol()" value="kolor tekstu">
  155.  
  156. <img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
  157. Read more at <a href="http://www.devarticles.com/c/a/HTML/Building-a-WYSIWYG-HTML-Editor-Part-1/3/#KkT3M3pCHeCqfOkR.99" target="_blank">http://www.devarticles.com/c/a/HTML/Buildi...M3pCHeCqfOkR.99</a>
  158.  
  159.  
  160. <input type="button" onClick="doLink()" value="twórz hiperłącze"></input> 
  161. <input type="button" onClick="doImage()" value="wstaw zdjecie"></input>
  162. <input type="button" onClick="doRule()" value="wstaw linie"></input>
  163. <select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)"> 
  164. <option value="1" >1</option>
  165. <option value="2" >2</option>
  166. <option value="3" >3</option>
  167. <option value="4" >4</option>
  168. <option value="5" >5</option>
  169. </select>
  170.  
  171. </body>
  172.  
  173. </html>
[PHP] pobierz, plaintext
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
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

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

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

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