Nell'ambito di un semplice CMS, ho la necessità di dotarlo di un editor di testo in grado di implementare alcune formattazioni base (grassetto, corsivo, sottolineato).
Ovviamente, mi occorre che questo testo formattato possa poi essere salvato (questo è un problema che risolvo via PHP). E, poichè i testi verranno successivamente caricati in una interfaccia Flash, mi occorre anche che la formattazione sia attribuita in modo che venga riconosciuta come tale da Flash.
Ciò premesso, ho implementato questo editor:
codice JavaScript
Codice PHP:
<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;
}
// 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> 
codice html
Codice PHP:
<form action="home.php" method="post" name="composeForm">
        <table class="greyborder" bgcolor="#ffffff" border="0" cellpadding="5" cellspacing="0" width="100%">
          <tbody><tr>
              <td align="center" valign="top" bgcolor="#CCCCCC"> 
                <div id="ParaToolbar"><div id="EditMode">
                    <input name="switchMode" id="switchMode" onclick="setMode(switchMode.checked)" type="checkbox">
                    <font color="#000000">[b]Visualizza HTML[/b] | </font>
                    [url="javascript:formatC('removeFormat')"][b]Rimuovi Formattazione Carattere[/b][/url]
                </div><hr size="1" noshade="noshade"></div>
            <table><tbody><tr align="center" valign="middle"> 
                  <td width="25" height="25"><div title="Grassetto" onclick="formatC('bold');"> 
                      [img]bold.gif[/img]</div></td>
                  <td width="25" height="25"><div title="Corsivo" onclick="formatC('italic')"> 
                      [img]italic.gif[/img]</div></td>
                  <td width="25" height="25"><div title="Sottolineato" onclick="formatC('underline')"> 
                      [img]under.gif[/img]</div></td>
                </tr></tbody></table>
            <iframe class="Composition" id="Composition" height="200" width="100%"><?PHP echo $testo; ?></iframe>


          <input type="reset" name="reset" value="Cancella tutto" />
          
          <input name="submit" type="submit" id="submit" value="Modifica Testo" />
              </td>
            </tr></tbody></table></form>
Però ho due tipi di problemi, relativamente alle esigenze di cui dicevo in premessa. Intanto, non riesco a trasmettere il testo modificato/formattato utilizzando il form. Il testo, infatti, sta in un iFrame, e se provo ad inserirlo in una textarea non funziona più l'editor.
E non so come venire a capo di questo problema...
Il secondo, è che la formattazione avviene utilizzando i tag span, del tipo:
per il grassetto, <span style="font-weight: bold;"></span>
per il corsivo, <span style="font-style: italic;"></span>
per il sottolineato, <span style="text-decoration: underline;"></span>
mentre Flash riconosce i vecchi tag html , e <u></u>.
Come posso risolvere questi due problemi?