[WYSIWYG] HTML invoegen in IE / designmode linebreaks *

[Bozozo]

Ik ben begonnen met het maken van mijn eigen mini-wysiwyg editor in javascript. Ik maak gebruik van een iFrame in designMode.

Nou wil ik mijn eigen HTML kunnen invoegen. Als voorbeeldje (toevallig het eerste waar ik tegenaanliep) vang ik drukken op de Enter toets af, en voeg ik dan op de cursor een line break in. Dit omdat IE anders een nieuwe paragraaf begint, en dat wil ik niet. Het relevante stukje code:

JavaScript:

    function handlekeysIE() {
      var e = document.frames["editorframe"].event;
      if (e.keyCode == 13) {
        var selRange = editor.selection.createRange();
        selRange.pasteHTML("<br>");
        return false;
      }
    }
    
    function handlekeysFF(e) {
      if (e.keyCode == 13) {
        var selRange = document.getElementById("editorframe").contentWindow.getSelection().getRangeAt(0);
        var newnode = document.createElement('br');
        selRange.insertNode(newnode);
        e.preventDefault();
      }
    }

IE en FF hebben zoals je ziet ieder hun eigen functie.

Beide functies werken tot op zekere hoogte. De cursor komt nog niet op de goede plaats terecht, maar dat fix ik nog wel. Update: dit lukt me ook niet.

Ik zou graag voor beide browsers gewoon dezelfde oplossing gebruiken (html tekst plakken óf nodes maken), maar ik kom er niet uit. De enige workaround die ik heb gevonden is heel lelijk (komt neer op een random string inserten met execCommand en die dan vervangen).
edit: inmiddels hier:Verwijderd in "[JS - HTML] WYSIWYG - editor" een mooie functie gevonden.

[ Voor 54% gewijzigd door Bozozo op 12-01-2008 18:15 ]

[Bozozo]

Nog even het cursor (eigenlijk 'caret') probleem in een notendop:

JavaScript:

        var selRange = document.getElementById("editorframe").contentWindow.getSelection().getRangeAt(0);
        var newnode = document.createElement('a');
        newnode.setAttribute("href","#");
        newnode.innerHTML = "link";
        selRange.insertNode(newnode);

Als ik dit uitvoer komt de link netjes in de editor, maar daarna moet ik de cursor achter de link zien te krijgen.

edit: Dit werkt in IE:

JavaScript:

        var selRange = editor.selection.createRange();
        selRange.pasteHTML('<a href="#">link</a>');
        selRange.select();

Helaas werkt select() in dit geval niet in FF (althans niet op de 427 objecten die ik geprobeerd heb).

Help!

[ Voor 22% gewijzigd door Bozozo op 12-01-2008 17:48 ]

[Bozozo]

Dit topic is gemerged

Ik ben bezig aan een WYSIWYG editor, gebruikmakend van designMode.

Werkend voorbeeld op deze testpagina

Firefox doet hele vreemde dingen met enters. Door op het Graphic / Code knopje te gebruiken kun je zien wat er gebeurt.

In IE krijg je nette code, maar in FF staat altijd een enter te veel aan het einde. Met de pijltjestoetsen kun je deze enter soms ook 'vinden', maar met de muis niet. Normaal gesproken heb je daar geen last van, maar mijn insertHTML functie doet het niet goed als je cursor toevallig net op deze "hidden enter" staat (doe maar eens een harde enter, druk op test, en typ verder).

Voordat ik verderga met debuggen wil ik graag weten waar deze enter vandaag komt. Hij wordt zelfs al gemaakt op het moment dat DesignMode wordt ingeschakeld (toggle maar eens naar code voor je iets begint te typen). Deze enter kan ik wel weghalen, maar bij elke harde enter komt er een nieuwe (áchter de enter die je wilde plaatsen met de harde enter!)

Wat is hier aan de hand?

PS: Mijn vorige topic(titel) dekte de lading niet meer, vandaar dit nieuwe topic. En toch een merge. Met een TR kun je prima een topictitle-change aanvragen en dit topic gaat (sorta) over hetzelfde; een nieuw topic lijkt me dan ook niet echt nodig.

[ Voor 10% gewijzigd door RobIII op 13-01-2008 23:54 ]

[SchizoDuckie]

HTML:

<p></p>

Heb je al eens gezocht ?

[Bozozo]

Wat bedoel je precies?

[Bosmonster]

Ook de nieuwe Word 2007 voegt op [enter] een paragraaf in. Ik zou aan dit gedrag dus eerlijk gezegd niet zoveel veranderen. Met shift-[enter] kun je een soft-break toevoegen.

Wat je eventueel wel eenvoudig kunt doen, al is het een beetje valsspelen natuurlijk, is gewoon de marge van de p-tag aanpassen in het stuk waar je de editor-generated code gebruikt. Dan ziet het eruit als een soft-break.

[Bozozo]

Dat is het probleem niet. Die <p> tags wil ik gewoon niet. Het afvangen van de enters in IE en het invoegen van <br> tags met pasteHTML gaat prima. (Ik wil gewoon zoveel mogelijk dezelfde output van IE en FF, en dan daarna alles opruimen.)

Tijdens het invoegen van die <br> tags begon ik mijn eigen pasteHTML voor firefox te schrijven, maar die gaf problemen met de cursor vanwege (naar ik vermoed) een vieze workaround in firefox die een break plaatst achter de cursor positie na het doen van een harde enter.

Inmiddels heb ik een workaround bedacht die het probleem oplost. Ik maak een dummy textnode die ik in de selectie opneem. Dan voeg ik de html in, waarna ik de selectie collapse tot achter deze dummy. Werkt perfect

De firefox-pasteHTML-en-corrigeer-cursor functie:

JavaScript:

    function insertHTML() {
      var html = 'Testing a <a href="#">Link</a> <i>and some italics</i>';
      html += ' ';
      document.getElementById('editorframe').contentWindow.focus();
      
      if (window.getSelection) { //Gecko
        var sel = document.getElementById("editorframe").contentWindow.getSelection();
        if (sel.getRangeAt) var selRange = sel.getRangeAt(0);
        else { // Safari doesn't support getRangeAt
            var selRange = document.createRange();
            selRange.setStart(sel.anchorNode,sel.anchorOffset);
            selRange.setEnd(sel.focusNode,sel.focusOffset);
        }
        selRange.deleteContents();
        
        var selecthelper = editor.createTextNode('');
        selRange.insertNode(selecthelper);
        
        var div = editor.createElement('div');
        div.innerHTML = html;
        for (var count = div.childNodes.length-1;count>=0;count--) {
                    selRange.insertNode(div.childNodes[count]);
        }
        
        selRange.setEndAfter(selecthelper);
        selRange.collapse(false);
      }
      else if (document.selection) {
        var selRange = editor.selection.createRange();
        selRange.pasteHTML(html);
      }
    }

De source van de testpagina is inmiddels ook aangepast.

[Bozozo]

Mijn laatste post in dit topic, om mensen die hier ooit verzeild raken een hoop hoofdpijn te besparen:

JavaScript:

    //in je onload functie
    var editor = document.getElementById("editorframe").contentWindow.document;
    //einde onload functie

    //in een functie die html wil plakken
    var html = 'Testing a <a href="#">Link</a> <i>and some italics</i>';
    insertHTML(html);
    //einde functie

    function insertHTML(html) {
      html += ' ';
      document.getElementById('editorframe').contentWindow.focus();
      
      if (window.getSelection) { //Gecko
        editor.execCommand('insertHTML',false,html);
      }
      else if (document.selection) { //IE
        var selRange = editor.selection.createRange();
        selRange.pasteHTML(html);
      }
    }

Ofwel... er bestaat in Firefox een ingebouwd execCommand dat pasteHTML doet op de selectie. Doh!
Moraal van het verhaal: lees relevante stukken op developer.mozilla.org voor je als een kip zonder kop begint te scripten

[ Voor 5% gewijzigd door Bozozo op 15-01-2008 12:40 ]

[imp4ct]

Goeie raad...
'k Ben ook eens aan een eigen WYSIWYG editor begonnen.. 't is echt ENORM veel werk. Daarom ben ik toch maar naar eentje gaan zoeken en na lang zoeken ben ik deze editor tegen gekomen, Innovastudio WYSIWYG editor. Je moet er misschien voor betalen, maar t'is echt een ZALIGE editor : http://www.innovastudio.com/ misschien goeie tip dus.

[ Voor 7% gewijzigd door imp4ct op 15-01-2008 17:28 ]

[7.01D]

Ook aardig: WYMeditor, een WYSIWYM (What You See Is What You Mean) editor.

[Bozozo]

Tja ik vind het leuk om zelf aan te prutsen. Afgezien van de ergerlijke verschillen tussen browsers is het leuk werk hoor

[f.v.b]

Ik heb sinds 2002 ook mijn eerste WYSIWYG editor geschreven. Toen was het nog IE only, ondertussen wordt ook Firefox ondersteunt.

Maar ik ben ondertussen van mening dat het meeliften op een TinyMCE, Xinha of FCKeditor veel voordeliger is. De functionaliteit in die editors (spellingschecker, context gevoelige rechtermuistoetsmenus (Is dat een woord? ), Microsoft Word html cleanup, etc.) gaat zoveel verder dan ik zelf kan/wil coderen. Ik steek mijn energie dan liever in het verbeteren van een van die bestaande editors.

Zelf heb ik gekozen voor TinyMCE. De meer dan 7500 regels code zijn voor mij heel goed leesbaar. De volgende versie, een complete rewrite, belooft weer veel verbeteringen.

Ook het probleem van de <p> of <br> tags is door TinyMCE al opgelost. Het is daar een configuratie optie: http://wiki.moxiecode.com...uration/force_br_newlines

Het advies daar, en ik sluit me er bij aan: Gebruik vooral *wel* <p>-tags. Meerdere regels tekst vormen namelijk een paragraaf. Net zoals meerdere woorden een zin vormen. Geen paragrafen willen is zoiets als geen tekst willen.

Mocht je toch je eigen WYSIWYG editor willen schrijven, lees dan ook eens de code van een aantal bestaande editors door. Veel van je problemen zijn natuurlijk al een keer opgelost, en sommige van de oplossingen zijn verbazend simpel / krachtig.

[Bozozo]

In principe moet de editor alleen bedoeld zijn voor onwetende site-eigenaren die even snel zelf iets willen toevoegen; denk aan nieuwsberichtjes of gewoon een pagina aanpassen. Dan heb je in principe genoeg aan headers, plaatjes, en links. Een spellingchecker oid zitten klanten m.i. helemaal niet op te wachten.

Zo'n simpele editor is goed te maken (het gaat nu iig prima) en ik denk dat ik wel klaar ben met enkele honderden regels code.

Over die p tags geef ik je gelijk, ik had er zelf ook al aan zitten denken. Gelukkig kan ik mijn code in een handomdraai veranderen zodat firefox zijn gedrag aanpast

Context-gevoelige menu's lijken me trouwens niet zo heel moeilijk. Het is me al gelukt om vast te stellen in wat voor element de cursor zich bevindt, en welke tags erop van toepassing zijn. Voor de liefhebber:

JavaScript:

    function getCurrentNode() {
        var cNode;
      if (document.getSelection) {
        var sel = document.getElementById("editorframe").contentWindow.getSelection();
        cNode = sel.anchorNode.parentNode;
      }
      else if (document.selection) {
        var range = document.selection.createRange();
        cNode = range.parentElement();
      }
      return cNode;
    }
    
    function getTags(obj) {
        var tags = new Array();
      while (obj.tagName!="BODY") {
        tags[tags.length] = obj.tagName;
        obj = obj.parentNode;
      }
      return tags;
    }

[Bosmonster]

f.v.b schreef op woensdag 16 januari 2008 @ 02:34:
Ik heb sinds 2002 ook mijn eerste WYSIWYG editor geschreven. Toen was het nog IE only, ondertussen wordt ook Firefox ondersteunt.

Maar ik ben ondertussen van mening dat het meeliften op een TinyMCE, Xinha of FCKeditor veel voordeliger is. De functionaliteit in die editors (spellingschecker, context gevoelige rechtermuistoetsmenus (Is dat een woord? ), Microsoft Word html cleanup, etc.) gaat zoveel verder dan ik zelf kan/wil coderen. Ik steek mijn energie dan liever in het verbeteren van een van die bestaande editors.

Zelf heb ik gekozen voor TinyMCE. De meer dan 7500 regels code zijn voor mij heel goed leesbaar. De volgende versie, een complete rewrite, belooft weer veel verbeteringen.

Ook het probleem van de <p> of <br> tags is door TinyMCE al opgelost. Het is daar een configuratie optie: http://wiki.moxiecode.com...uration/force_br_newlines

Het advies daar, en ik sluit me er bij aan: Gebruik vooral *wel* <p>-tags. Meerdere regels tekst vormen namelijk een paragraaf. Net zoals meerdere woorden een zin vormen. Geen paragrafen willen is zoiets als geen tekst willen.

Mocht je toch je eigen WYSIWYG editor willen schrijven, lees dan ook eens de code van een aantal bestaande editors door. Veel van je problemen zijn natuurlijk al een keer opgelost, en sommige van de oplossingen zijn verbazend simpel / krachtig.

Hehe ja, ik ken het ook. Vele jaren geleden (toen was er ook nog geen fatsoenlijke editor te vinden, dat speelde wel mee) ook zelf mn eigen editor geschreven. Firefox bestond toen nog niet eens, dus was IE-only. Hij wordt nog steeds veel gebruikt in CMS'en die sinds die tijd zijn geimplementeerd en is best uitgebreid.

Als ik nu moest kiezen zou ik ook TinyMCE of FCK of wat dan ook pakken, maar ik heb er geen spijt van ooit de ervaring opgedaan te hebben hoe zelf een dergelijke editor te bouwen.

@Bozozo: Ik snap niet zo goed waarom je geen p-tags in je code wilt hebben, die zijn juist bedoeld voor paragraphs. Br's zijn daar niet voor bedoeld. Semantisch gezien is het dus niet handig p-tags eruit te strippen. Maar goed, dat is verder je eigen keuze natuurlijk

[ Voor 6% gewijzigd door Bosmonster op 16-01-2008 10:44 ]

[f.v.b]

Bozozo schreef op woensdag 16 januari 2008 @ 10:37:
Zo'n simpele editor is goed te maken (het gaat nu iig prima) en ik denk dat ik wel klaar ben met enkele honderden regels code.

Het schrijven van een WYSIWYG editor vind ik zelf een van de leukste projecten om aan te werken. De core javascript file die ik nu gebruik, telt zo'n 800 regels code. Daarbij komen dan nog de popups bij voor het toevoegen van afbeeldingen, links, bestanden en tabellen.

Het is dus zeker goed te doen, en volgens mij ga je met jouw editor als een speer. Maar je gaat nog wel een aantal problemen tegenkomen die je nu vast nog niet verwacht...

[Verwijderd]

voor IE, moet je het volgende gebruiken

function properIEgbEnter(editor,event)
{
event.returnValue = false;
var selectie= editor.selection.createRange();
selectie.pasteHTML("<br/>");
selectie.moveStart("character", 0);
selectie.moveEnd("character", 0);
selectie.collapse();
selectie.select();
}

op deze manier kun je een regel direct eronder plaatsen

[drm]

^^^ hear hear, de ervaren mannen * spreken.

Ga dit niet meer zelf doen voor systemen die in productie moeten gaan draaien. Je verkijkt je er per definitie (!) op en een TinyMCE of FCK is echt in een halfuurtje geïmplementeerd en nog een halfuurtje geconfigureerd. Er is aan TinyMCE (ben ik nogal voorstander van) vrijwel niets wat je niet kunt configureren.

Er zijn, behalve het "gewoon leuk" cq. "leerzaam" vinden, imo echt geen goeie argumenten meer om het nog zelf te schrijven.

edit:
* f.v.b. / Bosmonster

[ Voor 3% gewijzigd door drm op 23-01-2009 15:58 ]