Notifikationer

Markér alle som læst Log ud

Slettet bruger

10. april 2007 - 19:56 Der er 11 kommentarer og
1 løsning

execCommand - Indsæt billede

Hej eksperter.

Jeg er ved at lave en editor hvor man skal kunne indsætte billede i sin "artikel". Der bruger jeg lige pt. følgende funktion:

function billede() {
var imgSrc = prompt('Vælg billedsti', '');

if(imgSrc != null) {
editor.document.execCommand('insertimage', false, '../galleri/'+imgSrc);
}
}

Dette fremmaner et promptvindue, som kun spørger efter billedstien/billednavnet.

Her er det så mening at jeg vil have et fremtvunget popupvindue, som viser noget ASP indhold, med en oversigt over galleriets billeder. Der er det så meningen at man skal kunne trykke på et billede, og det billede bliver så valgt, popupvinduet lukker og billedet bliver indsat i artikel.

Her er det så mine spørgsmål kommer:
1. Hvordan får jeg fremtvunget det popupvindue med noget ASP inhold? (denne ASP indhold kan jeg godt selv lave)

2. Hvordan får jeg lavet en funktion som lyder i retning af billedeindsæt(billedenavn.jpg), som lukker popupvinduet og indsætter billednavn.jpg i artiklen?

Håber det er forståeligt :)

Synes godt om

Slettet bruger

10. april 2007 - 19:56 #1

P.S. Jeg giver selvfølgelig gerne flere points hvis nødvendigt.

Synes godt om

jhe-ting Nybegynder

11. april 2007 - 23:51 #2

Jeg fik dette til at virke i IE6

AddPicture.htm: (editor 'skald')
--------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Indsæt Billede (demo)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"></script>
<style type="text/css">
html, body { width:100%; height:100%}
</style>
</head>

<body>
<input type=button onclick='selectPicture()' value='open picture selector'>
<div contenteditable id="editorField">EditorField</div>
</body>
</html>

selectPicture.htm: (denne genererer du selv med ASP)
------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"></script>
<style type="text/css">
html, body { width:100%; height:100%}
</style>
</head>

<body>
<input type=button onclick='addPictureAndClose("http://www.google.com/logos/Logo_50wht.gif")' value='Google logo'>
</body>
</html>

Synes godt om

Slettet bruger

12. april 2007 - 21:06 #3

uha, jamen det ser godt ud, jeg vil lige prøve mig frem engang i morgen. jeg siger tak :)
smid svar for points, og evt. krav om flere ;)

Synes godt om

jhe-ting Nybegynder

12. april 2007 - 23:18 #4

Eksemplet er meget forenklet og uden brug af ASP.
Det glæder mig hvis det lykkes for dig; editorer er ikke lette at kode.
Der findes dog en del tilføjelser der kan lette kodningen, men de fleste er ret omfattende og et studie i sig selv.
'Selvgjort er velgjort' siger man; så kan man vælge en minimalløsning eller udvide efter behov.

Synes godt om

Slettet bruger

17. april 2007 - 15:42 #5

Har ikke lige haft tid til at kigge på det før nu.

Indtil videre ser det fint ud, jeg er ved at få den til at genere asp siden.

Tænkte på, ved du hvordan kan man gøre så det popupvindue den åbner, IKKE er med statuslinie, diverse menuer osv osv? Så det kun er ren indhold på i vinduet?
:)

Synes godt om

jhe-ting Nybegynder

17. april 2007 - 21:12 #6

Tilføj efter "fieldObj.focus();":
var sFeatures = "directories=0, location=0, menubar=0, status=0, toolbar=0";
og ret open kaldet til:
window.open("selectPicture.htm","_blank", sFeatures);

Synes godt om

Slettet bruger

17. april 2007 - 22:09 #7

Okay, sidste ting. hvordan gør jeg vinduet til at være en bestemt dimension? dvs. en bestemt højde og bredde? prøvede lidt med width = 100, height = 100 .. men det virkede ikke rigtigt efter hensigten :s (skulle også gerne være i pixels)

Synes godt om

Slettet bruger

17. april 2007 - 22:39 #8

function billedevalg(path){
alert(opener.fieldObj.tagName);
//var elm = opener.document.getElementById("editorField");
opener.fieldObj.focus();
opener.document.execCommand('insertimage', false, path);

window.close();
}

Hmm den siger:
Fejl: 'opener.fieldObj.tagName' er null eller ikke et objekt

har lavet lidt om i min vindueåbner funktion.
den er nu:
function billede() {
var features = "directories = 0, menubar = 0, toolbar = 0";
editor.focus();
window.open('billedevaelger.asp','_blank', features);
}

(hvis det hjælper lidt på at forstå fejlen i den anden funktion

Synes godt om

Slettet bruger

17. april 2007 - 23:25 #9

Okay, glem lige den seneste kommentar. Har lige siddet og roddet lidt med det, indtil videre har jeg følgende funktioner:

function billede() {
var features = "directories = 0, menubar = 0, toolbar = 0";
editor.focus();

window.open('billedevaelger.asp','_blank', features);
}

function billedevalg(path) {
opener.editor.focus();
opener.document.execCommand('insertimage', false, '../galleri/' + path + '.jpg');

window.close();
}

Nu er der kun følgende problemer:
Den siger en fejl ved at .jpg er null eller sådan noget, så den ik rigtig kan finde ud af at sætte .jpg ind i path, så det har jeg været nødt til selv at skrive :( (skulle gerne undgås, da man også kan bruge .gif billeder?)

Samtidigt vil den heller ikke lukke popup vinduet, selvom den faktisk sætter billedet ind i editoren som den skal.

vi er tætte på nu!:D
(Gir selvfølgelig gerne flere points for det her)

Synes godt om

Slettet bruger

17. april 2007 - 23:48 #10

Jeg har sgu fået det til at virke!:) havde glemt at sætte billedevalg til en string, så den ikke tog .jpg med.. Og nu virker window.close(); også fordi der ingen fejl var :)

Jeg siger tak for alt, og hvis du gerne vil ha flere points, så bare sig til :)
Tak for en KANON hjælp.

Synes godt om

jhe-ting Nybegynder

18. april 2007 - 03:09 #11

Alle tiders at det virker! :D
Den metode jeg har vist her er den enkleste at kode (som sådan), men vinduet kan forhindres af en 'aggressiv' popup-stopper.

En anden metode involverer et skjult div-element, der fyldes via AJAX (HTTPRequest).
Det kræver dog en del mere kodning, men tillader total kontrol af boksens udseende og er fuldstændig 'immun' over for popup-stoppere.

PS: M.h.t point er jeg ikke grådig, men da jeg ikke er betalende pro-medlem, vil jeg, hvis du føler dig gavmild, være glad for dét. :P

Synes godt om

mclemens Nybegynder

19. april 2007 - 22:59 #12

Ekstra point tråd: http://www.eksperten.dk/spm/774223

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS