iframe - editor - passaggio del testo alla pagina html

**a.forte** · 16-09-2010, 15:59

Buonasera a tutti,
come al solito ho problema con javascript;
ho preso un editor dalla rete, semplice e pulito. è composto da una pagina html e uno script con le funzioni necessarie al cambio dei caratteri (colore, font, grandezza etc.).
La bellezza di questo editor è che è semplice, ma ahimè come spazio per la scrittura usa un iframe, per cui ora non so come recuperare il testo nella pagina html. Vi posto i codici della pagina html e delle funzioni.

editor.js

codice:

var bHtmlMode = false;
var str_iFrameDoc = (document.all)? "document.frames(\"Composition\").document\;": "document.getElementById(\"Composition\").contentDocument\;";

// Inizializzazione
onload = initialize;
function initialize() {
	iFrameDoc = eval(str_iFrameDoc);
		
	iFrameDoc.open();
	iFrameDoc.write("<html><body MONOSPACE style='font:10pt arial,sans-serif'></body></html>");
	iFrameDoc.close();
	iFrameDoc.designMode = "On";
	
	document.getElementById("switchMode").checked = false;
	
	if (!document.all) {
	    document.getElementById("taglia").style.visibility = "hidden";
	    document.getElementById("copia").style.visibility = "hidden";
	    document.getElementById("incolla").style.visibility = "hidden";
	}
}

// Porta il focus al riquadro di testo
function setFocus() {
if (document.all)
	document.frames("Composition").focus();
else
	document.getElementById('Composition').contentWindow.focus()
return;
}

// Controlla se la toolbar è abilitata nella modalità testo
function validateMode() {
	if (! bHtmlMode)
		return true;
	alert("Deselezionare \"Visualizza HTML\" per utilizzare le barre degli strumenti");
	
	setFocus();
	return false;
}

// Formatta il testo
function formatC(what,opt) {
	if (!validateMode())
		return;

	iFrameDoc = eval(str_iFrameDoc);
	iFrameDoc.execCommand(what,false,opt);
 
	setFocus();
}

//Scambia tra la modalità testo e la modalità HTML.
function setMode(newMode) {
	var testo;
	
	bHtmlMode = newMode;
	
	iFrameDoc = eval(str_iFrameDoc);
	riquadro = iFrameDoc.body;
	
	if (document.all) {
		if (bHtmlMode) {
			testo = riquadro.innerHTML;
			riquadro.innerText = testo; 
		} else {
			testo = riquadro.innerText;
			riquadro.innerHTML = testo;
		}
		
	} else if(document.getElementById && document.createTextNode) {
		if (bHtmlMode) {
			testo = document.createTextNode(riquadro.innerHTML);
			riquadro.innerHTML = "";
			riquadro.appendChild(testo);
		} else {
			testo = document.createRange();
			testo.selectNodeContents(riquadro);
			riquadro.innerHTML = testo.toString();
		}	
	}

	setFocus();
}

codice:

<html>
<head>
<title>editor</title>
<script language="JavaScript" src="img/editor.js" type="text/javascript"></script>
</head>

<body bgcolor="#FFFFFF" topmargin="0" marginheight="2">
<form action="#" method="get" name="composeForm">



<hr>
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" width="100%" class="greyborder">
	<tr>
		<td>
			<div id="ParaToolbar">
				<select id="ParagraphStyle" onchange="formatC('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
					<option selected>Paragrafo
					<option value="&lt;H1&gt;">Titolo 1 &lt;H1&gt;
					<option value="&lt;H2&gt;">Titolo 2 &lt;H2&gt;
					<option value="&lt;H3&gt;">Titolo 3 &lt;H3&gt;
					<option value="&lt;H4&gt;">Titolo 4 &lt;H4&gt;
					<option value="&lt;H5&gt;">Titolo 5 &lt;H5&gt;
					<option value="&lt;H6&gt;">Titolo 6 &lt;H6&gt;
					<option value="&lt;PRE&gt;">Formattato &lt;PRE&gt;
				</select>
				<select id="FontName" onchange="formatC('fontname',this[this.selectedIndex].value);this.selectedIndex=0">
					<option class="heading" selected>Tipo Carattere
					<option value="Arial">Arial
					<option value="Arial Black">Arial Black
					<option value="Arial Narrow">Arial Narrow
					<option value="Comic Sans MS">Comic Sans MS
					<option value="Courier New">Courier New
					<option value="System">System
					<option value="Times New Roman">Times New Roman
					<option value="Verdana">Verdana
					<option value="Wingdings">Wingdings
				</select>
				<select id="FontSize" onchange="formatC('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
					<option class="heading" selected>Dimensione
					<option value="1">1
					<option value="2">2
			    	<option value="3">3
				    <option value="4">4
				    <option value="5">5
				    <option value="6">6
				    <option value="7">7
				</select>
		    	<select id="FontColor" onchange="formatC('forecolor',this[this.selectedIndex].value);this.selectedIndex=0">
			    	<option class="heading" selected>Colore Testo
				    <option value="red">rosso
				    <option value="blue">blu
				    <option value="green">verde
				    <option value="black">nero
				</select>
			   	<select id="FontBackColor" onchange="formatC('backcolor',this[this.selectedIndex].value);this.selectedIndex=0">
			    	<option class="heading" selected>Colore Sfondo
				    <option value="red">rosso
				    <option value="blue">blu
				    <option value="green">verde
				    <option value="black">nero
			    	<option value="yellow">giallo
				    <option value="">BIANCO
				</select>
				<hr>
				<div id="EditMode">
					<input type=checkbox name="switchMode" id="switchMode" onclick="setMode(switchMode.checked)">
					<font color="#000000">Visualizza HTML | </font>
					Rimuovi Formattazione Carattere
				</div>
				<hr>
			</div>

			<table>
				<tr>
					<td>
						<div title="Grassetto" onclick="formatC('bold');">
						    [img]img/bold.gif[/img]
						</div>
					</td>
					<td>
						<div title="Corsivo" onclick="formatC('italic')">
						    [img]img/italic.gif[/img]
						</div>
					</td>
				    <td>
						<div title="Sottolineato" onclick="formatC('underline')">
						    [img]img/under.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Allinea a sinistra" onclick="formatC('justifyleft')">
						    [img]img/aleft.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Centra" onclick="formatC('justifycenter')">
						    [img]img/center.gif[/img]
						</div>
					</td>
					<td>
						<div title="Allinea a destra" onclick="formatC('justifyright')">
						    [img]img/aright.gif[/img]
						</div>
					</td>
					<td>
						<div title="Elenco puntato" onclick="formatC('insertorderedlist')">
						    [img]img/nlist.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Elenco numerato" onclick="formatC('insertunorderedlist')">
						    [img]img/blist.gif[/img]
					  	</div>
					</td>
					<td>
						<div title="Riduci rientro" onclick="formatC('outdent')">
						    [img]img/ileft.gif[/img]
						</div>
					</td>
					<td>
						<div title="Aumenta rientro" onclick="formatC('indent')">
						    [img]img/iright.gif[/img]
						</div>
					</td>
					<td>
						<div id="taglia" title="Taglia" onclick="formatC('cut')">
					    	[img]img/cut.gif[/img]
					 	</div>
					</td>
					<td>
						<div id="copia" title="Copia"  onclick="formatC('copy')">
						    [img]img/copy.gif[/img]
  						</div>
					</td>
				  	<td>
						<div id="incolla" title="Incolla" onclick="formatC('paste')">
						    [img]img/paste.gif[/img]
					    </div>
					</td>
			  	</tr>
			</table>

			<iframe class="Composition" name="t" width="100%" id="Composition" height="190">
			</iframe>
			
		</td>
	</tr>
</table>

</form>
</body>
</html>

L'editor funziona, ma non riesco a recuperare il testo, mi sapreste aiutare?

**a.forte** · 16-09-2010, 16:37

Aggiungo qualche correzione che andrebbe fatta, ma il linguaggio js non lo conosco proprio bene, quindi avrei bisogno di una mano da chi ne capisce.

Credo che il testo scritto nell'iframe sia: str_iFrameDoc.
Per cui basterebbe forse creare una funzione che associ il suo valore ad una variabile da passare all'html, che diventerà poi php per questioni mie. Cioè:

codice:

function getV(){
stringa = eval(str_iFrameDoc);
...
}

Nell'html manca la chiusura del tag </form> e il tasto di invio:

codice:

<input type="submit" value="INVIA" onclick="getV()">
</form>

in via logica credo sia così, ma non conosco le sintassi.

**a.forte** · 17-09-2010, 12:08

33 visite e neanche una risposta, fatemi domande, alla fine si tratta di una funzione, io ho messo tutto il codice per semplicità, non per spaventare.
Please.

**a.forte** · 17-09-2010, 15:30

Salve, sono alla fine del problema, mi manca solo l'ultima istruone:

in sostanza mi manca solo una istruzione;
form.php è la form di esempio che riceve il valore link;

form.php

Codice PHP:


echo "

<form action=\"{$_SERVER['PHP_SELF']}\" method=\"POST\" onsubmit=\"valori()\">

<input type=\"text\" name=\"link\">

<input type=\"submit\" value=\Invio\"></h3></form>

";

attraverso la funzione valori in form.js effettuo delle operazioni alla variabile e fin qui tutto ok. Infine mi trovero il valore nella variabile link_js, in form.js;
Ora, qual'è l'istruzione che mi passa link_js nella form.php? Il flusso è:
1)Digito qualcosa nella form, clicco invio;
2)La funzione valori() effettua le operazioni
3)In form.php trovo il risultato delle operazioni.

form.js

Codice PHP:


function valori()

{

    //serie di istruzioni che portano il valore di "link" nella variabile "link_js" 

...

...

            // istruzione per passare la variabile alla form

}

Grazie

Discussione: iframe - editor - passaggio del testo alla pagina html

Strumenti discussione

Ricerca discussione

Visualizza

iframe - editor - passaggio del testo alla pagina html

Passaggio variabili

Permessi di invio