area testo editabile

**holden_1972** · 23-12-2005, 18:58

Salve ho scaricato questo codice che serve a editare un'area del form come si può fare con word o con i pannelli che sto usando, questo è il codice javascript:

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>

E questo è il form html:

codice:

<form action="#" method="POST" name="composeForm">



<hr>
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" width="100%" class="greyborder">
    <tr>
        <td>
            <div id="ParaToolbar">
                <select id="ParagraphStyle" onchange="formatC('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
                    <option selected>Paragrafo
                    <option value="&lt;H1&gt;">Titolo 1 &lt;H1&gt;
                    <option value="&lt;H2&gt;">Titolo 2 &lt;H2&gt;
                    <option value="&lt;H3&gt;">Titolo 3 &lt;H3&gt;
                    <option value="&lt;H4&gt;">Titolo 4 &lt;H4&gt;
                    <option value="&lt;H5&gt;">Titolo 5 &lt;H5&gt;
                    <option value="&lt;H6&gt;">Titolo 6 &lt;H6&gt;
                    <option value="&lt;PRE&gt;">Formattato &lt;PRE&gt;
                </select>
                <select id="FontName" onchange="formatC('fontname',this[this.selectedIndex].value);this.selectedIndex=0">
                    <option class="heading" selected>Tipo Carattere
                    <option value="Arial">Arial
                    <option value="Arial Black">Arial Black
                    <option value="Arial Narrow">Arial Narrow
                    <option value="Comic Sans MS">Comic Sans MS
                    <option value="Courier New">Courier New
                    <option value="System">System
                    <option value="Times New Roman">Times New Roman
                    <option value="Verdana">Verdana
                    <option value="Wingdings">Wingdings
                </select>
                <select id="FontSize" onchange="formatC('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
                    <option class="heading" selected>Dimensione
                    <option value="1">1
                    <option value="2">2
                    <option value="3">3
                    <option value="4">4
                    <option value="5">5
                    <option value="6">6
                    <option value="7">7
                </select>
                <select id="FontColor" onchange="formatC('forecolor',this[this.selectedIndex].value);this.selectedIndex=0">
                    <option class="heading" selected>Colore Testo
                    <option value="red">rosso
                    <option value="blue">blu
                    <option value="green">verde
                    <option value="black">nero
                </select>
                <select id="FontBackColor" onchange="formatC('backcolor',this[this.selectedIndex].value);this.selectedIndex=0">
                    <option class="heading" selected>Colore Sfondo
                    <option value="red">rosso
                    <option value="blue">blu
                    <option value="green">verde
                    <option value="black">nero
                    <option value="yellow">giallo
                    <option value="">BIANCO
                </select>
                <hr>
                <div id="EditMode">
                    <input type=checkbox name="switchMode" id="switchMode" onclick="setMode(switchMode.checked)">
                    <font color="#000000">Visualizza HTML | </font>
                    Rimuovi Formattazione Carattere
                </div>
                <hr>
            </div>

            <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>
                </tr>
            </table>

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

Il problema è semplice: quale variabile devo passare alla pagina successiva che contenga il testo formattato?

Nicola

**fcaldera** · 23-12-2005, 19:06

a occhio direi riquadro.innerHTML però se non funziona proverei direttamente con iFrameDoc.getElementsByTagName('body')[0].innerHTML

**holden_1972** · 23-12-2005, 19:53

Non ho capito, io ho bisogno di sapere che nome ha la variabile che contiene il testo formattato e che viene passata via post e come richiamarla nella pagina successiva quando devo metterla in una variabile per poi caricarla su una tabella,

Nicola

ps in sostanza

nella pag successiva:

$testo = $_POST['????'];

Discussione: area testo editabile

Strumenti discussione

Ricerca discussione

Visualizza

area testo editabile

Permessi di invio