[JS] WYSIWYG editor met meer tags uitbreiden

[MarkvE]

Ik ben bezig met het maken van een WYSIWYG editor in Javascript. Met de functie execCommand kom je al een heel eind, alleen beschik je dan alleen over de (wat verouderde) standaard tags, zoals <b>, <i> en <u>. Echter zou ik graag ook andere tags in mijn editor willen kunnen toepassen, zoals <acronym>, <abbr>, etc.

Nu heb ik bijv. al <em> voor <i>, <strong> voor <b>, <del> voor <strike>, <ins> voor <u> laten vervangen. Maar een totaal andere tag als <acronym> kun je niet gebruiken door een oude tag door een "nieuwe" laten vervangen.

Mijn vraag is dus eigenlijk, hoe kun je een <acronym> in je editor laten toepassen zoals je via execCommand bijv. een stuk tekst bold kunt maken?

[BtM909]

Je kan met JavaScript nieuwe element creeeren dmv createElement. Dan moet je uiteraard de mogelijkheid hebben om dat toe te kunnen voegen

[André]

Hier staat een complete lijst van commando's

En kun je niet met createRange werken?

[MarkvE]

BtM909 schreef op 09 november 2004 @ 20:45:
Je kan met JavaScript nieuwe element creeeren dmv createElement. Dan moet je uiteraard de mogelijkheid hebben om dat toe te kunnen voegen

Daar heb ik - vergeten te vertellen - ook nog even meegespeeld. Alleen krijg ik het dan niet voor elkaar dat het element zich ook netjes sluit op het moment dat dat nodig is...

[MarkvE]

André schreef op 09 november 2004 @ 20:47:
Hier staat een complete lijst van commando's

En kun je niet met createRange werken?

Dat zijn er vrij veel, alleen krijg je dan het probleem met Mozilla, deze ondersteund slechts een aantal commando's (klik)...

[ Voor 4% gewijzigd door MarkvE op 09-11-2004 20:51 ]

[Verwijderd]

Tip: gebruik zo weinig mogelijk execCommand en zoveel mogelijk custom functies...

[MarkvE]

Verwijderd schreef op 09 november 2004 @ 20:54:
Tip: gebruik zo weinig mogelijk execCommand en zoveel mogelijk custom functies...

Dat is inprincipe wel de beste manier, want ik zie nu al de verschillen qua output van execCommand in Mozilla en Internet Explorer.

Alleen is de vraag; hoe doe ik dat?

Ik heb het via regex geprobeerd:

code:

var selection = iframe.getSelection ();
var range = selection.getRangeAt ( 0 );
var container = range.startContainer;
var start = range.startOffset;
var end = range.endOffset;
var code = container.innerHTML;
                    
container.innerHTML = code.replace ( new RegExp ( '(' + selection + ')', 'i' ), '<' + tag + '>$1</' + tag + '>' );
                    
iframe.focus ();

En via DOM:

code:

var selection = iframe.getSelection ();
var range = selection.getRangeAt ( 0 );
var container = range.startContainer;
var start = range.startOffset;
var end = range.endOffset;
var code = container.innerHTML;

afterNode = container.childNodes [ pos ];
container.insertBefore ( insertNode, afterNode );

iframe.focus ();

Bij de eerste methode werkt het wel, maar is het niet ideaal (je hebt geen controle over de elementen) en bij de tweede methode werkt het niet (ik krijg het element maar niet om de selectie heen (de output is dan iets als: "Blaat blaat, blaat<strong></strong>").

Het beste zou via DOM zijn, maar ik krijg maar geen manier onder de knie om de tags wel om de selectie heen te zetten (krijg ze er alleen voor of achter)...

[ Voor 5% gewijzigd door MarkvE op 10-11-2004 12:18 ]

[Verwijderd]

Ik zou juist zoveel mogelijk execCommand werken en zo weinig mogelijk met custom functies.
Bij execCommand heb je nog de mogelijkheid van undo en bij custom functies, voor zover ik weet, niet.
Overigens heb je voor Mozilla ook de 'inserthtml' execCommand.

[Verwijderd]

De undo functionaliteit is wel een van de meest brakke van alle commandIdentifiers!
Je hebt absoluut geen controle op wat er bijgehouden wordt en ook lijdt de functie aan chronisch geheugenverlies wanneer je nieuwe content naar het frame schrijft.
De oplossing is het maken van een eigen history object.
Voor nextavenue heb ik ook een history object geschreven. Dat ding is amper twee kilobyte....

code:

NextAvenue.prototype.history.save
NextAvenue.prototype.history.undo
NextAvenue.prototype.history.canUndo
NextAvenue.prototype.history.canRedo
NextAvenue.prototype.history.redo

Om terug te komen op je vraag om custom tags in te voegen: ik ben er ook hard naar op zoek en ben er wel een tijdje mee bezig geweest, alleen heb ik nog niet echt een intelligente manier kunnen bedenken.
Doordat IE een brak range object heeft, kan je niet gemakkelijk een eigen methode schrijven. Voor gecko heb ik een eigen methode geschreven, maar ik moet nog een oplossing bedenken voor IE.
In Gecko komt het er gewoon op neem dat je heel veel gebruik moet maken van de DOM methodes en het range-object.

// edit
Ik zag dat je al bezig bent geweest met range en DOM methodes, maar ik kan je vertellen dat er heel wat meer aan te pas komt dan een regeltje of 10. Ik heb zo'n 320 regels code met alleen maar DOM lookups en range method aanroepen...

[ Voor 10% gewijzigd door Verwijderd op 10-11-2004 13:02 ]

[Verwijderd]

Verwijderd schreef op 10 november 2004 @ 12:59:
De undo functionaliteit is wel een van de meest brakke van alle commandIdentifiers!
Je hebt absoluut geen controle op wat er bijgehouden wordt en ook lijdt de functie aan chronisch geheugenverlies wanneer je nieuwe content naar het frame schrijft.
De oplossing is het maken van een eigen history object.
Voor nextavenue heb ik ook een history object geschreven. Dat ding is amper twee kilobyte....

Helaas, dat zijn inderdaad grote nadelen, inderdaad.
Maar werkt jouw eigengemaakte 'undo' wel goed? Ik kan me nogal wat probleemsituaties voorstellen, waar die het wel eens niet zo goed zou doen...

[BtM909]

Verwijderd schreef op 10 november 2004 @ 14:53:
[...]

Helaas, dat zijn inderdaad grote nadelen, inderdaad.
Maar werkt jouw eigengemaakte 'undo' wel goed? Ik kan me nogal wat probleemsituaties voorstellen, waar die het wel eens niet zo goed zou doen...

Zoals ?

[Verwijderd]

Verwijderd schreef op 10 november 2004 @ 14:53:
[...]

Helaas, dat zijn inderdaad grote nadelen, inderdaad.
Maar werkt jouw eigengemaakte 'undo' wel goed? Ik kan me nogal wat probleemsituaties voorstellen, waar die het wel eens niet zo goed zou doen...

Idd, zoals? Ik kan me namelijk geen probleem situaties voorstellen Ik snap ook niet helemaal waar je op doelt...

[BtM909]

Verwijderd schreef op 10 november 2004 @ 15:38:
[...]


Idd, zoals? Ik kan me namelijk geen probleem situaties voorstellen Ik snap ook niet helemaal waar je op doelt...

Waarschijnlijk op hoe jouw ontwerp eruit ziet

[Verwijderd]

Nou, zoals copy-pasten van code, resizen van images,tabellen, draggen en droppen van content, dat soort dingen.

[Verwijderd]

't is maar net wanneer je je undo en redo acties wil backuppen... je kan gewoon met nextavenue.history.save() een nieuw recovery point aanstellen.

[MarkvE]

Verwijderd schreef op 10 november 2004 @ 12:59:

Ik zag dat je al bezig bent geweest met range en DOM methodes, maar ik kan je vertellen dat er heel wat meer aan te pas komt dan een regeltje of 10. Ik heb zo'n 320 regels code met alleen maar DOM lookups en range method aanroepen...

Ik hoop dat dat niet geldt voor één of meerdere simple buttons á la "maak tekst vet"?

Iig hoopte ik dat je me wat verder weg kon helpen, tot op heden krijg ik - zoals ik vertelde - het niet voor elkaar om via de DOM methode de tags om de selectie heen te krijgen. Misschien weet jij een oplossing voor dit probleem?

[Verwijderd]

Dat is omdat het complexer is dan je denkt... Je moet textnodes opsplitsen, kijken of nodes al de tagname hebben etc.
't Gaat gewoon te ver om hier 320 regels code te posten, en bovendien is de code niet openbaar. Als het je niet lukt om tags om tekst heen te krijgen met DOM methodes dan moet je beter zoeken naar tutorials en voorbeelden.

Voor je bookmarks: dotvoid.com over Mozilla Range Object

[MarkvE]

Verwijderd schreef op 11 november 2004 @ 23:57:
Dat is omdat het complexer is dan je denkt... Je moet textnodes opsplitsen, kijken of nodes al de tagname hebben etc.
't Gaat gewoon te ver om hier 320 regels code te posten, en bovendien is de code niet openbaar. Als het je niet lukt om tags om tekst heen te krijgen met DOM methodes dan moet je beter zoeken naar tutorials en voorbeelden.

Voor je bookmarks: dotvoid.com over Mozilla Range Object

In ieder geval bedankt

Ik weet nu dat ik tenminste voor Mozilla alleen naar het Range object moet kijken. En voor IE wellicht nog steeds aanmodderen met execCommand...

[Verwijderd]

MarkvE schreef op 12 november 2004 @ 07:28:
Ik weet nu dat ik tenminste voor Mozilla alleen naar het Range object moet kijken. En voor IE wellicht nog steeds aanmodderen met execCommand...

Wat ga je doen dan? Een van de twee kiezen? Of wil je 'm niet in Mozilla / Firefox én IE laten werken? Deze is in ieder geval erg goed, kijk daar maar ns naar.. Je kunt het btw ook gewoon jatten mocht je geen zin hebben om je er in te verdiepen Deze werkt iig helemaal goed in Mozilla en IE, en das een van de weinige die ik ben tegengekomen die dat doet..

[BtM909]

Verwijderd schreef op 12 november 2004 @ 14:09:
Deze is in ieder geval erg goed, kijk daar maar ns naar..
[...]
Deze werkt iig helemaal goed in Mozilla en IE, en das een van de weinige die ik ben tegengekomen die dat doet..

Nou de site werkt iig in geen van beide browsers

Page cannot be displayed

[ Voor 21% gewijzigd door BtM909 op 12-11-2004 14:15 ]

[Verwijderd]

Verwijderd schreef op vrijdag 12 november 2004 @ 14:09:
[...]


Wat ga je doen dan? Een van de twee kiezen? Of wil je 'm niet in Mozilla / Firefox én IE laten werken? Deze is in ieder geval erg goed, kijk daar maar ns naar.. Je kunt het btw ook gewoon jatten mocht je geen zin hebben om je er in te verdiepen Deze werkt iig helemaal goed in Mozilla en IE, en das een van de weinige die ik ben tegengekomen die dat doet..

Ik vraag me werkelijk af waar deze reply op slaat Heb je z'n vraag wel eens gelezen? Hij vraagt niet om een standaard editor. Als hij dat namelijk wel had gedaan, dan had ik dit topic al lang ondergespamt
Hij wil zelf custom tags om een selectie kunnen plaatsen. Dat is gewoon iets dat (helaas) niet erg gemakkelijk gaat.

[Verwijderd]

Verwijderd schreef op vrijdag 12 november 2004 @ 22:05:
[...]


Ik vraag me werkelijk af waar deze reply op slaat Heb je z'n vraag wel eens gelezen? Hij vraagt niet om een standaard editor. Als hij dat namelijk wel had gedaan, dan had ik dit topic al lang ondergespamt
Hij wil zelf custom tags om een selectie kunnen plaatsen. Dat is gewoon iets dat (helaas) niet erg gemakkelijk gaat.

hmja helemaal gelijk in, ik lees terug en zie ook dat het nergens op slaat

[Verwijderd]

BtM909 schreef op vrijdag 12 november 2004 @ 14:14:
Nou de site werkt iig in geen van beide browsers

das vreemd, hier doettie 't gewoon, maar zoals Jorgen opmerkte sloeg die reply nergens op dus laat maar hangen..