Wysiwygeditor live op frontpagereacties - Development-iteratie #314

Half mei maakten we de wysiwygeditor als bètafeature beschikbaar voor de frontpagereacties. Deze bètaperiode sluiten we af en we maken de editor beschikbaar voor alle gebruikers. In dit .plan meer hierover en wat er nog meer speelde de afgelopen periode.

Wysiwygeditor live voor frontpagereacties

De regelmatige lezer van onze developmentupdates weet dat we sinds medio 2020 de ambitie hebben om de editors te vernieuwen. In de community is dat ook een lang gehoorde wens. Midden in coronatijd deden we al eens een poging om dit tot ontwikkeling te brengen, maar die strandde helaas vroegtijdig. De afgelopen maanden hebben we jullie op de hoogte gebracht van de ontwikkelingen van de tweede poging.

Vandaag zetten we de nieuwe wysiwygeditor live voor alle bezoekers die willen reageren op de nieuwsartikelen. Met deze editor maken we het met name voor gebruikers op mobiel makkelijker om opmaak toe te voegen. In de bètafase ontvingen we via het forum nog wat feedback en wensen voor verbeteringen. Een deel van de feedback was bekend, maar we hebben ook nog nieuwe dingen geleerd in deze fase. Ondertussen zijn de meeste hiervan doorgevoerd en beschikbaar in de versie die nu live is gekomen.

Doordat we steeds meer functionaliteit aanbieden, zijn er ook meer icoontjes toegevoegd aan de werkbalk van de wysiwygeditor. We hebben daarom een Meer-menu toegevoegd. Als er in de balk meer icoontjes zijn dan op een regel zouden passen, komen deze automatisch in een overloopmenu. Hierdoor zal de werkbalk niet meer worden verdeeld over meerdere regels. Ook nieuw is het tekststijlmenu. Hierin zijn een aantal tags opgenomen die niet tegelijkertijd kunnen worden toegepast. Door al deze tags in één element te plaatsen is het duidelijker dat de tags elkaar vervangen.

Verder hebben we wat losse eindjes opgeruimd om tot een bètarelease te komen en zijn we op de achtergrond druk bezig met voorbereidingen om de editor in Vraag & Aanbod toe te kunnen passen. Daarna zullen de reviews en het forum volgen.

Afscheid bij Tweakers - Jelle

Na 4,5 jaar ga ik (jelle.) Tweakers verlaten om me te richten op een nieuwe uitdaging. Volgende week start ik namelijk bij onze collega's van Independer (ook onderdeel van DPG Media) als Business Analist. Mijn avontuur bij Tweakers begon als marketingverantwoordelijke voor de nieuwe abonnementen, waaronder Tweakers Plus. Nadat we daar eind 2022 de stekker uit trokken, werkte ik vanuit het Product-team aan een heleboel mooie projecten, waaronder de de introductie van dark mode, het vernieuwen van de Best Buy Guides en frontpage, en de afgelopen maanden het stapsgewijze redesign van de Pricewatch. Een ontzettend leuke en vooral leerzame tijd, niet in de laatste plaats door wat Tweakers zo uniek maakt: de community :)

Voor mij is de tijd gekomen om me verder te gaan ontwikkelen bij een ander team en product. Wellicht tot ziens op een Tweakers-event!

Voor mijn rol als Product Owner wordt momenteel gezocht naar een opvolger. Heb je ruime ervaring in productontwikkeling en wil jij je steentje bijdragen aan dit prachtige platform? Bekijk de vacature.

En verder

• Reviews staan nu standaard in de singlepageopmaak. De keuze voor de multipageopmaak blijft bestaan.
• In Best Buy Guides kun je bij aanbevolen producten meerdere afbeeldingen bekijken in een carrousel.
• We hebben Notepad in Myreact verwijderd omdat deze functionaliteit weinig werd gebruikt maar wel tijd kost voor onderhoud. Gebruikers die inhoud in hun Notepad hadden staan, hebben deze inhoud in een dm ontvangen. Zie de aankondiging voor meer informatie hierover.
• Tot slot zijn weer een aantal bugs geplet. Door het shopfilter werd geen prijs getoond in de header van de productdetailpagina, Pricewatch-tabbladen onder 'Meer' kregen een verkeerde styling en de productkaarten in Best Buy Guides bleken niet bestand tegen lange productspecificaties.

Reacties (51)

[Solopher]

Hopelijk wordt het straks ook mogelijk om Markdown te gebruiken.

Als Developer/DevOps werk ik dagelijks met Markdown, dit is ook de standaard op bijv. GitHub.Verder gebruik liever mijn toetsenbord dan mijn muis. Ik ga dus opzoek naar de optie om de wysiwy editor uit te zetten.

@jelle. succes met je nieuwe uitdaging!

[Reactie gewijzigd door Solopher op 25 juni 2025 14:35]

[crisp]

Je kan ook gewoon markdown gebruiken

[Brent]

Op het forum niet toch?

[crisp]

Nee, het forum is later dit jaar pas aan de beurt voor een nieuwe editor

[Brent]

OK, ben blij dat het op de planning staat. Tweakers is anno 2025 nog de enige plek waar ik BBcode moet gebruiken ipv Markdown

[Mog]

## Hahaha

Is dat zo?

- Test

- Test

- Nested test

[crisp]

Headings zijn niet ondersteund hier in de frontpage comments. Een ongeordende lijst krijg je door *+spatie te doen

Er komt later nog een helpfunctie waar ook de markdown shortcuts zullen worden vermeld.

[Reactie gewijzigd door crisp op 25 juni 2025 15:13]

[Solopher]

WOW, thanks, dat wist ik niet

Nu alleen het form nog kunnen submitten met `CMD+Enter

[P_Tingen]

Ja, die zou ik ook graag zien inderdaad! (CTRL+Enter voor windows dan)

[P_Tingen]

Je kan een aantal zaken ook met de standaard shortcuts voor elkaar krijgen:

• - bold = ctrl-b
• - italic = ctrl-i
• - doorgehaald = ctrl-s
• - link = ctrl-k

Hover met je muis over de icons boven de editor. Ook de meer exotische zaken kun je met een shortcut doen maar die gebruik je waarschijnlijk zo weinig dat je eerst moet zoeken wat de shortcut ook alweer was, dus daar zal markdown veel sneller zijn

[MeltedForest]

^Even _kijken of het werkt.

edit:

Ja het werkt!

Waarom is eigenlijk ongedaan maken wel crtl+z, maar herhalen is niet crtl+y?

[Reactie gewijzigd door MeltedForest op 25 juni 2025 14:33]

[MsG]

CTRL Y werkt hier prima?

[MeltedForest]

Verrek ja, maar dat zegt de tooltip niet

[Ayporos]

Ik vind het irritant dat wanneer ik een smiley selecteer het smiley selectie menu niet meer automatisch sluit... zal wel aan mij liggen.

[Reactie gewijzigd door Ayporos op 25 juni 2025 18:06]

[vickypollard]

Dat is voor als je veel smilies achter elkaar wilt plaatsen

[Skit3000]

edit:

Je kunt lege reacties plaatsen als je naar "Edit" gaat en daar dan niks intikt.

[Martijn.C.V]

Omdat dat ctrl + SHIFT + z is (End voor mac de CMD uiteraard) Net als in heel veel editors trouwens.

[Reactie gewijzigd door Martijn.C.V op 25 juni 2025 14:36]

[crisp]

Waarom is eigenlijk ongedaan maken wel crtl+z, maar herhalen is niet crtl+y?

We gebruiken zoveel mogelijk gewoon de standaardconfiguratie van de door ons gebruikte editor (TipTap)

[Skit3000]

edit:

[Skit3000]

edit:

[vickypollard]

_^testtesttest^testtest_test^test

[YopY]

_^testtesttest^testtest_test^test

offtopic:
volgens mij werkt ie

edit:

dit is geen edit

[Zilverdael80]

Als ik één suggestie mag doen,

De smiley box gaat niet weg als je er naast klikt. De rest van dergelijke pop-ups wel.

Zou toch fijn zijn als dat wel het geval zou zijn

^{my 2 cents}

edit:

leuk die autocorrect, maakt van smiley slimey??

[Reactie gewijzigd door Zilverdael80 op 25 juni 2025 14:42]

[crisp]

Dat moeten we inderdaad maar eens gelijk trekken; ik had er net zelf ook last van

edit:
bij deze gefixed

[Reactie gewijzigd door crisp op 25 juni 2025 15:21]

[Brent]

De slimey box

Die ga ik erin houden!

[Skit3000]

Sorry @Zilverdael80, ik reageerde per ongeluk offtopic op jouw reactie terwijl ik dat ergens anders wilde doen.

[Reactie gewijzigd door Skit3000 op 25 juni 2025 14:37]

[Zilverdael80]

Had al zo'n vermoeden gezien de bulk aan reacties hierboven

[njitter]

Waarom hebben jullie er eigenlijk voor gekozen om zelf een editor in elkaar te zetten en niet voor een bestaande opensource variant, bijvoorbeeld ckeditor of tinymce?

[xFeverr]

er wordt gebruik gemaakt van een open source editor genaamd TipTap.

[crisp]

Zoals @xFeverr al vermeld maken we gebruik van TipTap wat weer een API is bovenop ProseMirror.

Alleen de GUI en de tussenlaag om onderhuids toch nog gebruik te maken van RML/UBB is door onszelf ontwikkeld.

[supersnathan94]

Ik kan op mobiel helaas nog niet goed werken met de nieuwe editor. Zijn nog wat kleine dingetjes.


Op desktop is het zo'n GI GAN TISCHE verbetering. Echt heel fijn om Markdown te kunnen gebruiken. Hoewel een manier om een klein tabelletje te maken nog wel een gewenste zou kunnen zijn hier.


Ook als je spacing met spaties oplost,

worden die gewoon weer weggeyeet. dus uitlijnen is wel lastig.


En Succes @Jelle! bedankt voor je bijdragen hier en je demo's op de elite events. Dit was natuurlijk 1 van de grote klappers!

edit:

is er overigens een forumtopic om issues met de editor te kunnen melden als die wat meer functioneel zijn? Dus niet de bug reports.

[Reactie gewijzigd door supersnathan94 op 25 juni 2025 15:54]

[ikloon]

is er overigens een forumtopic om issues met de editor te kunnen melden als die wat meer functioneel zijn? Dus niet de bug reports

Voor nu kun je dat nog in forumtopic: Wysiwyg-editor als bètafeature doen.

[[Roland]]

[quote]

Reviews staan nu standaard in de singlepageopmaak

[/quote]

Dit vind ik een hele fijne. Dank!

edit: quoten werkt anders nu :-)

[Reactie gewijzigd door [Roland] op 25 juni 2025 14:35]

[koku]

Mooi spul dat wysiwyg

Zeker!

Admin-edit:

We gaan je missen, @jelle.

[xFeverr]

Ik merk wel dat op iPhone (13) de webpagina inzoomt zodra je iets in de editor wilt typen en daarmee werkt het eigenlijk niet zo lekker. Als daar iets aan gedaan kan worden zou het perfect werken.

[Llopigat]

Hmm ik vind op de telefoon de editorbalk wel heel erg groot, dat zou nog verbeterd kunnen worden.

Verder vind ik hem wel aardig, maar ik heb nog steeds liever de broncode editor omdat ik dan duidelijk zie wat ik doe. Ik was ook iemand die in WP altijd in het onderwaterscherm zat en HTML met de hand liep te editen

[Zeror]

@jelle., heel veel succes met je nieuwe uitdaging!