[JS] Editor di testi web

13-05-2006, 19.12.29

Sera a tutti.
Sto provando uno script presente su HTML.it per inserire un editor web in JavaScript, come questo del vBulletin.
A prescindere dal fatto che non conosco un emerito nulla di JS, mi sono trovato col codice non funzionante.
Ho copiato il JS così com'era e l'ho piazzato in un file chiamato panel.js.
L'ho richiamato nella pagina dove deve apparire ed ho inserito, sempre con la stessa conformazione, tutto il pannellino completo che si può vedere qui.
La pagina di lavoro è in PHP, ma il problema è sull'iframe.
Mi spiego meglio: la pagina svolge una chiamata INSERT sul database MySQL. Di conseguenza ho necessità di verificare che ogni campo sia stato correttamente compilato. Ho provato, quindi, a dare un nome all'iframe utilizzando l'attributo "name=" per poterlo leggere nel $_POST.
Tuttavia continuo a ricevere un messaggio di errore che appare solo quando non sono stati compilati tutti i campi.
In che maniera potrei risolvere questa questione? Giuro che non so più come andare avanti

Ringrazio anticipatamente

Ciao!

13-05-2006, 19.29.40

Non è all'iframe che devi dare il nome, ma alla textarea.

Cmq il link alla tua pagina non funzionante potrebbe essere utile

13-05-2006, 21.04.33

Lo script non fa uso di textarea

C'è solo un iframe formato da una pagina HTML semplicissima (solo <html> e <body> vuoti) all'interno della quale si può scrivere.
Tra una mezz'oretta posto anche il codice della pagina (gira in locale

).

EDIT:
Ecco qui di seguito il codice essenziale del file:

Codice PHP:


  if (!$submit) {

?>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">

<table class="am" align="center" cellspacing="0" cellpadding="0">

<tr><td class="am_header" colspan="2">aggiunta follia</td></tr>

<tr><td class="am_left">Postato da:</td><td class="am_right"><input type="text" name="username" maxlenght="32" /></td></tr>

<tr><td class="am_left">Tipo:</td><td class="am_right"><select name="type"><option value="studenti">Studenti<option value="professori">Professori</select></td></tr>

<tr><td class="am_left">Folle:</td><td class="am_right"><input type="text" name="persona" /></td></tr>

<tr><td class="am_left">Anteprima:</td><td class="am_right"><input type="text" name="ante" maxlenght="64" /></td></tr>

<tr><td class="am_message" colspan="2">Follia:<br /><script type="text/javascript" language="JavaScript" src="./includes/panel.js" charset="ISO-8859-1"></script>

<?php include "./includes/composition.php"?></td></tr>

<tr><td class="am_footer" colspan="2"><input type="submit" name="submit" value="Aggiungi" class="submit" /></td></tr>

</table></form>

<?php

  } else {

    if (!isset($_POST["username"])) $_POST["username"] = "";

    if (!isset($_POST["type"])) $_POST["type"] = "";

    if (!isset($_POST["persona"])) $_POST["persona"] = "";

    if (!isset($_POST["ante"])) $_POST["ante"] = "";

    if (!isset($_POST["follia"])) $_POST["follia"] = "";

    if (!isset($_POST["t"])) $_POST["t"] = "";

    

    $username = $_POST["username"];

    $type = $_POST["type"];

    $persona = $_POST["persona"];

    $ante = $_POST["ante"];

    $follia = $_POST["follia"];

    $t = $_POST["t"];

    

    if ($type = "studenti") {

      $t = "s";

    } elseif ($type = "professori") {

      $t = "p";

    }

    

    $mysql_connect;

    $mysql_select_db;

    

    if ($username != NULL AND $persona != NULL AND $ante != NULL AND $follia != NULL) {

      $mysql_query = QUERY;

      

      if ($mysql_query == 1) {

        echo "L'aggiunta &egrave; stata effettuata correttamente!<br />\nLa follia &egrave; visibile all'indirizzo qui di seguito specificato:<br />\n<a href=\"../view.php?id=$id&amp;t=$t\" target=\"_blank\">$ante</a>";

      } else {

        echo "Si &egrave; verificato un errore. Non &egrave; stato possibile completare la richiesta.<br />\nContattare l'amministratore per maggiori informazioni.";

      }

    } else {

      echo "Tutti i campi vanno compilati!<br />\n<a href=\"javascript:history.go(-1)\">Torna indietro</a>";

    }

  }

Composition.php è proprio il file che contiene il piccolo pannello di scrittura, che non aggiungo perché il codice è visibile direttamente da HTML.it

13-05-2006, 22.36.56

Ops scusa, non avevo notato quel dettaglio

Comunque a questo punto direi di creare un nuovo campo nascosto nel form, e al momento del submit gli assegni il valore del frame con una funzione di questo tipo:

Codice HTML:

function submitForm () {
	testo = "";
	if (document.all) {
		testo = riquadro.innerHTML;
	} else if(document.getElementById && document.createTextNode) {
		testo = document.createTextNode(riquadro.innerHTML);
	}
	document.composeForm.<nome campo nascosto>.value = testo;
	document.composeForm.submit ();
}

Provalo e dimmi se funziona, ma non ti assicuro nulla, dal momento che mi sono basato su funzioni che nemmeno conosco

13-05-2006, 23.14.56

Continua a dire che i campi vanno compilati... però penso di aver commesso un errore io

Ho scritto "<input type="hidden" name="follia" />" (si, il campo si chiamerà così :D) ed ho sostituito "follia" a "<nome campo nascosto>".
Ho provato, ma continua a richiedermi di compilare ogni campo :(

13-05-2006, 23.53.49

uhm.. questa funzione la inserivi tra i tags <script></script>, vero?

cmq prova così allora:

Codice HTML:

function submitForm () {
	testo = "";
	if (document.all) {
		testo = riquadro.innerHTML;
	} else if(document.getElementById && document.createTextNode) {
		testo = document.createTextNode(riquadro.innerHTML);
	}
	document.forms['composeForm'].follia.value = testo;
	document.composeForm.submit ();
}

14-05-2006, 00.14.00

La funzione l'ho messa direttamente in panel.js.
Ho provato anche con questo, ma non funziona

EDIT: ho provato anche a metterlo a parte nell'head della pagina, ma comunque non funziona...

14-05-2006, 00.21.20

Uhm..
Altre 2 domande:

1- il pulsante per il submit del form come l'hai inserito?
-> dovrebbe essere qualcosa del tipo

Codice HTML:

<input type='button' name='submit' onClick='javascript:submitForm();'>

2- che browser utilizzi?
-> se è Firefox e ancora lo script non funziona prova a premere CTRL+SHIFT+J, si aprirà la console javascript: prova a guardare sulle ultime righe (le più recenti sono verso il basso) cosa ti dice, e magari postalo qui..

14-05-2006, 00.39.23

il submit lo uso così:
<input type="submit" name="submit" value="Aggiungi" />
perché utilizzo uno script completamente in PHP per il lavoro.

Sulla console, tra i warning relativi al foglio di stile, è apparso questo:
document.getElementById("taglia") has no properties
Ovviamente, questo, su panel.js

14-05-2006, 01.03.22

se usi un submit allora devi eliminare l'ultima riga della mia funzione, che diventa:

Codice HTML:

function submitForm () {
	testo = "";
	if (document.all) {
		testo = riquadro.innerHTML;
	} else if(document.getElementById && document.createTextNode) {
		testo = document.createTextNode(riquadro.innerHTML);
	}
	document.forms['composeForm'].follia.value = testo;
}

e devi inserire sul tag form un altro parametro:

Codice HTML:

<form name='ecc' method='ecc' action='ecc' onSubmit='javascript:submitForm();'>

che campo è taglia..??

EDIT: comunque un link o il sorgente della pagina in questione (e anche di panel.js) mi sarebbe utile, giusto per vedere com'è messa ora..

14-05-2006, 01.13.03

Detto fatto:
add
panel.js
La questione di taglia credo si possa risolvere cambiandolo con "cut". Forse un piccolo errore del team di HTML.it

Ho provato anche con onsubmit, ma continua a non funzionare :(

14-05-2006, 01.24.15

Dunque, quello che ti posso dire ora è di aggiungere javascript: prima del nome della funzione nel tag form (come da esempio nel mio post precedete^^);
in secondo luogo, se ti dice che taglia non ha proprietà è possibile che tu ti sia dimenticato di aggiungere un div, perchè è scritto uguale uguale agli altri due div (copia e incolla) nel sorgente di html.it, e tra l'altro utilizzando lo script originale l'errore non c'è..
Prova a dare una controllatina al file con l'frame, perchè di solito quando js trova errori di questo tipo su una funzione si inchioda, e quindi potrebbe essere questa la causa di tutti i malfunzionamenti..

PS :: cmq ora me ne vado a nanna, che comincio a non connettere più

se non risolvi vediamo questa mattina.

14-05-2006, 12.02.20

Errore mio :D Ho corretto subito anche qui, ma continua a non fungere.
Per quanto riguarda quella porzione di codice su panel.js, ho provato a commentare:

Codice:

if (!document.all) {
  document.getElementById("taglia").style.visibility = "hidden";
  document.getElementById("copia").style.visibility = "hidden";
  document.getElementById("incolla").style.visibility = "hidden";
}

questa porzione di codice. Ma quando provo ad inviare mi fornisce un altro errore: "riquadro is not defined"

Codice:

function submitForm () {
  testo = "";
  if (document.all) {
    testo = riquadro.innerHTML;
  } else if (document.getElementById && document.createTextNode) {
    testo = document.createTextNode(riquadro.innerHTML);
  }
  document.forms['composeForm'].follia.value = testo;
}

E di conseguenza non aggiunge le stringhe nel database

14-05-2006, 13.30.55

Hem.. giusto.. non ho detto alla funzione che cos'era riquadro, quindi era ovvio che non funzionasse..

Cmq questa versione:

panel.js

Codice HTML:

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();
}

function submitForm () {
	iFrameDoc = eval(str_iFrameDoc);
	riquadro = iFrameDoc.body;	
	bHtmlMode = eval ((document.all)? "document.forms[\"composeForm\"].switchMode.checked\;": "document.getElementById(\"composeForm\").switchMode.checked\;");
	testo = '';
	
	if (document.all) {
		if (bHtmlMode) {
			testo = riquadro.innerText; 
		} else {
			testo = riquadro.innerHTML;
		}
	} 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();
		}	
	}
	document.forms['mainForm'].follia.value = testo;
	document.forms['mainForm'].submit ();
}

composition.php

Codice HTML:

<form action="#" method="POST" name="composeForm" id="composeForm">
<br><br>
<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>
					<option value="&lt;H1&gt;">Titolo 1 &lt;H1&gt;</option>
					<option value="&lt;H2&gt;">Titolo 2 &lt;H2&gt;</option>
					<option value="&lt;H3&gt;">Titolo 3 &lt;H3&gt;</option>

					<option value="&lt;H4&gt;">Titolo 4 &lt;H4&gt;</option>
					<option value="&lt;H5&gt;">Titolo 5 &lt;H5&gt;</option>
					<option value="&lt;H6&gt;">Titolo 6 &lt;H6&gt;</option>
					<option value="&lt;PRE&gt;">Formattato &lt;PRE&gt;</option>
				</select>

				<select id="FontName" onchange="formatC('fontname',this[this.selectedIndex].value);this.selectedIndex=0">
					<option class="heading" selected>Tipo Carattere</option>
					<option value="Arial">Arial</option>
					<option value="Arial Black">Arial Black</option>
					<option value="Arial Narrow">Arial Narrow</option>
					<option value="Comic Sans MS">Comic Sans MS</option>
					<option value="Courier New">Courier New</option>
					<option value="System">System</option>
					<option value="Times New Roman">Times New Roman</option>
					<option value="Verdana">Verdana</option>
					<option value="Wingdings">Wingdings</option>
				</select>
				<select id="FontSize" onchange="formatC('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
					<option class="heading" selected>Dimensione</option>
					<option value="1">1</option>
					<option value="2">2</option>
			    	<option value="3">3</option>
				    <option value="4">4</option>
				    <option value="5">5</option>
				    <option value="6">6</option>
				    <option value="7">7</option>
				</select>

		    	<select id="FontColor" onchange="formatC('forecolor',this[this.selectedIndex].value);this.selectedIndex=0">
			    	<option class="heading" selected>Colore Testo</option>
				    <option value="red">rosso</option>
				    <option value="blue">blu</option>
				    <option value="green">verde</option>
				    <option value="black">nero</option>
				</select>
			   	<select id="FontBackColor" onchange="formatC('backcolor',this[this.selectedIndex].value);this.selectedIndex=0">
			    	<option class="heading" selected>Colore Sfondo</option>
				    <option value="red">rosso</option>
				    <option value="blue">blu</option>
				    <option value="green">verde</option>
				    <option value="black">nero</option>
			    	<option value="yellow">giallo</option>
				    <option value="">BIANCO</option>
				</select>

				<hr>
				<div id="EditMode">
					<input type=checkbox name="switchMode" id="switchMode" onclick="setMode(switchMode.checked)">
					<font color="#000000"><b>Visualizza HTML</b> | </font>
					<a href="Javascript:formatC('removeFormat')"><b>Rimuovi Formattazione Carattere</b></a>
				</div>
				<hr>

			</div>

			<table>
				<tr>
					<td>
						<div title="Grassetto" onclick="formatC('bold');">
						    <img src="img/bold.gif">
						</div>
					</td>

					<td>
						<div title="Corsivo" onclick="formatC('italic')">
						    <img src="img/italic.gif">
						</div>
					</td>
				    <td>
						<div title="Sottolineato" onclick="formatC('underline')">
						    <img src="img/under.gif">
					    </div>

					</td>
					<td>
						<div title="Allinea a sinistra" onclick="formatC('justifyleft')">
						    <img src="img/aleft.gif">
					    </div>
					</td>
					<td>
						<div title="Centra" onclick="formatC('justifycenter')">
						    <img src="img/center.gif">

						</div>
					</td>
					<td>
						<div title="Allinea a destra" onclick="formatC('justifyright')">
						    <img src="img/aright.gif">
						</div>
					</td>
					<td>
						<div title="Elenco puntato" onclick="formatC('insertorderedlist')">

						    <img src="img/nlist.gif">
					    </div>
					</td>
					<td>
						<div title="Elenco numerato" onclick="formatC('insertunorderedlist')">
						    <img src="img/blist.gif">
					  	</div>
					</td>
					<td>

						<div title="Riduci rientro" onclick="formatC('outdent')">
						    <img  src="img/ileft.gif">
						</div>
					</td>
					<td>
						<div title="Aumenta rientro" onclick="formatC('indent')">
						    <img src="img/iright.gif" >
						</div>
					</td>

					<td>
						<div id="taglia" title="Taglia" onclick="formatC('cut')">
					    	<img src="img/cut.gif">
					 	</div>
					</td>
					<td>
						<div id="copia" title="Copia"  onclick="formatC('copy')">
						    <img src="img/copy.gif">
  						</div>

					</td>
				  	<td>
						<div id="incolla" title="Incolla" onclick="formatC('paste')">
						    <img src="img/paste.gif">
					    </div>
					</td>
			  	</tr>
			</table>

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

almeno con IE funziona, ma devi fare attenzione nella pagina principale di questo script: in compose.php è presente un form, e non è possibile inserire un form all'interno di un altro form, quindi ti consiglio una cosa di questo tipo:

pagina principale

Codice PHP:


<script type="text/javascript" language="JavaScript" src="panel.js"></script>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="mainForm">

<input type="hidden" name="follia" />

<table class="am" align="center" cellspacing="0" cellpadding="0">

[...]

</table>

</form>

<table class="am" align="center" cellspacing="0" cellpadding="0">

<tr><td>

<?php include "composition.php"?></td></tr>

<tr><td class="am_footer" colspan="2"><input type="button" name="submit" value="Aggiungi" class="submit" onClick="submitForm();"/></td></tr>

</table>

Ora cerco di capire perchè con il fido Firefox non funzia ^_^

14-05-2006, 14.27.52

Dimenticavo di dire che nel file composition.php non ho inserito un <form>, dal momento che era già presente nella pagina che lo richiamava

Ho cambiato il codice di panel.js con quello che mi hai fornito e modificato appositamente add.php.
Tuttavia continua a non funzionare né con IE né con Firefox :(
Per altro ho provato anche a usare il submit con type="button" e su FF non avvia il form...

14-05-2006, 14.34.27

Aaaaaaaaaaaaaaaaaann..
ma se usi lo stesso form cambia tutto, è una questione di id del form.. aspetta che do un'altra occhiata

EDIT: [perdonate l'UP, ma altrimenti non si vede il nuovo mex ^_^]

Ecco, ora finalmente funziona sia con IE che con FF:

modifica la funzione submitForm con questa:

Codice HTML:

function submitForm () {
	iFrameDoc = eval(str_iFrameDoc);
	riquadro = iFrameDoc.body;	
	bHtmlMode = eval ((document.all)? "document.forms(\"composeForm\").switchMode.checked\;": "document.getElementById(\"composeForm\").switchMode.checked\;");
	testo = '';
	testo = (riquadro.innerHTML != undefined) ? riquadro.innerHTML : riquadro.innerText;
	if (field = document.forms['composeForm'].follia) field.value = testo;
	else document.getElementById('follia').value = testo;
}

il composition.php prendi il mio e semplicemente toglici i tags del form, mentre per la pagina principale sostituisci il tag di apertura del form con questo:

Codice HTML:

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="composeForm" id="composeForm" onSubmit="submitForm();">

ed il codice del bottone con questo:

Codice HTML:

<input type="submit" name="submit" value="Aggiungi" class="submit"/>

A me così funziona sia con IE che con FF spero anche per te..

FunCool: Non fare UP, usa il tasto Edita.

14-05-2006, 15.52.09

document.getElementById("follia") has no properties... :(
Lo dà per questa riga:
else document.getElementById('follia').value = testo;

Per quanto riguarda composition.php, ci sono differenze sostanziali tra il pannello creato da HTML.it e quello modificato da te? Chiedo questo perché ho dato una piccola modifica per non appesantire il CSS: lì dove ci sono i vari pulsanti per la modifica dello stile del testo (Grassetto, Corsivo, eccetera) ho tolto i layers e ho impostato la loro proprietà sull'immagine.

Codice:

<div title="Grassetto" onclick="formatC('bold');"><img src="img/bold.gif"></div>

diventa

<img src="img/bold.gif" class="buttons" alt="B" title="Grassetto" onclick="formatC('bold')" />&nbsp;

Spero non fosse importante

14-05-2006, 16.01.50

scusami, avevo dimenticato un'altra modifica che avevo fatto: il campo nascosto follia diventa

Codice HTML:

<input id="follia" type="hidden" name="follia" />

Cmq le tue modifiche sono a posto

14-05-2006, 17.01.21

Funziona perfettamente

Grazie, sei stato gentilissimo :D:D:D
Ciao!

**funcool** · 14-05-2006, 17.02.38

Visto che risolto, chiudo.

Discussione: [JS] Editor di testi web

LinkBack

Strumenti discussione

Display

[risolto][JS] Editor di testi web

Regole di scrittura