WYSIWYG editor

[jeroendenoot]

Ik heb een de uitlijn knoppen ook even vervangen door die code met vierkante haken. En een paar afbeeldingen als knoppen gemaakt. Die heb ik even voor het gemak gelinkt naar deze editor: http://www.dynarch.com/demos/htmlarea/examples/core.html

 

[jeroendenoot]

Bijlage WEER vergeten:

 

[Egel]

Die knopjes van dynarch zijn dezelfde als van outlook express.

De automatische links werken! En ik heb nog & en " toegevoegd aan het woordenboek.


Vr.Gr. Egel.

 

[jeroendenoot]

Geplaatst door Egel
Die knopjes van dynarch zijn dezelfde als van outlook express.

De automatische links werken! En ik heb nog & en " toegevoegd aan het woordenboek.


Vr.Gr. Egel.

Wauw, mooi! Ik snap alleen niet wat $2 in de regular expressions betekent. Verder is het mooi gemaakt! Ik ga nog even verder met de knopjes.

 

[jeroendenoot]

Knopjes zijn klaar. Ik heb ze maar even op mijn webspace gezet.

 

[Egel]

Ik snap alleen niet wat $2 in de regular expressions betekent.

Dat herhaalt de "subexpression-matched characters" het gedeelte dat tussen de 2e () staat: http://www.visibone.com/regular-expressions/ onder 'replace()'s special symbols'.

Ik pas het ook voor 't eerst toe.


Vr.Gr. Egel.

 

[jeroendenoot]

Geplaatst door Egel
Dat herhaalt de "subexpression-matched characters" het gedeelte dat tussen de 2e () staat: http://www.visibone.com/regular-expressions/ onder 'replace()'s special symbols'.

Ik pas het ook voor 't eerst toe.


Vr.Gr. Egel.

Oké, weer wat geleerd.

 

[Egel]

Tijd voor een plaatje:

De knopjes hebben een css randje gekregen en reageren op de muis, daarom gebruiken ze nu ook <a href="JavaScr..." onMouse...><img ...></a>.

En ik heb het script wat verbeterd, het werkt nu ook met Firefox.


Vr.Gr. Egel.

 

[Egel]

Versie 1.8:

 

[jeroendenoot]

Ja, dat is mooi gemaakt! Ik heb er nog even een horizontale lijn aan toegevoegd.
Trouwens, heb je die knopjes al eens in FireFox gezien? De plaatjes staan helemaal bovenaan in de knopjes. Ik heb al van alles geprobeerd om het goed te krijgen, maar het lukt maar niet. Weet jij misschien hoe dat moet?

P.S. Ik bedenk me net, is het niet gemakkelijker om die knopjes met outset en inset border-style te doen?

 

[Egel]

Ik heb er nog even een horizontale lijn aan toegevoegd.

Die zijn nu 1px donkergrijs via de style.

Trouwens, heb je die knopjes al eens in FireFox gezien? De plaatjes staan helemaal bovenaan in de knopjes. Ik heb al van alles geprobeerd om het goed te krijgen, maar het lukt maar niet. Weet jij misschien hoe dat moet?

Ik zag het ook na het posten, ik had alleen off line getest. Na flink puzzelen is het gelukt met doctype strict & img, de img heeft de border nu. Zie ook het plaatje bij: Border in IE en FF.

De regeleinden deden het ook niet met Fx omdat die alleen \n gebruikt, dat is opgelost met /\r?\n/

Ik bedenk me net, is het niet gemakkelijker om die knopjes met outset en inset border-style te doen?

Dat was handig geweest maar helaas doen Ie en Fx dat niet goed, dan wordt de border grijs.


<- opslaan op klasonline


2.0! Vr.Gr. Egel.

 

[Egel]

Het werkt.

Ik heb nog de width: auto; veranderd in width: 20px; in de style. Ze werden te smal (wink is nog 21px).

De helpmij smilies zijn ook om te testen, er moeten nog eigen smilies komen.


Vr.Gr. Egel.

 

[jeroendenoot]

Jij bent echt zoooooon goeie gast! Echt super mooi is die editor geworden. Het is alleen geen WYSIWYG editor, maar ja. Dat wordt waarschijnlijk veel te moeilijk...
Echt heel erg bedankt.

 

[Egel]

Graag gedaan, leuk om te maken!

Tja, echt wysiwig , als dat makkelijk zou kunnen...

Ik had nog twee dingen bedacht, .replace(/\[(\/?)b\]/ig,'<$1b>') vervangt de bold tags in één keer. De /i zorgt ervoor dat de hoofdletter B ook werkt. u, i, big & small werken ook zo.

En de bold, cursief, onderstreept, rood, groot & klein knopjes voegen om de beurt een begin en eind-tag in. De knopjes blijven ook ingedrukt staan zolang er nog geen eind-tag is. Dat werkt met de functies toggle(a,b) - invoegen en buttonstate() - knopjes omhoog / omlaag.


Succes met het php gedeelte! Egel.

 

[jeroendenoot]

Wauw, dat heb je mooi gemaakt (en bedacht)!