Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Obrazek w textarea help
Forum PHP.pl > Forum > Po stronie przeglądarki
programista28
28.05.2012, 12:46:32

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


<textarea></textarea>







Kshyhoo
28.05.2012, 12:49:55 
[HTML] pobierz, plaintext 
  1. <img alt="" src="00.jpg" style="width: 100px; height: 100px;" />
[HTML] pobierz, plaintext
skowron-line
28.05.2012, 12:53:06
Nie da się, textarea przyjmuje tylko i wyłącznie tekst.
programista28
28.05.2012, 13:13:01
kshyhoo sprawdziłem twój kod nie działa niesteety sad.gif (to by bylo za proste 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
IceManSpy
28.05.2012, 13:16:48
Bo widziałeś może edytor wysiwyg:
http://www.tinymce.com/tryit/full.php
programista28
28.05.2012, 14:36:55
nie miałem na myśli ten edytor : openWYSIWYG
skowron-line
28.05.2012, 14:47:01
@programista28 a wiesz na jakiej zasadzie działa wysiwyg questionmark.gif To że widzisz tam textarea wcale nie oznacza że on tam jest.
programista28
28.05.2012, 15:01:02
no tak ale jednak obrazek musi być skojarzony z polem textarea żeby został wysłany tak ? bo teraz to już sam nie wiem smile.gif

(właśnie szukam tego po stronach ale nigdzie tego nie ma żeby móc sobie obczaić co i jak sad.gif )
skowron-line
28.05.2012, 15:04:15
http://www.devarticles.com/c/a/HTML/Buildi...-Editor-Part-1/
programista28
31.05.2012, 13:23:52
Skowron ten przykład jest dla Internet Explororera przeczytałem cały artykuł i wykonałem proste wysiwyg na jego podstawie smile.gif

z tego kodu wynikalo by ze rzeczywiscie obrazek wstawia sie do textarea tongue.gif (oczywiscie tak nie jest i calosc "obrabia" zapewne silnik przeglądarki 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 smile.gif

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

jednak jak kogoś interesuje temat dla IE to poniżej zamieszczam kod WYSIWYG dla IE 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
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.