Textarea i HTML editor - pitanje


#1

Bok,

imam <textarea> u koji kada korisnik nešto upiše i kada nakon toga klikne save, se treba taj sadržaj pojaviti na određenom mjestu na stranici. i taj dio radi.

problem nastaje kada želim recimo sliku ubaciti
jer koliko vidim textarea to ne podržava, odnosno ako ubacim code od slike npr…:
<a href="http://www.ultraimg.com/image/1V6n"><img src="http://ultraimg.com/images/2016/08/11/1V6n.md.jpg" alt="1V6n.jpg" border="0" /></a>

on samo prikaže taj text i ništa drugo… i onda sam naišao na text editore poput tinymce, ckeditor itd…

ubacim to i pokušam kada opet ista stvar… ne kužim u čem je trik ?

evo recimo ovdje online primjer http://freetextbox.com/demos/

tu ubacim code od slike i on opet izbaci text, a ne sliku…

pa moje pitanje glasi kako ili što mogu napraviti da kada ubacim code od slike, da onda kasnije bude slika prikazana na određenom mjestu npr… u sidebaru ili sl…

hvala


#2

Vjerovatno escape-as taj HTML, tako da ga prikazuje kao HTML kod i ne generira ga kao novi element na stranici.


#3

koliko vidim putem textarea se nemre ubacivati slike i sl…

tako da to otpada.

sada sam vidio da bi mogao koristiti div contenteditable=true

ali on ne podržava value

odnosno kada nešto upišem i kliknem save da se pojavi na određenom mjestu.


#4

Moraš pogledati što se desi putem sa html tagovima… Vjerovatno se pretvore u oblik da se ove trokutaste zagrade više ne mogu parsirati kao html tagovi.

Ako trokutaste zagrade nebi bile izmjenjene…i ti uvalis taj img code nekom elementu kao innerHTML, morao bi vidjeti sliku, a ne html code img-a.

No moraš biti oprezan, kada prestanes parsirati trokutaste zagrade, onda ti netko tim putem može uvaliti bilo koji html code, skupa sa javascriptom…koji ce se procesuirati prilikom prikaza…

Gdje ti se parsiraju trokutaste zagrade, to moraš sam pronaći. Očito negdje na putu od uzimanja vrijednosti iz textarea, do postavljanja na target place. Možda sama metoda postavljanja ima taj parser ako koristuš postavljanje vrijednosti sa nekom gotovom metodom.

Kada napises ovako negdje <div></div> …onda se ove trokutaste zagrade pretvore u nekakve codove poput &lt; i &gt; …te ce takve kodove browser prikazati kao trokute…umjesto da ih shvati kao html instrukciju…


#5

bok,

evo pogledaj primjer:

prvo sam ukucao link od slike putem textarea i samo se pojavi text kao na slici
dok druga slika se pojavljuje jer sam direktno u html file ukucao link…

sad moje pitanje glasi zašto kada putem textarea ukucam link se slika ne pojavi ?

evo i screenshot od element inspectora

hvala


#6

Ako je na tvom site pokusaj koristiti apsolute path. Ili, napravi html page sa tim elementom pa njega pozovi…


#7

Inspektor ti neće prikazati kodirani znak &lt; ili &gt; …nego će ti prikazati ono što ti znakovi postaju…a postaju trokutaste zagrade, zato ih i vidiš. Ali ih vidiš crne boje zato jer ti znakovi nisu više HTML tagovi, nego postaju običan sadržaj tom HTML elementu.
Probaj ih editirati u inspektoru, pa umjesto tih trokutastih zagrada ukucaj nove trokutaste zagrade…pa ćeš vidjeti da će se slika pojaviti :wink:

Kažem ti, neka funkcija putem parsira originalne trokutaste zagrade u kodirane znakove &lt; ili &gt; , gdje ovaj lt predstavlja otvorenu trokutastu zagradu, dok gt zatvorenu. To parsiranje je inače prilično “zdravo” raditi, dok putem input polja nije prikladno unositi čisti HTML, jer to može biti zeznuto. Naravno, nekada se baš to traži…

Ako želiš otvoriti vrata svim nedaćama koje tu mogu ući (zezam se, nije tako strašno, ali moraš biti svjestan tko tu ukucava inpute)… onda neposredno prije ispisa tog sadržaja ka tom elementu, provuci string koji ispisuješ kroz ovu funkciju:

function fromSafeHTML(string)
	{
	string=string.replace(/&lt;/g, '<');
	string=string.replace(/&gt;/g, '>');
	return string;
	}

Znači, tvoj string=fromSafeHTML(string); …pa ga takvog ugradi tamo gdje ga ugrađuješ…

…to nebi trebalo biti ključ ovog problema. Sve i da jeste krivi path, nebi mu se prikazao string “<img bla bla.”. nego bi mu se prikazala neučitana slika…


#8

Da u pravu si, takav scenarij cesto vidamo u podesavanju html-a na bloggeru. Cisti primjer je insert adsense koda unutar html predloska…


#9

hvala na odgovoru :slight_smile:
ali sam zapravo riješio na drugi način:

$(document).ready(function(){
    $(".sidebar-ads-space").html($(".sidebar-ads-space").text());
}); 

znači sav text u sidebaru pretvara u html.

i to radi. sada sam isprobao sa slikama.

a koliko vidim radi i s google adsense oglasima isto.


#10

Kada netko pita, pronade i postavi da i drugi vide.

Svaka cast


#12

Da ali pazi na sigurnost, jer ja mogu doci, injectati kod koji ti se bas nece dopasti :wink:


#13

jasno mi je. samo upisivati nešto u textarea može samo admin
odnosno regularni posjetitelj to ne vidi. jer se ta polja za upis podataka vide u admin panelu.


#14

Pozdrav mozda i nisam u pravoj temi za pitanje interesuje me dali postoji neki HTML kod sa reklamom koja iskace kako popup ali samo korisnicima koji dolaze preko FB.?


#15

postoji …