WYSIWYG editor

Status
Niet open voor verdere reacties.
jeroendenoot

jeroendenoot

Terugkerende gebruiker
Lid geworden
14 mrt 2005
Berichten
1.492
Hallo, ik wil voor enkele invulvelden op mijn site zoals het gastenboek een hele simpele WYSIWYG editor maken. Het zal wel moeilijk worden en wat tijd kosten, maar ja. Ik heb eens naar wat gratis online WYSIWYG editors gekeken, maar die zijn veel te uitgebreid. En ik wil graag zelf snappen hoe het werkt, dan kan ik het makkelijk aanpassen. Nu lijkt het mij het handigste om te beginnen met; Waarin typ je de tekst? In een textarea? Maar kun je daar wel opmaak invoegen? Voor zover ik weet niet... Waar kun je nog meer intypen? En hoe doen ze dat bij die gratis online WYSIWYG editors? Ik heb eens in de broncode gekeken, maar ik snap er niet veel (niks) van...
Kan iemand mij helpen...?
 
hoeveel ervaring heb je met javascript?

je zou dit met javascript kunnen doen zoals op http://editor.bruggema.nl :) zelf gemaakt ps.

Hier zitten nog aardig wat bugs in maar dit is niet helemaal wat je wilt zien, maar je zou dat gedeelte dat je het omzet in HTML ook nog even kunnen bouwen.

Indien je genoeg kennis van Javascript hebt dan.. :)

Succes!
 
Nou, ik ken al heel wat van JavaScript, en ik denk dat als ik dat script eens goed bestudeer, dat ik er dan wel een zelf kan schrijven. Ik zal wel laten weten als ik een vraag heb over het script.
 
Ik heb nu eens gekeken... Dit is niet wat ik bedoel. Dit kan ik zelf ook nog wel maken. Maar ik wil net zoiets hebben als dit:
http://fslactivities.sd61.bc.ca/ezHTMLarea/
Maar dan veel minder functies. Ongeveer dezelfde functies als dat ding van jou, misschien zelfs nog wel minder.
Weet jij (of iemand anders) misschien hoe ik moet beginnen?
 
Ik weet dat het moeilijk is...
Maar weet niemand hoe het moet?
 
Met html onthefly?

Dat er een nieuwe pagina opent met wat je ingevuld hebt. Als:

var c = open('','','');
c.document.open();
c.document.writeln('<html'>);
............
c.document.writeln('</html'>);
c.document.close();

Dat bewaar je dan met beeld > bron > bestand > opslaan als...

En dan kun je invulvelden maken voor, titel, kleur, de inhoud, enz.


Vr.Gr. Egel.
 
Ja, misschien is het een goed begin.
Wat je zoekt is dus een manier om via een formulier pagina's op je site aan te passen? Met voorbeeld.
Klik om te vergroten...
Ik snap niet zo goed wat je hier mee bedoelt. Het is wel zoiets ja.
 
Ik dacht dat je de website vanaf elke plek via een browser wou kunnen aanpassen, als webmaster.

Maar je bedoeld dus dat mensen die een reactie geven al gelijk zien hoe de reactie eruit komt te zien en ook, zo makkelijk mogelijk, opmaak kunnen toevoegen?


Vr.Gr. Egel.
 
Geplaatst door Egel
Ik dacht dat je de website vanaf elke plek via een browser wou kunnen aanpassen, als webmaster.

Maar je bedoeld dus dat mensen die een reactie geven al gelijk zien hoe de reactie eruit komt te zien en ook, zo makkelijk mogelijk, opmaak kunnen toevoegen?


Vr.Gr. Egel.
Klik om te vergroten...
Inderdaad. Ik heb trouwens een verbetering aangebracht:
 

Bijlagen

onKeyUp voor het updaten werkt een stuk handiger!

Plus: toevoeging van <br>'s als je enter in de textarea gebruikt.


Vr.Gr. Egel.
 

Bijlagen

Ja mooi, alweer een verbetering. Ik denk dat als het zo door gaat het een echte WYSIWYG editor wordt!
 
Ik heb nu het resultaat veld en het code veld overelkaar heen gezet. Ik vind het trouwens niet echt een verbetering, want als je HTML-codes gaat gebruiken klopt de cursor niet meer met de tekst. Weet je misschien een manier om dit op te lossen?
 
Geplaatst door jeroendenoot
Ik heb nu het resultaat veld en het code veld overelkaar heen gezet. Ik vind het trouwens niet echt een verbetering, want als je HTML-codes gaat gebruiken klopt de cursor niet meer met de tekst. Weet je misschien een manier om dit op te lossen?
Klik om te vergroten...
Nog niet :), misschien een <input type="text" size="1"> dat op de goede plek 'zweeft'. :confused:

Ik heb nog een 'woordenboek' gemaakt waardoor er ubb-code [*] & [/*] gebruikt kan worden voor vet, cursief, onderstreept, rood, groot & klein.
Code: 
var book = new Array(
 /</g,'&lt;',/>/g,'&gt;',
 /\r\n/g,'<br>',
 /\[[bB]\]/g,'<b>',/\[\/[bB]\]/g,'</b>',
 /\[[iI]\]/g,'<i>',/\[\/[iI]\]/g,'</i>',
 /\[[uU]\]/g,'<u>',/\[\/[uU]\]/g,'</u>',
 /\[[rR]\]/g,'<font class="r">',/\[\/[rR]\]/g,'</font>',
 /\[[gG]\]/g,'<big>',/\[\/[gG]\]/g,'</big>',
 /\[[kK]\]/g,'<small>',/\[\/[kK]\]/g,'</small>',
 '');
Het is even wennen hoe je het schrijft maar wel makkelijk uit te breiden. :)


Vr.Gr. Egel.
 

Bijlagen

Laatst bewerkt:
Oké, mooi! bedankt. Maar dat vinkje van safe mode haal ik weg want ze mogen geen html codes schrijven.
 
Geplaatst door jeroendenoot
Maar dat vinkje van safe mode haal ik weg want ze mogen geen html codes schrijven.
Klik om te vergroten...
Dat is ook de bedoeling. :) Maar anders werkten de knopjes die nu nog <> tags toevoegen niet meer, en bij het ontwerpen is het wel handig.

Uiteindelijk moet ook een ander (php?) script de inhoud van het invulveld bewerken zodat het veilig aan je MySQL database wordt toegevoegd.

Ik kijk nog even of ik automatische links kan toevoegen.


Vr.Gr. Egel.
 
Dat is ook de bedoeling. :) Maar anders werkten de knopjes die nu nog <> tags toevoegen niet meer, en bij het ontwerpen is het wel handig.
Klik om te vergroten...
O, zo.

Uiteindelijk moet ook een ander (php?) script de inhoud van het invulveld bewerken zodat het veilig aan je MySQL database wordt toegevoegd.
Klik om te vergroten...
O, ja. Daar had ik even niet meer aan gedacht.
Ik kijk nog even of ik automatische links kan toevoegen.
Klik om te vergroten...
Super!
Ik ga nog even verder met andere functies
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan