Newsgroup: it.comp.lang.javascript
Titolo: Rilevare Selezioni e cancellazioni pericolose...

Salve a tutti.
Mi rivolgo nuovamente a voi perché inizio veramente ad andare di matto
con comportamenti altalenanti degli script.
Il problema è questo. Sto facendo delle estensioni per un editor
wisywig (
http://www.kevinroth.com/rte/demo.htm
)
però mi trovo come al solito problemi con Internet Explorer.
Senza dilungarmi troppo, le mie estensioni permettono di inserire nella
finestra di editor, dei contenuti preformattati in base ad una maschera
(come se inserissi una tabella).
Lo script di cui mi sto occupando ora prevede il controllo sulla
cancellazione di una selezione. In pratica devo controllare se, alla
pressione di CANC o BACKCANC (keycode 8 e 46), il contenuto HTML della
selezione corrente contiene dei tag che indicano che la cancellazione
non può avvenire.
Per introdurvi brevemente l'editor, una volta inizializzato, il
programma crea dei listener di eventi.
Es.
IE: frames[rte].document.attachEvent("onkeyup", function exegui () {
doEverythings(itemSessionType,rte);});
Gecko:
document.getElementById(rte).contentWindow.document.addEventListener("keyup",
function exegui () { doEverythings(itemSessionType,rte);}, true);
Nella funzione doEverythings, viene controllato se il keycode premuto
(catturato precedentemente) ricade nel CANC o BACKCANC citato prima.
La funzione per recuperare il keycode è estremamente semplice:
function displayKey(e) {
    if (e.keyCode) //Gecko
       keyMio=e.keyCode;
    else //Explorer
       keyMio=e.which;
}
dove keyMio è una variabile globale.
Se keyMio equivale a 8 o a 46, allora lancio una funzione di controllo:
function checkForDanger (rte) {
   var html = getSelectedHTML (rte);
   var oldInner =
document.getElementById(rte).contentWindow.document.getElementById
('body').innerHTML;
          if ( (html.indexOf ('DIV') >= 0) || (html.indexOf ('SPAN') >=
0) ) {
            alert ('Cancellazione non consentita');
            return (oldInner);
          }
          return (-1);
       }
Che controlla se il source della selezione corrente, contiene un tag
DIV ed uno SPAN. Il controllo è molto rozzo ma mi serve per adesso per
avere un punto di partenza.
La funzione getSelectedHTML era stata postata precedentemente da Zer0
su un mio precedente topic. La riporto qui per farvi vedere
l'adattamento all'editor:
function getSelectedHTML(rte){
  var rng=null, html="";
  if (isMSIE) {
rng=document.getElementById(rte).contentWindow.document.selection.createRange();
                html=rng.htmlText||"";
        }
        if (isGecko){
                rng =
document.getElementById(rte).contentWindow.getSelection();
                if (rng.rangeCount > 0 &&
document.getElementById(rte).contentWindow.XMLSerializer){
                        rng=rng.getRangeAt(0);
                        html=new
XMLSerializer().serializeToString(rng.cloneContents());
                }
        }
        return html;
}
La variabile rte, continuamente passata alle funzioni, rappresenta il
nome che viene dato alla finestra di editing in fase di
inizializzazione e che devo usare per farvi riferimento. Essendo un
IFRAME, devo prima "recarmici" per poi utilizzare i classici metodi.
Allora. Dopo tutta questa pappardella, concludo con il corretto
funzionamento in Firefox ed il non funzionamento in Explorer che sembra
morire sulla getSelectedHTML.
Pensando fosse un problema della funzione nella sua parte IE, ho
provato a farla richiare da uno dei tasti dell'editor (per esempio il
BOLD) sostituendola al normale comando per applicare il grassetto.
La funzione ritorna correttamente il codice HTML sinonimo, quindi, che
la funzione funziona correttamente.
Mi chiedo quindi come mai non vada nel caso sopra.
Pensando che fosse a causa del fatto che la funzione è richiamata
dentro ad un'altra, ho fatto un'ulteriore prova.
Al posto del solito BOLD, ho richiamato una funzione che richiamava a
sua volta la getSelectedHTML ed anche in questo ha dato esito positivo.
Ho provato anche a posizionare il focus sulla finestra credendo fosse
un problema di "mancato aggancio" della finestra, ma niente.
Voi avete idee? Vi è mai capitato con altri editor?
Grazie e alla prossima...

 morire sulla getSelectedHTML.
L'errore esattamente qual'è? Non viene recuperato correttamente il
codice HTML del range o che altro?
Gaetano

Infatti. Internet Explorer non ritorna nulla al richiamo della
getSelectedHTML nel caso citato. Firefox invece ritorna correttamente
il codice sorgente che sta alla base della selezione.
Grazie e alla prossima...

Ho fatto un test con IE 6 e a me funziona perfettamente. Ecco il
markup di prova:
File "Outer.html"
<html>
<head>
<script type="text/javascript">
function getSelectedHTML(rte)
{
	var isMSIE = true;
	var rng = null, html = "";
	rng =
document.getElementById(rte).contentWindow.document.selection.createRange();
	html = rng.htmlText || "";
	return html;
}
function clicked()
{
	alert(getSelectedHTML("x"));
}
</script>
</head>
<body style="background-color: #FDFDF0;">
	<h1>Outer document</h1>
	<iframe id="x" src="Inner.html" style="border: solid 2px magenta;
width: 450px; height: 450px;">
	</iframe>
	<input type="button" value="click" onclick="clicked();">
</body>
</html>
File "Inner.html"
<html>
<head>
</head>
<body style="background-color: lightgrey;">
	<h1>Inner document</h1>
	<p>
		Test
	</p>
</body>
</html>
Gaetano