legge html bildekode inn i form

Smidt · 21. september 2004

jeg har et cms hvor jeg poster nyheter. jeg vil gjøre det mulig å legge inn bilder (html koden for bilder) i teksten når jeg skriver. når jeg trykker på en link ved siden av skjemaet popper det opp et vindu hvor alle de opplastede bildene er listet.

det jeg så vil er at når jeg trykker på et av bildene skal jeg få opp en ny boks.

i denne boksen vil jeg ha mulighet for å skrive inn bilde tekst. når jeg trykker ok i denne boksen skal følgende legges til i det opprinnelige skjemaet hvor jeg skriver postene mine:

<img src="fast/bane/til/bilde/og_bildenavn.jpg"> <span class="bildetxt">teksten_fra boksen over</span>

er det mulig å løse det på en forholdsvis enkel måte? jeg aner en blanding av php og javascript. siden jeg ikke har så god peiling på javascript hadde det vært super om jeg kunne fått litt hjelp.

Endret 21. september 2004 av Smidt

Kidder · 22. september 2004

Dette skal være mulig å løse. Clue'et her er å holde tak i objektenes referanse eller å kunne lete dem opp slik at du skirve data riktig. Du må derfor sette på ID/name på objektene. Videre må du også ta hensyn til om det allerede er innhold i skjema'et du skal skrive teksten til og hvor du evt. skal putte inn innholdet.

Litt javacript lektyre er absolutt å anbefale for å få oversikt over bl.a DOM'en (Document Object Model). Personlig kan jeg anbefale Javascript og DHTML bøker fra O'Reilly.

Smidt · 22. september 2004

vel, nå har det seg sånn at jeg ikke har så voldsomt med peiling på javascript, og det virker som om dette er et ganske omfattende prosjekt?

det som altså er målet er å få satt in html koden i første posten etter å ha valgt bilde, jeg trenger ikke bruke to popupbokser hvis det gjør det lettere, trenger bare å få satt inn html koden. hadde vært supert om noen kan gi meg litt hjelp på denne, så kan jeg evt hjelpe tilbake i wds eller litt php.

Kidder · 23. september 2004

OK, kanskje dette er noe du kan benytte:

Først så lager du en html fil. Navngi den etter eget ønske:

SOURCE:

<html>
<head><title>Javscript test</title></head>
<body>
<script>
function OpenList(sURL, sName) {
 try {
    New = window.open(sURL, sName, 'width=440,height=360,menubar=No,status=Yes,toolbar=No,resizable=Yes,scrollbars=Yes', true);
 }
 catch (e) { window.status = 'Kunne ikke åpne vindu'; }
 }
</script>
<input name="btnHent" type="button" id="btnHent" value="Hent bilde" onClick="javascript:void(OpenList('bildeindex.htm', 'imagelist'))"><br>
<input name="txtArea" id="txtArea" value="" size="135">

<pre>
<img src="fast/bane/til/bilde/og_bildenavn.jpg"> <span class="bildetxt">teksten_fra boksen over</span> 
</pre>
</body>
</html>

Så oppretter du en html fil til i samme katalog som du gir navnet "bildeindex.htm" .

SOURCE:

<html>
<head><title>Bilde indeks</title></head>

<body>
<script>
function SettInn() {
 for (var i = 0; i < RadioGroup1.length; i++) {
 	if (RadioGroup1[i].checked) {	break; }
 }
 window.opener.window.document.getElementById('txtArea').value = 
   '<img src="' + RadioGroup1[i].value + '"' + '> <span class="bildetxt">' +  document.getElementById('txtBeskrivelse').value +	'</span>';	
}
</script>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
 <tr>
   <td width="12%"><img src="fast/bane/til/bilde/bilde1.png"></td>
   <td width="88%"><label><input type="radio" id="RadioGroup1" checked name="RadioGroup1" value="fast/bane/til/bilde/bilde1.png">Bilde 1 av ....</label></td>
 </tr>
 <tr>
   <td><img src="fast/bane/til/bilde/bilde2.png"></td>
   <td><label><input type="radio" id="RadioGroup1" name="RadioGroup1" value="fast/bane/til/bilde/bilde2.png">Bilde 2 av ....</label></td>
 </tr>
 <tr>
   <td><img src="fast/bane/til/bilde/bilde3.png"></td>
   <td><label><input type="radio" id="RadioGroup1" name="RadioGroup1" value="fast/bane/til/bilde/bilde3.png">Bilde 3 av ....</label></td>
 </tr>
 <tr>
   <td><img src="fast/bane/til/bilde/bilde4.png"></td>
   <td><label><input type="radio" id="RadioGroup1" name="RadioGroup1" value="fast/bane/til/bilde/bilde4.png">Bilde 4 av ....</label></td>
 </tr>
 <tr>
   <td colspan="3">
 	<input id="txtBeskrivelse" name="txtBeskrivelse" type="text" size="50" value="test">
     <input id="btnSettInn" name="btnSettInn" type="button" value="Sett inn" onClick="javascript:void(SettInn())"> 
   </td>
 </tr>	
</table>
</body>
</html>

Endrer du input feltet txtArea til en input av type TextArea får du store problemer med å skrive inn bla. <img> inn i TextArea.innerHTML.

Åpne så den først filen i IE og se om dette er typen løsning du er ute etter.

Kildekode er kun kjørt i IE6, så det kan godt være at det feiler i andre browser versjoner.

Lykke til.

Smidt · 23. september 2004

herlig, akkurat det jeg trengte, skal se om jeg klarer å koble det sammen med php koden, supert

Smidt · 23. september 2004

leste ikke hele posten din nøye nok, det vil altså ikke gå an å legge inn img taggen i et textarea? er det helt umulig?

edit, hvor må jeg forandre hvis jeg vil at html koden som legges inn skal komme i et textarea som heter fulltext?

legger også merke til at det ikke er mulig å legge til flere bilder, går det an å gjøre noe med dette?

er det også mulig å legge til class="floatleft" i img taggen?

Endret 23. september 2004 av Smidt

Simon Zimmermann · 24. september 2004

Jeg vil anbefale deg å starte på hele prosjektet på nytt og ikke bruke den JavaScript koden som ble postet over.

Grunnen til dette er rett og slett at det som regel er mye vanskeligere å redigere en ferdig kode som ikke var ment til å brukes til det du ønsker enn å lage en ny.

Og så er det annen ting jeg ikke helt har skjønt er hvorfor du skal bruke alle de pop-up boksene?

Det er jo mye lettere å gjøre det uten!

Hvis jeg har forstått prosjektet ditt riktig så ville jeg gjort alt på en og samme side.

1. Jeg ville lastet inn en liste med alle bilder (kanskje med PHP)

2. Jeg ville hatt et script som finner ut hvilket bilde jeg har markert

3. Jeg ville hatt et textarea hvor jeg kan skrive inn informasjon om bilde

4. Nå villle jeg har hentet informasjonen(bilde jeg har markert, beskrivende tekst om bilde) og satt det sammen til en enkel HTML setning.

<img src="fast/bane/til/bilde/og_bildenavn.jpg"> <span class="bildetxt">teksten_fra boksen over</span>

Forstod jeg det rett eller var det her helt på jorde?

Smidt · 24. september 2004

helt riktig Waldmeister.

punkt 1 og 3 er klart, egentlig punkt 2 og 4 og, men de kan jeg bare gjøre i php, siden jeg ikke kan noe (lite) javascript. så vidt jeg vet er det ikke noe funksjon som kan sette det endelige uttrykket inn i et textarea i et skjema.

så det som hadde vært supert er om noen kan hjelpe meg med den insettingsbiten til hovedskjemaet.

Torbjørn · 24. september 2004

et lite 5 minutters hack fra meg:

http://www.nt.ntnu.no/users/lindahl/bildetekst.html

Smidt · 24. september 2004

setter pris på bidraget kjære navnebror, men er ikke helt det jeg er på jakt etter.

forklarende bilde

1. jeg trykker på en link (knapp) og får opp en ny boks.

2. i denne boksen velger jeg et bilde og skriver inn teksten jeg vil at bildet ha under.

3. jeg trykker ok og html koden settes inn i skjemaet

( det må være mulig å sette inn flere bilder)

Simon Zimmermann · 1. oktober 2004

Her er mine to cent:

JavaScript form

Simon Zimmermann · 1. oktober 2004

Forresten så må du hente en bildene fra en mappe ved hjelp av PHP.

Jeg har i skriptet mitt bare laget et Array i JavaScript med URI-en til bildene.

Orker ikke fikse den bildegreia i PHP nå, men du finner sikkert en del eksempler på php.net som gjør omtrent det samme.

Smidt · 1. oktober 2004

er akkurat det jeg er på jakt etter Waldmeister. gjort om på koden og satt inn den php'en jeg trenger sånn at jeg får hentet bildene ut fra databasen.

link

det jeg trenger hjelp til nå er å sette inn flere html koder i samme textarea. og i stedenfor å sette det inn i et textarea på samme siden vil jeg aller helst sende det til en annen side.

noen som kan hjelpe meg litt på vei med det?

Kidder · 29. oktober 2004

Se på koden som jeg postet tidligere her.

Jeg skrev om problemer med å skrive til textarea.innerHTML. Skriv heller til

textarea.value slik som Waldermeister gjør i sin kode.

Tror du har det du trenger av kode nå for å løse saken.

For å legge til flere kan du f.eks gjøre slik:

textarea.value = textarea.value + newData;

Hvor newData inneholde den nye linjen.

Ønsker du hver html kode på hver sine linje i textarea gjør du slik:

textarea.value = textarea.value + '\r\n' + newData;

Logg inn

legge html bildekode inn i form

Anbefalte innlegg

Smidt

Lenke til kommentar

Videoannonse

Kidder

Lenke til kommentar

Smidt

Lenke til kommentar

Kidder

Lenke til kommentar

Smidt

Lenke til kommentar

Smidt

Lenke til kommentar

Simon Zimmermann

Lenke til kommentar

Smidt

Lenke til kommentar

Torbjørn

Lenke til kommentar

Smidt

Lenke til kommentar

Simon Zimmermann

Lenke til kommentar

Simon Zimmermann

Lenke til kommentar

Smidt

Lenke til kommentar

Kidder

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer