Ciao,
non ho avuto molto tempo in questi giorni però stasera finalmente sono riuscito a dare un'occhiata al tuo problema che mi ha incuriosito perché non sapevo nulla di ExecCommand e dei suoi simpatici amici quindi mi sono scaricato una decina di 3D dal forum e mi sono studiato la faccenda. Credo che siano gli stessi 3D da cui hai preso spunto tu perché le variabili hanno gli stessi nomi.
E così tra quello che ho trovato, le cose che ci siamo detti e un po' di prove ho tirato fuori questo:
codice:
<html>
<head>
<style>
.nascosto {display:none;}
.visibile {display:block;}
</style>
<script language="JavaScript">
<!--
var bHtmlMode = false;
var str_iFrameDoc = (document.all)? "document.frames(\"Composition\").document\;": "document.getElementById(\"Composition\").contentDocument\;";
var $c;
onload = initialize;
// Inizializzazione
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;
}
// 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;
}
setFocus();
iFrameDoc = eval(str_iFrameDoc);
if(document.all) {
switch (what) {
case "inserthtml" : what = "paste";
break;
case "bold" : what = "???";
break;
case "italic" : what = "???";
break;
case "underline" : what = "???";
break;
}
}
iFrameDoc.execCommand(what,false,opt);
// setFocus(); <-- mi sembra che non serva
}
//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();
}
function cambia() {
if ($c == "lo") {
document.getElementById('min').className = "visibile";
document.getElementById('mai').className = "nascosto";
$c = "up";
} else {
document.getElementById('min').className = "nascosto";
document.getElementById('mai').className = "visibile";
$c = "lo";
}
}
function scrivi(pulsante) {
formatC("inserthtml", pulsante.value);
}
-->
</script>
</head>
<body>
<form action="#" method="POST" name="composeForm">
<div id='min' class='visibile'>
<input type='button' value='a' onclick='scrivi(this)' />
<input type='button' value='b' onclick='scrivi(this)' />
<input type='button' value='c' onclick='scrivi(this)' />
<input type='button' value='d' onclick='scrivi(this)' />
<input type='button' value='e' onclick='scrivi(this)' />
</div>
<div id='mai' class='nascosto'>
<input type='button' value='A' onclick='scrivi(this)' />
<input type='button' value='B' onclick='scrivi(this)' />
<input type='button' value='C' onclick='scrivi(this)' />
<input type='button' value='D' onclick='scrivi(this)' />
<input type='button' value='E' onclick='scrivi(this)' />
</div>
<input type='button' value='cambia' onclick='cambia()' />
<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>
</body>
</html>
Come vedi si tratta sostanzialmente di uno dei 3D ripulito e ordinato e arricchito dei pulsanti per le lettere (direttamente in html, ho bypassato il php perché mi faceva perdere tempo).
Mi sembra che cominci a funzionare benino su tutti i browser (provato sui cinque classici), e che restino due sole cose da mettere ancora a posto, la prima è che la trasformazione da html a testo e viceversa non funziona su tutti (questo credo che sia dovuto al fatto che solo IE, a quanto ne so, supporta la innerText), però non mi ci sono ancora soffermato con calma e l'altra è che le stringhe da passare ai browser per ottenere un certo comando sono diverse, per esempio "inserthtml" diventa "paste" nel caso di IE (occhio che può darsi che stia dicendo una stupidaggine, è solo da poche ore che sto giocando con queste cose, però sembra funzionare), mentre "justifycenter" funziona per tutti. La switch lasciata incompleta con i ??? serve a questo, dovrai documentarti un po' e cercare di capire quali nomi vanno usati.
Facci sapere come procede il lavoro.
Ciao