Editor WYSIWYG - Passaggio da visuale a HTML e viceversa

**FedeHann** · 14-06-2011, 18:00

Ciao a tutti, sto creando un piccolo editor WYSIWYG, e, nonostante non sappia un cacchio di Javascript, fino ad ora, grazie a guide e tutorial vari, tutto è filato liscio. Ma adesso ho un problema che non riesco a risolvere: non sono in grado, cioè, di passare dalla modalità di modifica visuale dell'editor, a quella del codice HTML generato da questo.
Allora...

Io ho un frame.

codice:

<iframe src="prova.php" id="area_editor" style="height:150px;" frameBorder="0" name="frame_editor"></iframe>

Al caricamento della pagina, lo metto in modalità editazione WYSIWYG, con la funzione:

codice:

function carica() {
  attiva_frame("area_editor").designMode = "On";  
}

La funzione precedente si collega a questa:

codice:

 
function attiva_frame(id) {
  if (document.getElementById(id).contentDocument){  
    return document.getElementById(id).contentDocument;
  } else {
    return document.frames[id].document;
  }
}

Dopodichè, ho tutti i comandini cross-browser per modificare la formattazione del testo, che richiamo con apposite funzioni.
E fin qui, appunto, tutto bene.
Ma come posso fare a far sì che nell'iframe mi si stampi, al posto della visualizzazione grafica del messaggio, il solo codice HTML, e che io possa lì modificarlo, per poi vedere eventualmente il risultato di queste modifiche andando di nuovo in modalità grafica WYSIWYG? Mi servirebbe una qualche funzione attivabile con un onClick...

**Xinod** · 14-06-2011, 18:33

quello che cerchi in particolare e' un questa pagina
http://javascript.html.it/articoli/l...tor-wysiwyg/3/
ovviamente e' il caso tu legga tutto il tutorial, nel caso non l' abbia gia' fatto
e smonti l' esempio

ciao

**carlomarx** · 14-06-2011, 23:29

O altrimenti qui c'è l'editor più piccolo del mondo :-)
Scherzo ovviamente... ma è piuttosto completo in proporzione alla semplicità. Mi spiace, ma le immagini della barra degli strumenti, che devi posizionare all'interno della cartella «images», te le devi cercare da solo: non posso allegare files zip!! Il codice può essere ulteriormente ottimizzato... Non ricordo neppure dove l'ho trovato. Non mi è mai servito cmq... adoro tinyMCE!

codice:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<title>Area editabile in formato html</title>
<script type="text/javascript">
var oEditDoc, bHtmlMode = false;

function initDoc() {
	oEditDoc = document.getElementById("editFrame").contentDocument;
	oEditDoc.open();
	oEditDoc.write("<html><body></body></html>");
	oEditDoc.close();
	oEditDoc.designMode = "on";
	document.getElementById("switchMode").checked = false;
}

function docFocus() { document.getElementById("editFrame").contentWindow.focus() }

function formatDoc(cmd,opt) { if (validateMode()) { oEditDoc.execCommand(cmd, false, opt); docFocus(); } }

function validateMode() {
	if (!bHtmlMode) { return(true); } else { alert("Deselezionare \"Visualizza HTML\" per utilizzare le barre degli strumenti"); docFocus(); return(false); }
}

function setDocMode(newMode) {
	var sTxtContent;
	bHtmlMode = newMode;
	oEditBody = oEditDoc.body;
	if (bHtmlMode) {
		sTxtContent = document.createTextNode(oEditBody.innerHTML);
		oEditBody.innerHTML = "";
		oEditBody.appendChild(sTxtContent);
	} else {
		if (document.all) {
			sTxtContent = oEditBody.innerText;
			oEditBody.innerHTML = sTxtContent;
		} else {
			sTxtContent = document.createRange();
			sTxtContent.selectNodeContents(oEditBody);
			oEditBody.innerHTML = sTxtContent.toString();
		}
	}
	docFocus();
}
</script>
<style type="text/css">
.intLink {
	cursor: pointer;
}

#paragrBar select {
	font-size:10px;
}

#editFrame {
	width: 540px;
	height: 200px;
}
</style>
</head>
<body onload="initDoc();">

<div><form name="composeForm" onsubmit="this.myDocument.value=oEditDoc.body.innerHTML;">
<input type="hidden" name="myDocument">
<div id="paragrBar">
	<select id="ParagraphStyle" onchange="formatDoc('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
		<option selected>- formattazione -</option>
		<option value="&lt;h1&gt;">Titolo 1 &lt;h1&gt;</option>
		<option value="&lt;h2&gt;">Titolo 2 &lt;h2&gt;</option>
		<option value="&lt;h3&gt;">Titolo 3 &lt;h3&gt;</option>
		<option value="&lt;h4&gt;">Titolo 4 &lt;h4&gt;</option>
		<option value="&lt;h5&gt;">Titolo 5 &lt;h5&gt;</option>
		<option value="&lt;h6&gt;">Sottotitolo &lt;h6&gt;</option>
		<option value="&lt;p&gt;">Paragrafo &lt;p&gt;</option>
		<option value="&lt;pre&gt;">Formattato &lt;pre&gt;</option>
	</select>
	<select id="FontName" onchange="formatDoc('fontName',this[this.selectedIndex].value);this.selectedIndex=0">
		<option class="heading" selected>- carattere -</option>
		<option value="Arial">Arial</option>
		<option value="Arial Black">Arial Black</option>
		<option value="Arial Narrow">Arial Narrow</option>
		<option value="Comic Sans MS">Comic Sans MS</option>
		<option value="Courier New">Courier New</option>
		<option value="System">System</option>
		<option value="Times New Roman">Times New Roman</option>
		<option value="Verdana">Verdana</option>
		<option value="Wingdings">Wingdings</option>
	</select>
	<select id="FontSize" onchange="formatDoc('fontSize',this[this.selectedIndex].value);this.selectedIndex=0">
		<option class="heading" selected>- dimensione -</option>
		<option value="1">Molto piccolo</option>
		<option value="2">Ridotto</option>
		<option value="3">Normale</option>
		<option value="4">Medio-grande</option>
		<option value="5">Grande</option>
		<option value="6">Molto grande</option>
		<option value="7">Massimo</option>
	</select>
	<select id="FontColor" onchange="formatDoc('foreColor',this[this.selectedIndex].value);this.selectedIndex=0">
		<option class="heading" selected>- sTxtContent -</option>
		<option value="red">rosso</option>
		<option value="blue">blu</option>
		<option value="green">verde</option>
		<option value="black">nero</option>
	</select>
		<select id="FontBackColor" onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0">
		<option class="heading" selected>- sfondo -</option>
		<option value="red">rosso</option>
		<option value="blue">blu</option>
		<option value="green">verde</option>
		<option value="black">nero</option>
		<option value="yellow">giallo</option>
		<option value="white">bianco</option>
	</select>
</div>
<div>
<input class="intLink" title="Salva" type="image" src="images/save.gif" border="0" />
[img]images/print.png[/img]
[img]images/clean.gif[/img]
[img]images/undo.gif[/img]
[img]images/redo.gif[/img]
[img]images/unformat.png[/img]
[img]images/bold.gif[/img]
[img]images/italic.gif[/img]
[img]images/under.gif[/img]
[img]images/aleft.gif[/img]
[img]images/center.gif[/img]
[img]images/aright.gif[/img]
[img]images/nlist.gif[/img]
[img]images/blist.gif[/img]
[img]images/quote.gif[/img]
[img]images/ileft.gif[/img]
[img]images/iright.gif[/img]
[img]images/link.gif[/img]
[img]images/cut.gif[/img]
[img]images/copy.gif[/img]
[img]images/paste.gif[/img]
</div>

<iframe id="editFrame"></iframe>
	<div id="EditMode">
		<input type="checkbox" name="switchMode" id="switchMode" onclick="setDocMode(switchMode.checked)" />
		<label for="switchMode">Visualizza HTML</label> | 
		<input type="button" onclick="formatDoc('removeFormat')" value="Rimuovi Formattazione Carattere" />
	</div>

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

Discussione: Editor WYSIWYG - Passaggio da visuale a HTML e viceversa

Strumenti discussione

Ricerca discussione

Visualizza

Editor WYSIWYG - Passaggio da visuale a HTML e viceversa

Permessi di invio