Verschillen in ENTER op FireFox (<br /> / IE (<p>) in Iframe

[The.Terminator]

Heb het volgende probleem.

Ik zet een iframe in designmode en dit werkt, kan in IE en in FF tekst typen.
Alleen bij een ENTER geeft FF een <br /> en IE een <p></p> tag.

Ik wil dit graag voor beide browser gelijk hebben.
Na veel te gelezen hebben kom ik alleen op oplossing die van IE's <p> tag een <br /> tag maakt
Alleen ik wil het andersom

Dus dat FF's <br /> tag een <p></p> word en dit blijkt nogal lastig te zijn.
Ik kwam op de Mozilla Dev site op het commando "execCommand('insertbronreturn', false, true);"

Alleen krijg ik dit niet werkend in FF

[Roytoch]

In ie krijg je met shift-enter toch ook een br? En je zou in theorie in de code de boel kunnen veranderen? Ik denk ook dat dit topic snel naar web gaat trouwens, maar 'designmode' > welk programma? Frontpage ofzo?

[The.Terminator]

Volgens mij is het toch echt Javascript > dus programmeren (en geen Frontpage), maar dat kan ik fout hebben
Voor de duidelijkheid, het is voor een WYSIWYG editor.

Idd, met Shift + Enter krijg je een <br /> in het Iframe, alleen wil ik het IE (en ook Office 2007) gedrag naar FF hebben en dat lukt niet.

[BtM909]

Waar hoort mijn topic?

[The.Terminator]

Oeps, excuses roy.ahuis
Je hebt gelijk, 1 van de crewleden even een move doen ?

[RobIII]

*Schopt* >> WEB

The.Terminator schreef op dinsdag 10 juni 2008 @ 11:11:
en dat lukt niet.

...want Wat heb je al geprobeerd? Heb je iets tastbaars dat we kunnen zien?

[ Voor 87% gewijzigd door RobIII op 10-06-2008 11:28 ]

[The.Terminator]

JavaScript:

var editor;
var editorframe;
var browser;

function enableEditor() {
    if(window.navigator.appName == "Microsoft Internet Explorer") { 
        browser = "IE";
    }
    if(window.navigator.appName == "Netscape") {    
        browser = "FF";
    }
    else {
        browser = "Unbekannt";
    }

    if (browser==="IE") {
        editorframe = document.frames["editor"];
        editor = editorframe.document;
        editor.designMode = "On";
    }  
    else {
        editorframe = document.getElementById("editor");
        editor = editorframe.contentWindow.document;
        editor.designMode = "On";
        editor.document.execCommand('insertbronreturn', false, true);   
    }
    
}

function CopyEditor() { 
    document.getElementById('fld_description').value = editorframe.contentWindow.document.body.innerHTML;
}

Heb ook al geprobeerd

> editor.execCommand('insertbronreturn', false, true);
> document.getElementById("editor").execCommand('insertbronreturn', false, true);

[ Voor 7% gewijzigd door The.Terminator op 10-06-2008 11:34 ]

[RobIII]

Waarom die ranzige browserdetectie? En "insertbronreturn" is bij mijn weten geen geldig command? is dat niet iets FCKEditor-specifieks?

[ Voor 11% gewijzigd door RobIII op 10-06-2008 11:39 ]

[Bozozo]

Ik heb hier ook een hele tijd mee geworsteld. Het is een van de meest vervelende problemen bij het maken van een WYSISWG editor.

Ik heb het uiteindelijk opgegeven (project is doodgebloed) maar hier staat nog mijn laatste versie. Daarin is het gedrag van Firefox en Safari gecorrigeerd (Opera is helemaal een ramp).

De functie die doet wat jij wil:

JavaScript:

      //prevent regular <br> insertion
      if (browser!="IE") {
        addEvent(editor,"keydown",handleEnter); //addEvent is een veelgebruikte crossbrowser functie (google)
      }

    //prevent regular <br> insertion in firefox and safari (event listener only added for those browsers in initEditor)
    function handleEnter(e) {
      e = e || document.frames["editorframe"].event;
      if (e.keyCode==13 && !e.shiftKey) {
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        //split current block upon hard enter        
        performEnter();
      }
      if (e.keyCode==13 && e.shiftKey) {
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        //insert a break upon soft enter
        var br = editor.createElement('br');
        var range = document.getElementById('editorframe').contentWindow.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(br);
            range.collapse(false);
        placeCaretInNode(br.parentNode,true);
      } 
    }

    //make W3C browsers behave like IE (i.e. force paragraphs)
    function performEnter() {
        
      //manage selection
      var cph = editor.createElement('div');
      var sel = document.getElementById("editorframe").contentWindow.getSelection();
      var range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(cph);
      range.collapse(false);
      
      //find containing node (e.g. P or H1)
      var topNode = getTopContainerOf(cph);
      
      var secondHalfNode;
      var firstHalfNode;
      var cEl = cph;
      while (cEl.parentNode!=editor.body) {
        
        //place tags around fragments
        var firstClone = cEl.parentNode.cloneNode(false);
        var secondClone = cEl.parentNode.cloneNode(false);
        if (cEl.parentNode.parentNode==editor.body && secondClone.nodeName!="P") {
            secondClone = editor.createElement('p');
        } 
        if (cEl!=cph) firstClone.appendChild(firstHalfNode);
        firstHalfNode = firstClone;
        if (cEl!=cph) secondClone.appendChild(secondHalfNode);
        secondHalfNode = secondClone;
        
        //add siblings to proper fragments
        while (cEl.previousSibling!=undefined) {
            firstHalfNode.insertBefore(cEl.parentNode.removeChild(cEl.previousSibling),firstHalfNode.firstChild);
        }
        while (cEl.nextSibling!=undefined) {
            secondHalfNode.appendChild(cEl.parentNode.removeChild(cEl.nextSibling));
        }    
        cEl = cEl.parentNode;
      }
      
      //replace node by two fragments
      cph.parentNode.removeChild(cph);
      firstHalfNode = fixEmpty(firstHalfNode);
      secondHalfNode = fixEmpty(secondHalfNode);
      editor.body.replaceChild(secondHalfNode,topNode);
      editor.body.insertBefore(firstHalfNode,secondHalfNode);
      placeCaretInNode(secondHalfNode,true);
    }    

    function getTopContainerOf(node) {
      while (node.parentNode.tagName!="BODY") {
        node = node.parentNode;
            }
      return node;
    }

    function fixEmpty(node) {
      if (node.innerHTML.length==0) {
        node.innerHTML = "&nbsp;";
            }
      return node;
    } 

Zoals je ziet moet je bij lege paragrafen weer een nbsp invoegen, anders gebeuren er rare dingen. Die nbsp moet je weer weghalen zodra de gebruiker text gaat typen in de P. Dat is weer niet zo eenvoudig als het klinkt (voor ivm uitzonderingsgevallen).

Geloof me, dit is echt een lastig probleem

[The.Terminator]

@RobIII

Ik kijk hier op

http://developer.mozilla.org/en/docs/Midas

PS : finetuning / verwijderen ranzige code komt later

@Bozozo

Mhhhh, idd nu ik je code zie brrrrr

[Roytoch]

Misschien een stomme vraag (ik kan lastig écht inhoudelijk reageren omdat js echt buiten mijn domein ligt) maar wat biedt jouw editor voor voordelen boven fck of tinyfck? Of zitten daar dezelfde problemen in...

[H004]

Waarschijnlijk maakt TS de editor zelf, omdat de editors die jij noemt vrij zwaar en groot (bloated) zijn. Zelf programmeren levert een stuk lichtere editor op die (hopelijk, maar blijkbaar dus nog niet ) precies doet wat jij wil.

(En daarnaast leer je er ook nog wat van, ook)

[Bozozo]

Ik vond het een van de meest leerzame projecten. Je leert veel over het DOM en over het manipuleren van de selectie.

Toch denk ik dat je beter TinyMCE kunt verbouwen naar je eigen wensen (desnoods in de code gaan snoeien) dan zelf een complete (goede) WYSIWYG editor proberen te bouwen.

[The.Terminator]

roy.ahuis schreef op dinsdag 10 juni 2008 @ 16:02:
Misschien een stomme vraag (ik kan lastig écht inhoudelijk reageren omdat js echt buiten mijn domein ligt) maar wat biedt jouw editor voor voordelen boven fck of tinyfck? Of zitten daar dezelfde problemen in...

Omdat zoals al is aangegeven het lichter is (ben alleen de echte standaard opmaak opties nodig) en het feit om de content ook nog eens te controleren op bepaalde voorwaarden (is leeg etc).

Moet toegeven, TinyMCE is zeker een goed alternatief

@Bozozo : Ik ben nu ook bezig om TinyMCE een flinke klusbeurt te geven

[ Voor 6% gewijzigd door The.Terminator op 11-06-2008 11:49 ]