Placera bilder i text

Har du testat denna?

http://www.interactivetools.com/products/htmlarea/

/Mirandir

mirandir skrev:

Har du testat denna?

http://www.interactivetools.com/products/htmlarea/

/Mirandir

Tack, men det är av diverse olika anledningar inte aktuellt med några "färdiga produkter". :)

http://www.freetextbox.com/ Ladda hem källkoden så slipper du uppfinna hjulet igen. Funkar i alla större browsers vad jag förstår det.

Re: Placera bilder i text

Färdiga bildmallar låter som det mest pålitliga. Här är några problem som jag ser det:

1. Hur man skall ange var nånstans i sidan bilden skall infogas.

* Om man använder ett system med ett enda editeringsfält för hela webbsidan kan ju användaren enkelt klistra in bilden varsomhelst i fältet. Lätt för användaren men förmodligen svårare att koda.

* Men om man använder en lösning med oföränderlig disposition, tex en separat <textarea> för varje paragraf, så blir det ju svårare att få in en bild mellan två <textarea> fält. Kanske man skulle kunna erbjuda bildinfogning till varenda paragraf på sidan tex med en kryssruta (men även då begränsas man förstås till max en bild per paragraf)? Om användaren kryssar i bildinfogningsrutan kan ytterligare alternativ visas (tex med hjälp av DHTML) för att specificera höger/vänster textflöde runt bilden, bildtext osv.

2. Filformat, filnamn och filstorlek på bilderna.

* Kanske man bör se till att skriptet länkar till rätt filformat, eftersom man inte kan lita på användaren vet skillnaden mellan tex .jpg och .png. Man bör kanske också se till att inte användaren försöker ladda upp ogiltiga filformat som "bilder", tex <img src="foo.html">.

* Man måste också se till att filnamnen inte innehåller ogiltiga tecken som tex åäö, vilka kan fungera i en dators filsystem men inte som webbadress.

* Man kan inte heller lita på att användaren laddar upp filer i rimlig storlek. En .bmp fil på flera MB är ju knappast att rekommendera.

3. Hur man skall göra med höjd/bredd på bilderna.

* Det enklaste i teorin är väl att använda samma som i bildfilen, kanske genom att strunta i att ange höjd/bredd i <img> elementet?

* Kanske man bör sätta gränser för hur små eller stora bilder användaren tillåts ladda upp, så att inte sidan ser alltför ful ut. Eller skall man tillåta användaren att lita på sitt eget omdöme här?

Tack för många konkreta synpunkter. :)

Problem 2 och 3 är som jag ser det ett eget problem som är lättare att lösa. Det hanterar jag redan i uppladdningsklassen.

Men om man använder en lösning med oföränderlig disposition, tex en separat <textarea> för varje paragraf, så blir det ju svårare att få in en bild mellan två <textarea> fält. Kanske man skulle kunna erbjuda bildinfogning till varenda paragraf på sidan tex med en kryssruta (men även då begränsas man förstås till max en bild per paragraf)? Om användaren kryssar i bildinfogningsrutan kan ytterligare alternativ visas (tex med hjälp av DHTML) för att specificera höger/vänster textflöde runt bilden, bildtext osv.

Det är i denna bana jag har funderat. Tex att ge möjlighet till en bild per stycke. Då hade man kunnat göra ungefär så här:

1. Användaren skriver in sin text med dubbla enterslag för nytt stycke.
2. Texten splittas vid varje /n/n.
3. Ett rutmönster ritas upp med en ruta per stycke där man kan välja höger- eller vänsterjustering och bild.
4. Skriptet lägger till bildmarkörer ([bild1.jpg:left]) i texten innan den läggs in i databasen.
5. bildmarkörerna byts ut mot en img-tagg vid presentationen.

K@llen skrev:

Tack för många konkreta synpunkter. :)
1. Användaren skriver in sin text med dubbla enterslag för nytt stycke.

Var beredd på att en del användare kanske bara gör ett enterslag, eftersom de vill ha <br> radbrytningar, men det ser nog inte så snyggt ut i olika webbläsares fönsterstorlekar eller om textstorleken ändras. Därför är det kanske bäst att radera alla enkelenterslag?

En användare kan också tänkas göra fler än två enterslag för att åstadkomma en större marginal mellan textstycken. Antingen kan man acceptera det och skapa tomma <p></p> (fast då måste man låta skriptet avrunda antalet /n/n till närmaste lägre jämna siffra), eller så kan man radera fler enterslag än två.

3. Ett rutmönster ritas upp med en ruta per stycke där man kan välja höger- eller vänsterjustering och bild.
4. Skriptet lägger till bildmarkörer ([bild1.jpg:left]) i texten innan den läggs in i databasen.

Om jag förstår dig rätt så är detta rutmönster bara en förhandsgranskning, och inget WYSIWYG editeringsfönster? Isf skulle du ju kunna visa bilden direkt, utan behov av bildmarkör. Möjligen beror det på vad som är enklast för användaren: bildens motiv eller dess filnamn. Kanske båda borde visas parallellt?