Torna al Thread
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Un editor Visuale: Esempio 9, Risultato finale</title>
<script type="text/javascript" language="javascript">
function load(){
AttivaFrame("editArea").designMode = "On";
}
function AttivaFrame(iFrameID){
if (document.getElementById(iFrameID).contentDocument){
//Mozilla
return document.getElementById(iFrameID).contentDocument;
} else {
//Internet Explorer
return document.frames[iFrameID].document;
}
}
function applicaComando(cmdStr,valCmdStr){
if (!document.getElementById("editArea").contentDocument){
switch(valCmdStr){
case "h1":
valCmdStr = "heading 1";
break;
case "h2":
valCmdStr = "heading 2";
break;
case "h3":
valCmdStr = "heading 3";
break;
case "p":
valCmdStr = "paragraph";
break;
}
}
AttivaFrame("editArea").execCommand(cmdStr,false,valCmdStr);
}
function aggiungiLink(){
var linkURL = prompt("Inserisci il link da aggiungere:", "");
AttivaFrame("editArea").execCommand("createLink", false, linkURL);
}
function vediCodice(){
var contenuto = AttivaFrame("editArea").body.innerHTML;
document.getElementById("codice").innerHTML = contenuto.replace(/</g,"<");
}
function pulisciCodice(){
var contenuto = AttivaFrame("editArea").body.innerHTML;
contenuto = contenuto.replace(/<br\>/gi,"<br/>");
contenuto = contenuto.replace(/(<p\>)(.*)(<\/p\>)/gi,"<p>$2</p>");
contenuto = contenuto.replace(/<\a/gi,"<a");
contenuto = contenuto.replace(/<\/a\>/gi,"</a>");
contenuto = contenuto.replace(/<\div\>/gi,"<div>");
contenuto = contenuto.replace(/<\/div\>/gi,"</div>");
contenuto = contenuto.replace(/(<strong\>)(.*)(<\/strong\>)/gi,"<span style=\"font-style: bold;\">$2</span>");
contenuto = contenuto.replace(/(<ul\>)(.*)(<\/ul\>)/gi,"<ul>$2</ul>");
contenuto = contenuto.replace(/(<li\>)(.*)(<\/li\>)/gi,"<li>$2</li>");
//internet explorer
contenuto = contenuto.replace(/(<font )(color)(=)(#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?)(>)(.*)(<\/font\>)/gi,"<span style=\"$2:$4;\">$9</span>");
contenuto = contenuto.replace(/(<p )(align)(=)([A-Za-z]*)(>)(.*)(<\/p\>)/gi,"<div style=\"text-align: $4;\">$6</div>");
contenuto = contenuto.replace(/(<em\>)(.*)(<\/em\>)/gi,"<span style=\"font-style: italic;\">$2</span>");
//opera
contenuto = contenuto.replace(/(<font )(color)(=\")(#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?)(\")(>)(.*)(<\/font\>)/gi,"<span style=\"$2:$4;\">$10</span>");
contenuto = contenuto.replace(/(<div )(align)(=\")([A-Za-z]*)(\")(>)(.*)(<\/div\>)/gi,"<div style=\"text-align:$4;\">$7</div>");
contenuto = contenuto.replace(/(<i\>)(.*)(<\/i\>)/gi,"<span style=\"font-style: italic;\">$2</span>");
document.getElementById("codicePulito").innerHTML = contenuto.replace(/</g,"<");
}
</script>
<style type="text/css">
div#pulsantiera {
background: ButtonFace;
width: 402px;
padding: 10px 0;
text-align: center;
}
#editArea {
width: 400px;
border: 1px solid #CCC;
}
#pulsantiera a {
background: ButtonFace;
color: ButtonText;
border: 1px solid ButtonFace;
}
#pulsantiera a.premuto {
background: ButtonHighlight;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
#pulsantiera img {
border: 0;
}
#pulsantiera a:hover {
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
</style>
</head>
<body onload="load()" style="color: #FFFFFF; background-color: #000000">
<iframe src="" id="editArea" width="300" frameborder="0"></iframe><br/>
<div id="pulsantiera">
<a href="javascript:void()" onclick="applicaComando('italic')"><img src="img/corsivo.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('bold')"><img src="img/grassetto.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('underline')"><img src="img/sottolineato.gif"/></a>
<a href="javascript:void()" onclick="aggiungiLink()"><img src="img/link.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('justifyright')"><img src="img/allineadestra.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('justifyleft')"><img src="img/allineasinistra.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('justifycenter')"><img src="img/allineacentro.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('justifyfull')"><img src="img/giustifica.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('insertorderedlist')"><img src="img/listaordinata.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('insertunorderedlist')"><img src="img/lista.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('copy')"><img src="img/copia.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('paste')"><img src="img/incolla.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('undo')"><img src="img/undo.gif"/></a>
<a href="javascript:void()" onclick="applicaComando('redo')"><img src="img/redo.gif"/></a>
<select onchange="applicaComando('formatblock',this.options[this.selectedIndex].value)">
<option>Scegli formato</option>
<option value="h1">Titolo Grande</option>
<option value="h2">Titolo Medio</option>
<option value="h3">Titolo Piccolo</option>
<option value="p">Paragrafo</option>
</select>
<select onchange="applicaComando('forecolor',this.options[this.selectedIndex].value)">
<option>Scegli un colore</option>
<option value="#00FF00">Verde</option>
<option value="#FF0000">Rosso</option>
<option value="#0000FF">Blu</option>
<option value="#000000">Nero</option>
<option value="#990000">Rosso Mattone</option>
</select>
<br/>
</div>
<hr/>
<input type="button" onclick="vediCodice()" value="visualizza il codice"/>
<input type="button" onclick="pulisciCodice()" value="pulisci il codice"/>
<br/>
<div id="codice"></div>
<hr/>
<div id="codicePulito"></div>
</body>
</html>