[WYSIWYG Editor] - Selectie na vervangen van image

[gvanh]

Na ettelijke uren zoeken en klieren heb ik nog steeds niet voor elkaar wat zo makkelijk zou moeten zijn.

Zoals uit de titel van dit Topic al blijkt gaat het om handelingen in mijn WYSIWYG editor, namelijk:

1. Gebruiker selecteert een afbeelding
2. Gebruiker verwijdert middels editor de afbeelding
3. De selectie omvat nog steeds de afmetingen van de oude afbeelding (met 8 van die vierkantjes voor het vergroten/verkleinen van de afbeelding), alhoewel de afbeelding zelf is verdwenen.

Het gaat nu overigens even om Mozilla-based browsers ... van IE weet ik nog niet hoe die hierop reageert.

De functie die de afbeelding weghaalt doet ongeveer dit:

JavaScript:

sel = framedoc.getSelection();
range = framdoc.createRange();
range.deleteContents();
sel.removeAllRanges();
range.collapse(true);

Dit alles lijkt echter helemaal niets uit te halen ... nog steeds blijft de selectie van de niet bestaande afbeelding bestaan ... iemand een idee wat ik fout doe?

[Michali]

Denk dat hier weinig aan te doen is. Misschien een bug submitten en dan hopen dat het de volgende versie wel goed zit. Ik had zelf al vernomen dat, als je een class aan een image toevoegt die hem bijvoorbeeld rechts laat floaten, hij wel naar de rechter kant van de editor verspringt, maar dat deze controls nog aan de linkerkant blijven staan. Hier valt ook weinig aan te doen. Het is iets dat in de browser zelf gefixed moet worden, verwacht ik.

[gvanh]

Ja ... ik vermoed het ook ... *helaas*. Ik ben sinds m'n post non-stop bezig geweest met Googelen en goochelen ... ik heb alle mogelijke manieren geprobeerd waarop je een selectie kunt vervangen en verwijderen ... to no avail.

Ik dacht in eerste instantie dat ik de oplossing moest zoeken in het maken van een nieuwe selectie, zodat de oude "selectie" zou worden vervangen door een nieuwe selectie. Naar nu blijkt kun je echter prima een andere selectie hebben, terwijl die markers van de niet bestaande image keurig blijven staan.

Het ziet er zo verwarrend slordig uit

[gvanh]

Nou ... gut ... voor het nageslacht:

Er is een mogelijkheid om in ieder geval die vervelende markers weg te krijgen ... al is het niet erg gracieus.

Na het verwijderen of vervangen van de bewuste afbeelding kun je het display style-property van je iframe-element op 'none' zetten en vervolgens weer op 'display'. Daarna moet je dan ook nog 'ns opnieuw de designMode van je iframe op 'On' zetten. Als je dat hebt gedaan ... zijn je blokjes weg ... en iedere selectie in het frame overigens ook ... maar misschien is er nog een manier om dat op te vangen.

In code krijg je dan zoiets:

JavaScript:

frameElement.style.display = 'none';
frameElement.style.display = 'block';
frameDocument.designMode = 'On';

Daarbij zijn frameElement en frameDocument dan verwijzingen naar de respectievelijke DOM objecten.

[CH4OS]

JavaScript:

frameElement.style.display = 'none';
frameElement.style.display = 'block';

Weet je dat je hem dan eerst op none zet en later op block? Kan je net zo goed gelijk op block zetten lijkt me...

[gvanh]

Hij staat standaard al op block. Het idee is dat je hem eerst als het ware "de-activeert" en vervolgens weer "activeert". Het is een nasty manier om Mozilla te dwingen om de selectie van het element dat je hebt aangeklikt te verwijderen.

[Michali]

Ok, dat ga ik even proberen. Ben ik er ook gelijk vanaf. Bedankt voor het uitzoekwerk.

[gvanh]

In het verlengde hiervan zit ik overigens met een ander probleem... en dat is het terugkrijgen van de "cursor" (caret) in het actieve iframe. Ik krijg wel de focus en eventueel een selectie in het iframe document, maar ik krijg geen knipperende cursor.

Ik heb onderstaande allemaal op een rijtje gezet ... maar niets daarvan "does the trick".

Vreemd genoeg kan ik niets vinden hierover ... ik kan me niet voorstellen dat ik de enige ben die hier tegenaan loopt ... waarschijnlijk zoek ik op de verkeerde termen. Iemand een idee?

JavaScript:

                _selection = null;
                _range = null;
                
                _selection = framedoc.window.getSelection();
                _selection.removeAllRanges();
                _range = framedoc.createRange();
                _range.selectNode(insertNode);
                _range.setStart(insertNode, 0);
                
                _selection.addRange(_range);
                
                framedoc.window.frameElement.style.display = 'none';
                framedoc.window.frameElement.style.display = 'block';
                framedoc.designMode = 'On';

                _range = framedoc.createRange();
                _range.selectNode(framedoc.body);
                _selection.removeAllRanges();
                _selection.addRange(_range);
                //framedoc.window.focus();
                //framedoc.window.frameElement.contentWindow.focus();
                framedoc.window.getSelection().collapse(framedoc.body, 0);

[gvanh]

Oh ... dit laatste lag toch aan mij

Er kwam nog ergens een window.focus() over het volledige venster heen, NA de focus op het iframe.

Sorrrry hoooorrrrr!

[creative8500]

Als ik één ding heb geleerd: maak geen WYSIWYG-editors in JavaScript, da's echt pokkewerk!

[gvanh]

Pfff ... van het ene probleem naar het volgende...

Ik krijg het niet voor elkaar om mijn cursorpositie te veranderen in Mozilla. Is dat mogelijk? Ben alweer flink wat uurtjes aan het proberen en zoeken ... maar nog geen antwoord gevonden. Cursor-positie wordt "gereset" na dat gevogel met die display-eigenschap van het iframe ... ik kan wel achterhalen waar ik de cursor teruggeplaatst wil hebben ... maar ik krijg hem niet verplaatst!

Alvast weer dank voor het meedenken.


En ... inderdaad ... het is geen sinecure, een editor in JavaScript ... aan de andere kant toch weer een mooie uitdaging om er wel een prettig werkbare oplossing voor te bouwen.

[Verwijderd]

Ik ben zelf ook bezig met het bouwen van een ORTE-editor. Bij mij zijn beide problemen echter totaal niet aan de orde. Ik weet niet hoe je dat voor elkaar krijgt?

[gvanh]

Dan ben ik heel benieuwd naar je editor ... heb je ergens een voorbeeldje online staan?

Beide problemen heb ik inmiddels overigens opgelost ... waarbij die van de cursor enerzijds mijn eigen schuld was doordat NA een focus() op het iframe nog een ander event werd afgevuurd dat de focus weer ergens anders plaatste.

[Verwijderd]

Nee, heb geen voorbeeldje online staan. Maar zie gewoon even: http://gathering.tweakers.net/forum/list_messages/1239269/2
Ergens op die pagina staat een tussentijdse versie (die het lang niet helemaal doet, en nu al helemaal aangepast is).

Het enige probleem wat ik momenteel tegenkom is het undo en redo in IE. Als je namelijk meerdere editors op één pagina hebt, wordt het undo en redo ook voor heel de pagina gedaan. Dus als je bij de ene editor op undo klikt, kan het zijn dat hij in de andere editor wat undoed
Probleem is ook bekend bij andere editors, dus ben nu eigen undo-service aan 't maken.

BTW: Wat selectie betreft kun je evt. ook mij klas gebruiken, die heb ik namelijk gewoon gepubliceerd:
http://www.phpfreakz.nl/library.php?sid=25857

[gvanh]

Geestig ... eigenlijk zonde dat iedereen zijn eigen versie aan het maken is van zoiets. Ik heb net een uur of 17 besteed aan het maken van een undo/redo functionaliteit voor gebruik in verschillende editor-vensters tegelijkertijd. En met succes, moet ik zeggen. Iedere editor heeft nu zijn eigen history en met iedere undo/redo wordt ook de cursor positie teruggeplaatst op de plaats waar hij stond toen het tussentijdse punt werd opgeslagen ... werkt erg gaaf en zeker een stuk beter dan de ingebouwde undo-functionaliteiten van de designMode implementaties. Ik ben nu nog wat vervelende ditjes en datjes aan het wegwerken in Explorer ... in Firefox werkt hij nu (voor zover ik heb kunnen achterhalen) vlekkeloos.

Ik ga nu even je linkjes bekijken.

Net je selection object bekeken. Gaaf gedaan ... heel mooi. Doet hetzelfde als wat bij mij in veel verschillende functies her-en-der verspreid staat. Heb je Jorgen Horstink's Internet Explorer implementatie voor het W3C model wel eens bekeken? (linkje). Ook wel gaaf en weer een andere approach. Code van Jorgen heb ik trouwens nooit bekeken ... alleen het concept gelezen.

[ Voor 23% gewijzigd door gvanh op 30-08-2007 17:34 . Reden: aanvulling. ]

[creative8500]

Realiseer je vooraf: gaanderweg ga je steeds meer browser-eigenaardigheden ontdekken die je wilt oplossen door zelf een implementatie te schrijven, waardoor je uiteindelijk designMode überhaupt niet meer zult gebruiken. En voordat je zover bent ben je wel meer dan tien- of honderdmaal 17 uur kwijt.

[gvanh]

Geestige approach!

In de afgelopen paar jaar heb ik een fix aantal uren van mijn leven gestopt in het verbeteren van mijn editor ... dus ik heb inderdaad een redelijk zicht op de quirks van Explorer en Firefox. Met Opera en Safari heb ik nog niet geëxperimenteerd als het gaat om designMode.

[Verwijderd]

Ik heb nu ca. 80 uur in mijn editor zitten (en ook al voor ca. € 500,- er voor gehad).
De grootste problemen tot nu toe hebben IE en Opera mij bezorgd met hun undo en redo (ik laat de cursor trouwens niet terugplaatsen, ik focus gewoon niet op het frame zodat mensen automatisch weer met hun muis naar heb object toegaan wat ze willen hebben (zo'n functie koste mij ca. een half uurtje)).

Dit is een klein lijstje van de problemen die ik tegen ben gekomen.
- Opera en IE kunnen niet overweg met CSS-styles in de HTML, en willen persé <strong>dit dat</strong> zien ipv. <span style="font-weight: bold"></span>
- Opera en IE leveren geen valid HTML aan bij document.innerHTML
- Opera en IE hebben geen goede undo-redo functie.
- IE heeft een afwijkende vorm van selectie.
- Opera is de document.queryCommandEnabled functie buggy...
- In IE werken de DOM-functies alleen goed wanneer je pagina volledig ingeladen is...
- Opera weet niet wat oncontextmenu is...
- FF kun je alleen maar events toekennen nadat je designMode eerst op 'On' hebt gezet. Als je het er na doet worden alle events gewist.
- Trident-engine (IE) en geckogebaseerde engines hebben andere manier van events setten.