7 Beste WYSIWYG HTML-editor Open Source

Er zijn twee soorten code-editors: een eenvoudige tekstgebaseerde editor en WYSIWYG (wat je ziet is wat je krijgt). In ons vorige artikel hebben we enkele van de beste besprokenOpen Source HTML-editor waar u de code handmatig invoert. Hoewel er geen problemen zijn met de op tekst gebaseerde HTML-editors, zijn ze niettemin ouderwets. En dat is waar WYSIWYG HTML-editor open source om de hoek komt kijken. WYSIWYG HTML-editors bieden visueel gebaseerde opties om een website te bouwen zonder enige programmeerkennis (denk aan de Wix-advertentie, dat is wizzy-sig)

WYSIWYG HTML-editor heeft verschillende voordelen ten opzichte van tekstgebaseerde editors. Om te beginnen kunt u een website bouwen met WYSIWYG-editors, zelfs als u niet weet hoe u moet coderen. Het enige dat u hoeft te doen, is items in de editor slepen en neerzetten en als u klaar bent, kopieert u gewoon de code. Het vinden van een goede open source WYSIWYG HTML-editor kan echter een hele klus zijn. Dit is waar we binnenkomen.

Lees ook: 50+ open source Android-apps wanneer u Google wilt dumpen

Beste WYSIWYG HTML Editor Open Source

1. Pell

Pell is waarschijnlijk de kleinste en eenvoudigste WYSIWYG-editor die u ooit zult tegenkomen. Het is letterlijk 1,38 kb groot!

Het biedt alle basisfunctionaliteiten en formaten zoals koppen, vet, cursief, lijsten, aanhalingstekens, links en afbeeldingen. Andere beschikbare acties zijn onder meer inspringen, superscript, subscripts en lettertypenaam en -grootte. Nadat u klaar bent met schrijven en formatteren met Pell, zal het de volledige HTML-code uitvoeren die u vervolgens eenvoudig kunt kopiëren en plakken op uw website of pagina en u bent klaar om te gaan.

Voordelen:

Kleinste en lichtste WYSIWYG
Geen afhankelijkheden
Gemakkelijk aanpasbaar

Nadelen:

Geen dure HTML-bewerking
Afbeeldingen alleen via links

Vonnis:
Gezien de grootte, maakt Pell een aantrekkelijk pakket. Maar laten we eerlijk zijn, u kunt alleen eenvoudige HTML-bestanden krijgen met de beperkte bewerkingsopties. Dus als je iemand bent die op zoek is naar een snelle en lichtgewicht WYSIWYG-editor die open source is voor wat heel basaal werk, kijk dan zeker eens naar Pell.

Koop Pell

2. OpenWYSIWYG

OpenWYSIWYG is een cross-browser rich-text HTML-editor die volledig in JavaScript is gecodeerd. Door gewoon een paar regels code te kopiëren en plakken, kunt u elke in OpenWYSIWYG's robuuste WYSIWYG HTML-editor. De gebruikersinterface en bewerkingsopties met de vervolgkeuzemenu's lijken erg op die van elke teksteditor en u zult zich meteen thuis voelen. Afgezien van alle basisopmaakopties, beschikt OpenWYSIWYG over een verbeterde kleurenkiezer met 216 webkleuren om uit te kiezen en een krachtig hulpmiddel voor het opmaken van tabellen met elke optie die je maar kunt bedenken. Een ander groot voordeel van OpenWYSIWYG is dat je, naast alle visuele opties, nog steeds kuntbekijk onbewerkte HTML-code en maak aanpassingen rechtstreeks in de code. Handig als u uw codeervaardigheden wilt leren of opfrissen. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-2a8d34d0ca966deffc6441af9dbbe702-101381.jpg" alt="7 Beste WYSIWYG HTML-editor Open Source"> Voordelen: <ul> <li>Krachtige bewerkingsomgeving</li> <li>Intuïtieve en gemakkelijke gebruikersinterface</li> <li>Kleurkiezer en uitgebreide opties voor het bewerken van tabellen</li> </ul> Nadelen: <ul> <li>Niet bijgewerkt in een paar jaar</li> </ul> Vonnis: Omdat OpenWYSIWYG HTML-editor open source is geschreven in JavaScript, zou het moeten werken met elke andere webprogrammeertaal. Als u op zoek bent naar iets krachtigers dan Pell om in uw webtoepassing op te nemen, is dit een geweldige optie. Download OpenWYSIWYG <h3>3. TinyMCE (Community-editie)</h3> De volgende open source HTML WYSIWYG-editor op onze lijst is TinyMCE. Het is ook volledig in JavaScript geschreven en biedt een gebruikersinterface en ervaring zoals de meeste tekstverwerkers. Dat maakt het gebruiksvriendelijker. TinyMCE is niet gratis, maar de Community-editie is de gratis en open-source versie. Het wordt geleverd met alle basisbewerkingsopties zoals het opmaken van tekst, lijsten, tabellen en ook enkele opties voor het bewerken van afbeeldingen. De ontwikkelaars hebben de prijsstelling van de premium-modellen gehandhaafd op basis van het aantal gebruikers. Enkele van de premiumfuncties zijn ondersteuning voor Google Drive en Microsoft Azure, extensies, spellingscontrole en linkcontrole en technische ondersteuning. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-35ef757e6374c689f5158bf25ea8b2c6-101381.jpg" alt="Als je eerdere ervaring hebt met programmeren en geen tijd hebt om het te leren, kun je absoluut wegkomen door een open source WYSIWYG HTML-editor te gebruiken. Het vinden van een goede WYSIWYG HTML-editor is echter niet zo eenvoudig, vooral als u deze als gratis en open source nodig heeft."> Voordelen: <ul> <li>Extensie-ondersteuning</li> <li>Bestandsbeheer</li> <li>Technische ondersteuning</li> <li>IDE-stijl code-editor voor HTML</li> </ul> Nadelen: <ul> <li>Prijzig</li> <li>Niet volledig open source</li> </ul> Vonnis: TinyMCE met zijn eenvoudige integratieoptie, gebruiksvriendelijke gebruikersinterface en overvloed aan functies, is een compleet pakket. Als je gewoon de meest veelzijdige WYSIWYG HTML-editor open source wilt en het goed vindt om wat geld uit te geven, dan is TinyMCE de juiste keuze. Ze bieden ook een gratis proefperiode van een maand voor hun Pro-model, dat u altijd kunt bekijken. Download de TinyMCE-demo <h3>4. Jodit</h3> Jodit is een andere snelle en lichtgewicht WYSIWYG HTML-editor open source-editor die u in uw code kunt insluiten en kunt beginnen met het bewerken van uw pagina. Het is vrij licht met een grootte van ongeveer 100 KB en is volledig in TypeScript geschreven. Daarom heb je geen afhankelijkheden of bibliotheken nodig om het uit te voeren. Het wordt ook geleverd met een drag-n-drop-interface voor de afbeelding. U kunt ook YouTube- of Vimeo-video's via een link bijvoegen of insluiten. Het beste dat ik leuk vind aan Jodit is dat het wordt geleverd met een ACE-editor out-of-the-box en met een enkele knop kunt u schakelen tussen de daadwerkelijke code en de voorbeeldmodus. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d9f6924fe440a4261e0839c0c4b1c532-101381.jpg" alt="html, wysiwyg, bewerken, opties, openurce, editopenurce, pro's, code, tekst, nadelen, ondersteuning, editors, gebaseerd, oordeel, bootstrap"> Voordelen: <ul> <li>Lichtgewicht, geen bibliotheken</li> <li>Sleepen en plaatsen</li> <li>ACE-editor uit de doos</li> <li>Technische ondersteuning (betaald)</li> </ul> Vonnis: Jodit biedt het beste van twee werelden - eenvoudige visuele WYSIWYG-editor en het bewerken van onbewerkte code. Als u iemand bent die op zijn minst enige kennis van HTML heeft, is Jodit misschien de beste optie voor u. Koop Jodit Playground <h3>5. Zomernoot</h3> Summernote is een supereenvoudige WYSIWYG-editor open source gebouwd op jQuery en gebaseerd op Bootstrap. Omdat het Bootstrap ondersteunt, kunt u alle ondersteunde stijlen en thema's in uw editor van Bootswatch gebruiken. De open source van de WYSIWYG HTML-editor zelf heeft een zeer schone en minimale gebruikersinterface en u kunt zelfs opmaakopties naar behoefte bewerken of toevoegen. Met de Air-modus van Summernote kunt u de hele werkbalk verbergen en uw document direct bewerken. Handig. Het kan ook automatisch alle afbeeldingen naar base64 converteren, zodat u helemaal geen afbeeldingen hoeft te verwerken. Voor mij is het beste van Summernote het hardwerkende team van ontwikkelaars erachter, die altijd naar de community luisteren en nieuwe functies toevoegen. Voorbeelden zijn ondersteuning voor plug-ins en een lite- of vanilla-versie van Summernote waarvoor geen Bootstrap nodig is. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d48b6067378fbbbed4746fb15a5e64e8-101381.jpg" alt="7 Beste WYSIWYG HTML-editor Open Source"> Voordelen: <ul> <li>Minimale leercurve</li> <li>Air Mode voor on-the-fly bewerken</li> <li>Ondersteunt Bootstrap 3.x.x tot 4.x.x</li> <li>Bekijk en bewerk in HTML</li> </ul> Nadelen: <ul> <li>Bootstrap vereist</li> </ul> Vonnis: Summernote is waarschijnlijk de meest veelzijdige maar gratis en open source WYSIWYG HTML-editor die op de markt verkrijgbaar is en wordt voortdurend verbeterd. Als u met Bootstrap werkt, is Summernote een goed idee, maar zelfs als u dat niet bent, verdient Summernote het om uitgecheckt te worden. Download de Summernote-demo <h3>6. Froala</h3> Froala is een prachtige WYSIWYG HTML-editor open source geschreven in JavaScript. Het is een van de meer populaire tools op deze lijst en zijn populariteit bij ontwikkelaars kan worden toegeschreven aan de eenvoudige integratie en het strakke ontwerp. Froala is op zichzelf een zeer krachtige editor en het grote aantal plug-ins is alleen maar groter geworden. Sommigen van hen bevatten een geavanceerde afbeeldingseditor, emoticons, spellingcontrole en het is eenvoudig om zelfs uw eigen plug-in te maken. Alle tools zijn ook toegankelijk met de inline editor, wat erg handig is. Net als TinyMCE is Froala verkrijgbaar in veel smaken, maar zelfs de gratis versie biedt veel punch. Het enige verschil is dat u niet de volledige broncode en technische ondersteuning krijgt. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-5a89ec944a7b7318dad29d4cbe38303c-101381.jpg" alt="7 Beste WYSIWYG HTML-editor Open Source"> Voordelen: <ul> <li>Lichtgewicht krachtige editor</li> <li>Inline bewerken</li> <li>Een overvloed aan plug-ins</li> </ul> Nadelen: <ul> <li>Niet geweldig voor mobiele hybride app / website</li> </ul> Vonnis: Froala is snel en lichtgewicht met een prachtige gebruikersinterface, maar slaagt er toch in om alle functies te bieden waarnaar u op zoek bent in een WYSIWYG HTML-editor. Als het goed gaat zonder de broncode en ondersteuning, zal de gratis versie je prima van dienst zijn, anders weet je wat je moet doen. Koop Froala <h3>7. CKEditor</h3> CKEditor is enorm populair bij gebruikers omdat het een prachtig ontworpen open source WYSIWYG HTML-editor is. Het wordt geleverd met meer dan 21.000 tests om u te helpen HTML te leren in een vriendelijke lay-out. Gedetailleerde documentatie is er om u te helpen uw vaardigheden verder aan te scherpen. Enkele van de grootste namen in de technische industrie vertrouwen erop. Merk op dat u de copyrightvermeldingen in elk bestand intact moet houden en niet het bestand LICENSE.md in de installatiemap van CKEditor moet verwijderen. Dat is geen nadeel, zeker niet als je er zoveel waarde voor terugkrijgt. Er is ondersteuning voor plug-ins, @mention, emoji's, oudere browsers en zelfs autocomplete, wat veel tijd kan besparen. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-f7cf4bbbed846085854eb05d6236462e-101381.png" alt="Als je eerdere programmeerervaring hebt en geen tijd om te leren, kun je absoluut wegkomen door een open source WYSIWYG HTML-editor te gebruiken. Het vinden van een goede WYSIWYG HTML-editor is echter niet zo eenvoudig, vooral als u deze als gratis en open source nodig heeft."> Voordelen: <ul> <li>Gedetailleerde documentatie, tests, vragen</li> <li>Samenwerken en @vermelding</li> <li>Automatisch aanvullen</li> </ul> Nadelen: <ul> <li>Bewaar het licentiebestand</li> </ul> Krijg CKEditor Eervolle vermeldingen: 1. MediumEditor is een open source kloon van de inline WYSIWYG-editor voor Medium.com. Het is doodeenvoudig, lichtgewicht en wordt geleverd zonder enige afhankelijkheid. Hoewel het niet zo krachtig is, zou het kunnen functioneren als een geweldige inline bewerkingstool voor tekst of tekstgerelateerde documenten. 2. Met het HTML-voorbeeldpakket van Atom kunt u een voorbeeldvenster toevoegen waarin u een live voorbeeld van uw HTML-code kunt zien, wat erg handig kan zijn voor ontwikkelaars. Hoewel dit zeker niet voor beginners is, is het een geweldig pakket om toe te voegen aan uw bestaande workflow als u al programmeert in HTML. <h3>Beste WYSIWYG HTML Editor Open Source</h3> Hoewel HTML nog steeds de krachtigere manier is om een website te bouwen en er veel ingewikkelder dingen mee mogelijk zijn, hebben WYSIWYG-editors een eigen plek veroverd. Leren coderen vereist veel tijd en energie en is misschien niet voor iedereen logisch. Als je eerdere ervaring hebt met programmeren en geen tijd hebt om het te leren, kun je absoluut wegkomen door een open source WYSIWYG HTML-editor te gebruiken. Lees ook: <a href="/7-best-open-source-browser-for-android-2018-100540" target="_blank">7 Beste open source-browser voor Android (2018)</a>