Area editabile

**ANTAGONIA** · 15-03-2010, 16:52

Buon pomeriggio a tutti, vorrei sapere cortesemente, nello script che posto di seguito, dove, lo stesso, a seconda della mia richiesta, va a caricare i tag, perchè io non li ved oda nessuna parte..
Per esempio, se clicco su Grassetto, invece di caricarmi i tag mi carica <span color="bolder"></span>

Questo esempio l'ho scaricato qui su html.it

codice:

<script language="JavaScript">
<!--
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();
}
-->
</script>

Questo è il codice html:

codice:

<form action="#" method="POST" name="composeForm">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" width="100%" class="greyborder">
	<tr>
		<td>
<table>
				<tr>
					<td>
						<div title="Grassetto" onclick="formatC('bold');">
						    [img]bold.gif[/img]
						</div>
					</td>
					<td>
						<div title="Corsivo" onclick="formatC('italic')">
						    [img]italic.gif[/img]
						</div>
					</td>
				    <td>
						<div title="Sottolineato" onclick="formatC('underline')">
						    [img]under.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Allinea a sinistra" onclick="formatC('justifyleft')">
						    [img]aleft.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Centra" onclick="formatC('justifycenter')">
						    [img]center.gif[/img]
						</div>
					</td>
					<td>
						<div title="Allinea a destra" onclick="formatC('justifyright')">
						    [img]aright.gif[/img]
						</div>
					</td>
					<td>
						<div title="Elenco puntato" onclick="formatC('insertorderedlist')">
						    [img]nlist.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Elenco numerato" onclick="formatC('insertunorderedlist')">
						    [img]blist.gif[/img]
					  	</div>
					</td>
					<td>
						<div title="Riduci rientro" onclick="formatC('outdent')">
						    [img]ileft.gif[/img]
						</div>
					</td>
					<td>
						<div title="Aumenta rientro" onclick="formatC('indent')">
						    [img]iright.gif[/img]
						</div>
					</td>
					<td>
						<div id="taglia" title="Taglia" onclick="formatC('cut')">
					    	[img]cut.gif[/img]
					 	</div>
					</td>
					<td>
						<div id="copia" title="Copia"  onclick="formatC('copy')">
						    [img]copy.gif[/img]
  						</div>
					</td>
				  	<td>
						<div id="incolla" title="Incolla" onclick="formatC('paste')">
						    [img]paste.gif[/img]
					    </div>
					</td>
					<td>
						<input type="checkbox" name="switchMode" id="switchMode" onclick="setMode(switchMode.checked)">
						<font color="#000000">Visualizza HTML | </font>
					</td>
					<td>
						Rimuovi Formattazione Carattere
					</td>
			  	</tr>
			</table>

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

Vorrei capire dov'è che prendere, a seconda della scelta i TAG richiesti.
Grazie mille.

**Xinod** · 15-03-2010, 18:03

se usi script che si appoggiano all' execCommand per permettere la formattazione non hai controllo su cose del genere: e' il browser a decidere quali tag/attributi usare per rendere quel tipo di formattazione

**ANTAGONIA** · 16-03-2010, 09:52

ciao Xinod....allora cosa mi consigli?
C'è un'area editabile più malleabile diciamo cosi?
grazie ancora

**Xinod** · 16-03-2010, 11:22

usa un fck (ora ckeditor) semplificato

**ANTAGONIA** · 16-03-2010, 15:28

ciao Xinod, si ho scaricato la versione che dicevi e l'ho adattata alla mia pagina.
Solo che ho notato che il file ckeditors.js pesa 270Kb, cioè un infinità.
C'è una versione light?

Oppure posso togliere un po di script per renderlo più snello?
grazie ancora

**ANTAGONIA** · 16-03-2010, 16:21

ciao scusate un'altra domanda, che riguarda il controllo di questa textarea.
Lo script che posto non esegue il controllo del campo vuoto sulla textarea:

codice:

//script
function subControlla() {
			if (document.frmPopUp.txtTesto.value == "") {
				alert("Campo Obbligatorio - Testo Completo!");
				document.frmPopUp.txtTesto.focus();
				return;
			}
			if (!confirm("Inserire News?")) return;
			subPreSubmit();
			document.frmPopUp.action="?p=in_news";
			document.frmPopUp.submit();
		}

//html
<form  name="frmPopUp" method="post" action="?p=news" enctype="multipart/form-data">
<textarea name='txtTesto' id="txtTesto" cols='1' rows='5' style="width:288px; font-size:11"><?php echo stripslashes($txtTesto);?></textarea>
					<script type="text/javascript">
					//<![CDATA[
						CKEDITOR.replace( 'txtTesto' );
					//]]>
					</script>
</form>

Sapete il perchè?
grazie ancora

Discussione: Area editabile

Strumenti discussione

Ricerca discussione

Visualizza

Area editabile

Permessi di invio