wysiwyg editor: elementen worden buiten iframe geplaatst.

Status
Niet open voor verdere reacties.
M

MrLee86

Gebruiker
Lid geworden
11 mei 2007
Berichten
41
Hallo allemaal,

ik ben bezig een aangepast wysiwyg editortje te maken, maar ik loop tegen een aantal problemen aan. urls en images worden niet in het iframe geplaatst, maar daarbuiten.

ik gebruik de volgende functie
HTML: 
function Link() {
	if(window.navigator.appName == "Microsoft Internet Explorer"){
		x.document.execCommand("createLink");
	}else{
		url = prompt("Voor de URL in:", "http://");
		document.getElementById('x').execCommand("createLink", false, url);
	}
}

en daarbij is een iframe met het id 'x' de target.

Op één of andere manier lukt het mij niet om dit op te lossen, ik probeer het nu al een week. Heeft iemand van jullie misschien een idee hoe ik dit op kan lossen?

NIet alleen bij plaatjes, maar ook bij het invoegen van links is dit het geval. Bij firefox worden ze wel gewoon in het iframe geplaatst.
 
Laatst bewerkt:
Het princiepe werkt wel, maar dan moet je eerst een selectie maken binnen het iframe en vervolgens een link invoegen.

Ik wil alleen dat een url dan op de plek ingevoegd wordt, daar waar de cursor staat, zonder eerst zelf een selectie te hoeven maken. Nogmaals, Firefox geeft hier geen problemen, maar het lijkt of IE8 een selectie nodig heeft om de actie uit te kunnen voeren.
 
Eh, kan je ook even je HTML plaatsen?

At any rate, wat je kan doen is kijken wat dit precies is:
[JS]x.document.execCommand("createLink");
[/JS]
zover ik weet moet dit andersom; je wilt toch in je document, het element x hebben, en daarvan een command exec-en?
[JS]document.x.execCommand("createLink");[/JS]
(of, schiet me net te binnen, wil je het document IN x een command laten exec-en?...)

Ohja, en hoe kan je 'x' aanroepen in je IE-code? er is nog geen x gedefineerd?



Dit werkt mischien beter:
[JS]function Link() {
var obj = document.getElementById('x');

if(window.navigator.appName == "Microsoft Internet Explorer"){
obj.document.execCommand("createLink");
}else{
url = prompt("Voor de URL in:", "http://");
obj.execCommand("createLink", false, url);
}
}[/JS]



:thumb:


edit: ben niet echt voor het 'if appName = ie' idee, is er geen universele code die dit doet?
 
Laatst bewerkt:
Bedankt voor je snelle reactie, maar als ik x.document aanpas in document.x werkt het helemaal niet.

ik heb hier een selectie uit de code die van belang is:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="javascript">

function CreateFrame(){ 
	// IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen 
	if(window.navigator.appName == "Microsoft Internet Explorer") {
		x.document.designMode = "on"; 
	}
	if(window.navigator.appName == "Netscape") {
		document.getElementById('x').contentDocument.designMode = "on"; 
	}
}

function SetDefaults() {
	x.document.body.style.fontFamily = "Trebuchet MS, Verdana, Arial, Helvetica, sans-serif";
	x.document.body.style.color = "#999999";
	x.document.body.style.fontSize = "12px";
	x.document.body.style.lineHeight = "20px";
	x.document.body.style.padding = "5px";
	x.document.body.style.margin = "0px";

}

function plaatje()
{

	var imagePath = "http://www.google.nl/intl/nl_nl/images/logo.gif";
	document.x.execCommand("InsertImage", false, imagePath);

}

</script>

</head>

<body onload="javascript:CreateFrame();">

<img src="Images/TekstEditor_IconImage.png" width="24" height="24" onmouseup="javascript:this.src='Images/TekstEditor_IconImage.png';" onmouseover="javascript:this.src='Images/TekstEditor_IconImageH.png';" onmousedown="javascript:this.src='Images/TekstEditor_IconImageD.png';" onmouseout="javascript:this.src='Images/TekstEditor_IconImage.png';" onclick="plaatje();" />

<iframe onload="this.focus();SetDefaults();" id="x" name="x" width="626" height="500" frameborder="0"></iframe>

</body>

</html>
 
Ik moet daarbij zeggen dat ik weinig verstand heb van javascript, maar dat ik het hiermee probeer te begrijpen.
 
voor een werkend (nouja... werkend?) voorbeeld: http://www.dianeoskam.nl/temp/editor.html

door op het smiley icoon te drukken en vervolgens op een smiley wordt de functie plaatje() geactiveerd.
Als ik op willekeurige smiley druk, gebeurt er niets. Als ik echter een spatie in de textarea plaats en deze
selecteer en vervolgens op een willekeurige smiley druk, verschijnt het google log (als voorbeeldje).

ik wil een plaatje plaatsen zonder eest een selectie te hoeven maken...
 
Laatst bewerkt:
]
(of, schiet me net te binnen, wil je het document IN x een command laten exec-en?...)
Klik om te vergroten...

Ja, ik wil de content in het iframe aanpassen wat in princiepe een ander document is.


Ohja, en hoe kan je 'x' aanroepen in je IE-code? er is nog geen x gedefineerd?
Klik om te vergroten...
Nee, er is geen andere 'x' gedefinieerd.
 
Ah, vandaar. Ik firefox krijg ik de volgende fouten:
Fout: uncaught exception: [Exception... "Not enough arguments [nsIDOMNSHTMLDocument.execCommand]" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://www.dianeoskam.nl/temp/editor.html :: Undo :: line 45" data: no]
Klik om te vergroten...
-> execCommand() functie met te weinig parameters ingevoerd
Fout: x.document.selection is undefined
Bronbestand: http://www.dianeoskam.nl/temp/editor.html
Regel: 161
Klik om te vergroten...
-> x bestaat niet, die haal je zegmaar uit de lucht. Dat kan dus niet, daar moet je even wat aan doen.


Nu weet ik zowiezo niet precies waarom je eigenlijk met een iFrame werkt. Het is waarschijnlijk een stuk makkelijker om gewoon een div te nemen - maargoed, dat is even niet je vraag. Oh, zie trouwens nu dat je de designmodes aanzet - vandaar. nvm.

Het punt is, je gebruikt de variabele 'x' welke nog niet aangemaakt is. Je zult dus eerst x moeten zoeken:
[JS]var x = document.getElementById('x'); //x is een pointer naar je iframe[/JS]
daarna kan je x gebruiken. Bijvoorbeeld:
[JS]function plaatje()
{
var x = document.getElementById('x');
var imagePath = "http://www.google.nl/intl/nl_nl/images/logo.gif";

x.execCommand("InsertImage", false, imagePath); //x was een pointer naar document[element: iframe (id: 'x')]
}
[/JS]

probeer dus die code eens ipv. je huidige code.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan