Skip to content

R2: Onderzoek WYSIWYG Editor

Inleiding

Voor Bluenotion wordt een portaal ontwikkelt waarin vertalingen beheerd kunnen worden. Het portaal ondersteunt JSON vertalingsbestanden die in een tabel weergeven worden, waarin de vertalingen beheerd kunnen worden. Er is nu een wens naar boven gekomen om Scriban vertalingsbestanden te ondersteunen. Scriban is een template engine die gebruikt wordt om vertalingsbestanden te genereren. De vertalingsbestanden worden in een HTML formaat opgeslagen. Om de vertalingsbestanden te kunnen beheren is er een HTML text editor nodig die de HTML opmaak ondersteunt. Bluenotion gebruikt de Scriban bestanden tot nu toe alleen voor email templates.

Relevantie

Het is belangrijk om een goede WYSIWYG editor te kiezen die de HTML opmaak van de Scriban bestanden ondersteunt. De gebruikers van de applicatie moeten de vertalingsbestanden kunnen beheren zonder kennis nodig te hebben van HTML. Het is verder ook belangrijk dat ontwikkelaars die wel kennis hebben van HTML eventuele fouten in de HTML opmaak kunnen herkennen en corrigeren.

1. Onderzoeksvragen

1.1. Hoofdvraag

Welke WYSIWYG editor is het meest geschikt voor het beheren van Scriban vertalingsbestanden in een React webapplicatie?

1.2. Deelvragen

  1. Welke WYSIWYG editors zijn het meest populair?
  2. Welke editors ondersteunen de features die nodig zijn voor het beheren van de Scriban bestanden?
  3. Wat zijn de kosten van de WYSIWYG editors?
  4. Kunnen de editors omgaan met de HTML opmaak van de Scriban bestanden?

2. Resultaten

In dit hoofdstuk worden de resultaten van het onderzoek in kaart gebracht. Hierbij wordt een overzicht gegeven van de populairste WYSIWYG editors, en andere informatie die relevant is voor de verschillende deelvragen.

2.1. Resultatenlijst

2.1.1. Top 5 WYSIWYG editors voor React, (Drake, 2024)

Beste WYSIWYG editors voor React volgens (Drake, 2024)

  1. Editor.js
  2. react-draft-wysiwyg
  3. React Quill
  4. Jodit-React
  5. TinyMCE-react
2.1.2. Best WYSIWYG editors, (Snappify. n.d.)

Beste WYSIWYG editors volgens (Snappify, n.d.)

  1. Froala Editor
  2. TinyMCE
  3. TipTap
  4. Novel
  5. BlockNote
  6. CKEditor
  7. Editor.js
2.1.3. Ondersteunde features WYSIWYG editors

Er zijn verschillende soorten WYSIWYG editors die verschillende features ondersteunen. Hieronder een overzicht van de features die de editors ondersteunen.

Editor Ondersteunt react? Ondersteunt HTML? Ondersteunt uitbundige interactie voor aanpassingen Bron
Froala Editor (Froala, 2024)
TinyMCE (Tiny Technologies Inc., n.d.)
Quill/React Quill (Quill - Your Powerful Rich Text Editor, n.d.)
TipTap (Tiptap, 2024)
Novel (Novel, n.d.)
BlockNote (BlockNote - Javascript Block-Based React Rich Text Editor, n.d.)
CKEditor (CKEditor, n.d.)
Editor.js (Editor.js, n.d.)
Jodit-React (Jodit Editor - XDSoft.net, n.d.)
react-draft-wysiwyg (React Draft Wysiwyg, n.d.)
2.1.4. Kosten van de WYSIWYG editors

De kosten van de WYSIWYG editors zijn afhankelijk van de licentie die je kiest. De meeste editors bieden een gratis versie aan met beperkte functionaliteiten. Voor de volledige functionaliteiten moet je een betaalde licentie aanschaffen.

Editor Kosten Bron
Froala Editor $719 - $1,199 / jaar (Froala Editor Plans: Your Solution for Web Editing Needs, 2024)
TinyMCE Gratis, $67 - $130 / maand (Tiny Technologies Inc., n.d.)
TipTap Gratis of $149 - $999 / maand (Tiptap, n.d.)
Novel Gratis (Novel - Notion-style WYSIWYG Editor With AI-powered Autocompletions, n.d.)
BlockNote $90 - $390 / maand (Pricing - BlockNote, n.d.)
CKEditor Gratis (CKEditor.com, n.d.)
Editor.js Gratis (Editor.js, n.d.)
Jodit-React Gratis, $99 eenmalig (Jodit Editor PRO - XDSoft.net, n.d.)
react-draft-wysiwyg Gratis (React Draft Wysiwyg, n.d.)
2.1.5. Prototypes

Om te zien welke WYSIWYG editors om kunnen gaan met de HTML opmaak van de Scriban bestanden, heb ik voor de 4 meest passende editors een prototype gemaakt. Hieronder de resultaten van de prototypes.

Invoer Scriban bestand 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<p>
    Beste {{ first_name }},
</p>
<p>
    Je hebt een nieuw wachtwoord aangevraagd.<br />
    Als je geen nieuw wachtwoord heeft aangevraagd, dan kunt je deze mail negeren. Je kunt gewoon blijven inloggen met je normale inloggegevens.
</p>
<p>
    Je wachtwoord instellen kan via {{ reset_password_url }} of via de onderstaande knop:
</p>
<p>
    <a href="{{ reset_password_url }}" class="btn">Wachtwoord instellen</a>
</p>
Editor Behoudt HTML opmaak? Behoudt juiste tekstinhoud? Afbeelding HTML resultaat Afbeelding editor resultaat
Froala Editor resultaat editor
TinyMCE resultaat editor
CKEditor resultaat editor
Jodit-React resultaat editor

3. Resultaatanalyse deelvragen

3.1. Welke WYSIWYG editors zijn het meest populair?

Uit resultaten 2.1.1. en 2.1.2. blijk dat er veel verschillende WYSIWYG editors beschikbaar zijn. TinyMCE blijkt een van de meest populaire editors te zijn. Maar er zijn ook andere editors die goed scoren zoals Froala Editor, CKEditor en Editor.js.

3.2. Welke editors ondersteunen de features die nodig zijn voor het beheren van de Scriban bestanden?

Uit resultaat 2.1.3. blijkt dat de meeste editors de features ondersteunen die nodig zijn voor het beheren van de Scriban bestanden. De meeste editors ondersteunen React, HTML en uitbundige interactie voor aanpassingen. Er zijn echter ook editors die niet alle features ondersteunen. Zo ondersteunt Quill/React Quill geen uitbundige interactie voor aanpassingen en ondersteunt TipTap, Novel, BlockNote en react-draft-wysiwyg geen HTML.

3.3. Wat zijn de kosten van de WYSIWYG editors?

Uit resultaat 2.1.4. blijkt dat de kosten van de WYSIWYG editors variëren. De meeste editors bieden een gratis versie aan met beperkte functionaliteiten. Voor de volledige functionaliteiten moet je een betaalde licentie aanschaffen. De kosten van de editors variëren van gratis tot enkele honderden euro's per jaar. Vrijwel alle editors vereisen een licentie voor commercieel gebruik, waarbij de kosten afhankelijk zijn van de grootte van het bedrijf of het aantal gebruikers of domeinen waarop de editor gebruikt zal worden.

Froala Editor is een van de duurste opties om de markt, op het gebied van HTML editors, met een prijs van $719 tot $1,199 per jaar. TinyMCE is een van de goedkopere opties met een prijs van $67 tot $130 per maand.

3.4. Kunnen de editors omgaan met de HTML opmaak van de Scriban bestanden?

Uit resultaat 2.1.5. blijkt dat alle editors die getest zijn om kunnen gaan met de HTML opmaak van de Scriban bestanden. De editors behouden de HTML opmaak en de juiste tekstinhoud. De afbeeldingen laten zien dat de HTML opmaak correct wordt weergegeven in de editors.

Wel is te zien dat iedere tool de interactie op een andere manier aanpakt.

4. Conclusie

Op basis van de resultaten van het onderzoek kan geconcludeerd worden dat de meeste WYSIWYG editors geschikt zijn voor het beheren van Scriban vertalingsbestanden. De meeste editors ondersteunen React, HTML en uitbundige interactie voor aanpassingen. De kosten van de editors variëren van gratis tot enkele honderden euro's per jaar. De meeste editors vereisen een licentie voor commercieel gebruik, waarbij de kosten afhankelijk zijn van de grootte van het bedrijf of het aantal gebruikers of domeinen waarop de editor gebruikt zal worden.

Sommige editors lijken bedoeld voor andere doeleinden, zoals Novel, die een Notion-style WYSIWYG editor is met AI-powered autocompletions. TipTap en BlockNote lijken een soortgelijke doelgroep te hebben. react-draft-wysiwyg is een editor lijkt meer in de richting te liggen van een HTML editor, maar mist de ondersteuning voor HTML.

De editors die het meest geschikt lijken voor het beheren van Scriban vertalingsbestanden zijn Froala Editor, TinyMCE, CKEditor en Jodit. Alle editors zijn in staat om de HTML opmaak van de Scriban bestanden correct weer te geven. Froala Editor, CKEditor en TinyMCE zijn allemaal erg uitgebreid in de configuratie, het is makkelijk om de editor aan te passen naar de wensen van de gebruiker.

Uit dit onderzoek valt te concluderen dat Froala Editor, TinyMCE, CKEditor en Jodit allemaal goede editors zijn voor het beheren van Scriban bestanden. De verschillende tools hebben alle voor en nadelen op het gebied van kosten, gebruikersinteractie en configuratie mogelijkheden. Afhankelijk van wat er belangrijk is voor de gebruiker bij het bewerken van de Scriban bestanden zou hier een goede keuze in gemaakt kunnen worden.

5. Bronnen

  1. BlockNote - Javascript Block-Based React rich text editor. (n.d.). BlockNote. https://www.blocknotejs.org
  2. CKEditor.com. (n.d.). WYSIWYG HTML Editor with Collaborative Rich Text Editing. https://ckeditor.com
  3. Drake, A. (2024, December 1). Top 5 WYSIWYG Editors to supercharge your react Projects. Medium. https://blog.stackademic.com/top-5-wysiwyg-editors-to-supercharge-your-react-projects-2fc4b938245d
  4. Editor.js. (n.d.). https://editorjs.io
  5. Froala. (2024, October 20). Experience the Ease of Next Generation WYSIWYG HTML Editor. https://froala.com/wysiwyg-editor/demo
  6. Froala Editor Plans: your solution for web editing needs. (2024, November 19). Froala Editor. https://cart.froala.com
  7. Jodit Editor - XDSoft.net. (n.d.). https://xdsoft.net/jodit
  8. Jodit Editor PRO - XDSoft.net. (n.d.). https://xdsoft.net/jodit/pro
  9. Novel - Notion-style WYSIWYG editor with AI-powered autocompletions. (n.d.). https://novel.sh
  10. Pricing - BlockNote. (n.d.). BlockNote. https://www.blocknotejs.org/pricing
  11. Quill - Your powerful rich text editor. (n.d.). Quill. https://quilljs.com/
  12. React draft wysiwyg. (n.d.). https://jpuri.github.io/react-draft-wysiwyg/
  13. Scriban. (n.d.). GitHub - scriban/scriban: A fast, powerful, safe and lightweight scripting language and engine for .NET. GitHub. https://github.com/scriban/scriban
  14. Snappify. (n.d.). 6 Best WYSIWYG editors developers need to try right now (2024). https://snappify.com/blog/best-wysiwyg-editors
  15. Tiny Technologies Inc. (n.d.-a). Pricing | WYSIWYG HTML Editor | TinyMCE. TinyMCE. https://www.tiny.cloud/pricing
  16. Tiny Technologies Inc. (n.d.-b). The Most Advanced WYSIWYG HTML Editor | TinyMCE. TinyMCE. https://www.tiny.cloud/tinymce
  17. Tiptap. (n.d.). Tiptap Pricing - Choose your fit. https://tiptap.dev/pricing
  18. Tiptap. (2024, December 2). React | Tiptap Editor Docs. https://tiptap.dev/docs/editor/getting-started/install/react#page-title