Editor di testo, passagio a codice HTML: div invece di br

[Alessio Puppi]

In un piccolo editor di testo tramte un tasto si passa dalla modalita testo alla modalita HTML, il problema e' che non gestisce correttamente "a capo". Il codice e' aprossimativamente questo:

<iframe id="editArea" name="editArea" src="about:blank"></iframe>

...
if =(document.getElementById(preview').value=="HTML")
{
var contenuto=AttivaFrame("editArea").body.innerHTML;
contenuto=contenuto.replace(/\n/g,"<br\/\>")
alert(contenuto);
....
}

Dunque invece di visualizzare il messaggio con i <br/> mi inserisce i <div>
Come posso fare? Grazie

[SimoX90]

Posta un esempio di ciò che ti stampa

[Alessio Puppi]

Ho risolto in parte il problema

Posta un esempio di ciò che ti stampa

Se scrivo:

uno
due
tre

mi risulta

uno
<div>due</div>
<div>tre</div>

Dunque ho cambiato IFRAME con il DIV

<div contenteditable="True" id="editArea" name="editArea" style="width:100%;height:100%;background:#FFFFFF" src="about:blank" >Inserire in testo</div>

E nel codice ho intercettato il tasto a capo

document.getElementById('editArea').onkeyup=doStuff;

function doStuff(e)
{
if(e.keyCode == 13) {
  var s=document.getElementById("editArea").innerHTML;
  s=s.replace("<div>","<br/>").replace("</div>","\n");
  document.getElementById("editArea").innerHTML=s;
  }
}

Se digito

uno <invio>

unodue

Il cursore torna ad affiancare il testo "uno" nonostante sono andato a capo ma comunque funziona!

unodue<br/><br/>

Però c'è un secondo problema:

uno

due
tre

In questo caso dopo aver allineato "due" in modo centrato, nel tentativo di andare a capo mi crea un'ulteriore div annidato, cioè

 
 uno <br/>
<div style="text-align: center;"><span style="font-size: 0.75em; line-height: 1.41em;">due</span>
<div style="text-align: center;"><span style="font-size: 0.75em; line-height: 1.41em;">tre</span></div></div>

Non voglio usare editor già esistenti, preferisco trovare la soluzione.

Grazie

[Alessio Puppi]

Ho trovato il modo , cercando nella rete ho trovato il codice che mi serviva. Spiegherò come ho fatto.

[Alessio Puppi]

Il codice Javascript per prevenire i tag div per andare a capo è il seguente

var edit = AttivaFrame("editArea"); // editArea, ovvero il div dell'editor


// aggiunge l'evento doStuff all'editor quando viene premuto un tasto
if (typeof edit.addEventListener != "undefined") 
{
  edit.addEventListener("keypress", doStuff, false);
} else if (typeof edit.attachEvent != "undefined") 
{
  edit.attachEvent("onkeypress", doStuff);
}


//funzione che intercetta gli eventi
function doStuff(e)
{


var sel, range, br, addedBr = false;
e = e || window.event;
var charCode = e.which || e.keyCode;


// se il tasto premuto è invio
if(charCode == 13) 
  {
  if (typeof window.getSelection != "undefined") // con il metodo window
    {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) 
      {
        range = sel.getRangeAt(0);
        range.deleteContents();


        br = document.createElement("br");
        range.insertNode(br);
        range.setEndAfter(br);
        range.setStartAfter(br);


        br = document.createElement("br"); // aggiunto in quanto non va capo automaticamente
        range.insertNode(br);
        range.setEndAfter(br);
        range.setStartAfter(br);


        sel.removeAllRanges();
        sel.addRange(range);
        addedBr = true;
      }
    } 
    else if (typeof document.selection != "undefined") // con il metodo document
    {
      sel = document.selection;
      if (sel.createRange) 
      {
                range = sel.createRange();
                range.pasteHTML("<br/>");
                range.pasteHTML("<br/>"); // aggiunto, da testare su altri browser
                range.select();
                addedBr = true;      
      }
    }
    // se il metodo ha successo evita la manipolazione predefinita del browser alla pressione del tasto
    if (addedBr) 
      {
      if (typeof e.preventDefault != "undefined") 
        {
        e.preventDefault();
        }
      else 
        {
        e.returnValue = false;
        }
      }
  }


}

[Alessio Puppi]

<div contenteditable="True" id="editArea" name="editArea"  src="about:blank" >Inserire il testo</div>