✔ iFrame Inhalt per POST verschicken...

Guillermo

Guillermo

Mitglied
Hallo ich habe ein iFrame, das per Javascript verändert werden kann ( kleiner Editor), jetzt will ich den Inhalt dieses iFrames mit einem Formular verschicken, wie geht sowas?

HTML: 
<form method="post" action="seite.php">
<iframe id="editor" name="editor"></iframe>
<input type="submit" value="Speichern" />
</form>
 
Hi,

du könntest eine versteckte Textarea im Formular verstecken. Beim Betätigen des Buttons wird der Inhalt des iFrame-Dokuments ermittelt und in die Area geschrieben.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getContent(objForm){
  var objIframe = null;
  if(document.all && !window.opera){
    objIframe = document.editor.document;
  }else{
    objIframe = document.getElementById("editor").contentWindow.document;
  }

  objForm.txtContent.value = objIframe.getElementsByTagName("body")[0].innerHTML;
}
</script>
</head>
<body>
<form method="post" action="seite.php">
  <iframe id="editor" name="editor" src="leer.html"></iframe>
  <textarea name="txtContent" style="visibility: hidden;"></textarea>
  <input type="submit" value="Speichern" onclick="getContent(this.form);" />
</form>
</body>
</html>
Ciao
Quaese
 
Ok, danke ich habe es ähnlich gemacht, nur dass ich den HTML Code dann in einer hidden textbox bei onSubmit ablege.

Mein WYSIWYG Editor schaut nun wie folgt aus :
HTML Code:
HTML: 
<body onLoad="init();">
<div id="editor_menu" style="display:block">
<button type="button"  onclick="runCommand('Bold');"><b>F</b></button>
<button type="button"  onclick="runCommand('italic');"><i>i</i></button>
<button type="button"  onclick="runCommand('underline');"><u>U</u></button>
<button type="button"  onclick="runCommand('StrikeThrough');"><s>S</s></button>
</div>

<br>

<iframe name="editor" id="editor" width="400" height="500"></iframe>

<form method="post" action="" onsubmit="inhalt_kopieren();">
<input type="hidden" name="inhalt_editor" id="inhalt_editor" />
<input type="submit" name="submit_speichern" value="Seite Speichern" /><button type="button" onclick="view_source();aufklappen('editor_menu')">Quelltext anzeigen</button>
</form>

</body>

Und die editor.js
Code: 
//inhalt des iframes auf das textfeld 'inhalt_editor' kopieren, damit man dieses durch ein formular versenden kann
function inhalt_kopieren() {
	if(document.all) {
		//IE
		html_code = editor.document.body.innerHTML;
		document.getElementById('inhalt_editor').value = html_code;
	}
	else {
		//ff
		html_code = frames['editor'].document.getElementsByTagName('body')[0].innerHTML;
		document.getElementById('inhalt_editor').value = html_code;
	}
}

function init() {
	if (document.all) { //IE
		frames.editor.document.designMode = "On";
		}
	else { //Mozilla
		document.getElementById("editor").contentDocument.designMode = "on"; 
		}

}

//Befehl im Editor (iFrame) ausfürhen
function runCommand(theCommand) {
	var theEditor;
	if (document.all) { //IE
		frames.editor.document.designMode = "On";
		frames["editor"].document.execCommand(theCommand, false, ';')
		}
	else { //Mozilla
		document.getElementById("editor").contentDocument.designMode = "on"; 
		document.getElementById("editor").contentWindow.document.execCommand(theCommand, false, ';')
		}
}

//Ansichtsmodus 1 = Normal (rich text) ; 2 = html code
var viewMode = 1;

// Other code exists here

function view_source() {
	if(document.all) {
		//ie
		viewsource_ie();
	} else {
		viewsource_firefox();
	}
}

//Quelltext des iframes im IE umwandeln
function viewsource_ie() {
	if(viewMode == 1) {
		iHTML = editor.document.body.innerHTML;
		editor.document.body.innerText = iHTML;
		editor.focus();
		viewMode = 2;
	} else {
		iText = editor.document.body.innerText;
		editor.document.body.innerHTML = iText;
		editor.focus();
		viewMode = 1; // WYSIWYG
	}
}

	
//Quelltext des iframes im Firefox umwandeln
function viewsource_firefox() {
  var html;
  if (viewMode == 1) {
    html = document.createTextNode(document.getElementById('editor').contentWindow.document.body.innerHTML);
    document.getElementById('editor').contentWindow.document.body.innerHTML = "";
    html = document.getElementById('editor').contentWindow.document.importNode(html,false);
	document.getElementById('editor').contentWindow.document.body.appendChild(html);
	viewMode=2;
  } else {
    html = document.getElementById('editor').contentWindow.document.body.ownerDocument.createRange();
    html.selectNodeContents(document.getElementById('editor').contentWindow.document.body);
    document.getElementById('editor').contentWindow.document.body.innerHTML = html.toString();
	viewMode=1;
 
 }
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück