7 Bester WYSIWYG HTML Editor Open Source

Es gibt zwei Arten von Code-Editoren: Einfacher textbasierter Editor und WYSIWYG (was Sie sehen, ist das, was Sie erhalten). In unserem vorherigen Artikel haben wir einige der besten besprochenOpen Source HTML Editor Hier geben Sie den Code manuell ein. Während es keine Probleme mit den textbasierten HTML-Editoren gibt, sind sie dennoch altmodisch. Und hier kommt Open Source für den WYSIWYG HTML-Editor ins Spiel. WYSIWYG HTML-Editoren bieten visuell basierte Optionen zum Erstellen einer Website ohne Programmierkenntnisse (denken Sie an die Wix-Anzeige, das ist wizzy-sig).

Der WYSIWYG-HTML-Editor bietet gegenüber den textbasierten Editoren mehrere Vorteile. Zunächst können Sie eine Website mit WYSIWYG-Editoren erstellen, auch wenn Sie nicht wissen, wie man codiert. Alles, was Sie tun müssen, ist, Elemente in den Editor zu ziehen und dort abzulegen. Wenn Sie fertig sind, kopieren Sie einfach den Code. Das Finden eines guten Open-Source-WYSIWYG-HTML-Editors kann jedoch mühsam sein. Hier kommen wir ins Spiel.

Lesen Sie auch: 50+ Open Source Android Apps, wenn Sie Google loswerden möchten

Bester WYSIWYG HTML Editor Open Source

1. Pell

Pell ist wahrscheinlich der kleinste und einfachste WYSIWYG-Editor, auf den Sie jemals stoßen werden. Es ist buchstäblich 1,38 kb groß!

Es bietet alle grundlegenden Funktionen und Formate wie Überschriften, Fett, Kursiv, Listen, Anführungszeichen, Links und Bilder. Weitere verfügbare Aktionen sind Einrückungen, hochgestellte Zeichen, tiefgestellte Zeichen sowie Name und Größe der Schriftarten. Nachdem Sie mit Pell geschrieben und formatiert haben, wird der gesamte HTML-Code ausgegeben, den Sie einfach kopieren und auf Ihrer Website oder Seite einfügen können.

Vorteile:

Kleinstes und leichtestes WYSIWYG
Keine Abhängigkeiten
Leicht anpassbar

Nachteile:

Keine ausgefallene HTML-Bearbeitung
Bilder nur über Links

Urteil:
In Anbetracht seiner Größe ist Pell ein überzeugendes Paket. Aber seien wir ehrlich, Sie können grundlegende HTML-Dateien nur mit den eingeschränkten Bearbeitungsoptionen erstellen. Wenn Sie also nach einem schnellen und leichten WYSIWYG-Editor suchen, der Open Source für einige sehr grundlegende Arbeiten ist, sollten Sie sich unbedingt Pell ansehen.

Holen Sie sich Pell

2. OpenWYSIWYG

OpenWYSIWYG ist ein browserübergreifender Rich-Text-HTML-Editor, der vollständig in JavaScript codiert ist. Durch einfaches Einfügen einiger Codezeilen können Sie alle drehen in den robusten WYSIWYG-HTML-Editor von OpenWYSIWYG. Die Benutzeroberfläche und die Bearbeitungsoptionen mit den Dropdown-Menüs sind denen eines Texteditors sehr ähnlich und Sie werden sich wie zu Hause fühlen. Neben allen grundlegenden Formatierungsoptionen bietet OpenWYSIWYG einen erweiterten Farbwähler mit 216 Webfarben zur Auswahl und ein leistungsstarkes Tabellenformatierungswerkzeug mit allen erdenklichen Optionen. Eine weitere großartige Sache bei OpenWYSIWYG ist, dass Sie zusammen mit allen visuellen Optionen immer noch könnenRoh-HTML-Code anzeigen und nehmen Sie Anpassungen direkt im Code vor. Nützlich, wenn Sie Ihre Codierungsfähigkeiten erlernen oder auffrischen möchten. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-2a8d34d0ca966deffc6441af9dbbe702-101381.jpg" alt="7 Bester WYSIWYG HTML Editor Open Source"> Vorteile: <ul> <li>Leistungsstarke Bearbeitungsumgebung</li> <li>Intuitive und einfache Benutzeroberfläche</li> <li>Farbwähler und umfangreiche Optionen zur Tabellenbearbeitung</li> </ul> Nachteile: <ul> <li>In einigen Jahren nicht aktualisiert</li> </ul> Urteil: OpenWYSIWYG HTML Editor Open Source ist in JavaScript geschrieben und sollte mit jeder anderen Web-Programmiersprache funktionieren. Wenn Sie nach etwas suchen, das etwas leistungsfähiger als Pell ist, um es in Ihre Webanwendung zu integrieren, ist dies eine großartige Option. Holen Sie sich OpenWYSIWYG <h3>3. TinyMCE (Community Edition)</h3> Der nächste Open-Source-HTML-WYSIWYG-Editor auf unserer Liste ist TinyMCE. Es ist auch vollständig in JavaScript geschrieben und bietet eine Benutzeroberfläche und Erfahrung wie die meisten Textverarbeitungsprogramme. Das macht es benutzerfreundlicher. TinyMCE ist nicht kostenlos, aber die Community Edition ist kostenlos und Open Source. Es enthält alle grundlegenden Bearbeitungsoptionen wie das Formatieren von Text, Listen, Tabellen sowie einige Bildbearbeitungsoptionen. Die Entwickler haben die Preise der Premium-Modelle entsprechend der Anzahl der Benutzer beibehalten. Einige der Premium-Funktionen umfassen Google Drive- und Microsoft Azure-Unterstützung, Erweiterungen, Rechtschreib- und Linkprüfung sowie technischen Support. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-35ef757e6374c689f5158bf25ea8b2c6-101381.jpg" alt="Wenn Sie bereits Programmiererfahrung haben und keine Zeit zum Lernen haben, können Sie mit einem Open Source-WYSIWYG-HTML-Editor absolut davonkommen. Es ist jedoch nicht so einfach, einen guten WYSIWYG-HTML-Editor zu finden, insbesondere wenn Sie ihn als kostenlose und Open Source-Datei benötigen."> Vorteile: <ul> <li>Erweiterungsunterstützung</li> <li>Dokumentenverwaltung</li> <li>Technischer Support</li> <li>Code-Editor im IDE-Stil für HTML</li> </ul> Nachteile: <ul> <li>Teuer</li> <li>Nicht vollständig Open Source</li> </ul> Urteil: TinyMCE mit seiner einfachen Integrationsoption, der benutzerfreundlichen Benutzeroberfläche und einer Vielzahl von Funktionen ist ein Komplettpaket. Wenn Sie nur den funktionsreichsten Open-Source-WYSIWYG-HTML-Editor möchten und etwas Geld ausgeben möchten, ist TinyMCE der richtige Weg. Außerdem bieten sie eine einmonatige kostenlose Testversion für ihr Pro-Modell an, die Sie jederzeit überprüfen können. Holen Sie sich die TinyMCE-Demo <h3>4. Jodit</h3> Jodit ist ein weiterer schneller und leichter Open-Source-Editor für den WYSIWYG-HTML-Editor, den Sie in Ihren Code einbetten und mit der Bearbeitung Ihrer Seite beginnen können. Es ist mit rund 100 KB recht leicht und wurde vollständig in TypeScript geschrieben. Aus diesem Grund benötigen Sie keine Abhängigkeiten oder Bibliotheken, um es auszuführen. Es kommt auch mit einer Drag-and-Drop-Oberfläche für das Bild. Sie können YouTube- oder Vimeo-Videos auch über einen Link anhängen oder einbetten. Das Beste, was ich an Jodit mag, ist, dass es mit einem kommt ACE-Editor Standardmäßig und mit einer einzigen Schaltfläche können Sie zwischen dem eigentlichen Code und dem Vorschaumodus wechseln. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d9f6924fe440a4261e0839c0c4b1c532-101381.jpg" alt="HTML, Wysiwyg, Bearbeitung, Optionen, Openurce, Editopenurce, Vorteile, Code, Text, Nachteile, Support, Editoren, basierend, Urteil, Bootstrap"> Vorteile: <ul> <li>Leicht, keine Bibliotheken</li> <li>Ziehen und loslassen</li> <li>ACE-Editor sofort einsatzbereit</li> <li>Technischer Support (bezahlt)</li> </ul> Urteil: Jodit bietet das Beste aus beiden Welten - einfachen visuellen WYSIWYG-Editor sowie das Bearbeiten von Rohcode. Wenn Sie jemand sind, der zumindest einige HTML-Kenntnisse hat, ist Jodit möglicherweise die beste Option für Sie. Holen Sie sich Jodit Spielplatz <h3>5. Summernote</h3> Summernote ist ein supereinfacher Open Source-WYSIWYG-Editor, der auf jQuery basiert und auf Bootstrap basiert. Da Bootstrap unterstützt wird, können Sie alle unterstützten Stile und Designs in Ihrem Editor von Bootswatch aus verwenden. Der Open Source des WYSIWYG HTML-Editors selbst verfügt über eine sehr saubere und minimale Benutzeroberfläche, und Sie können sogar Formatierungsoptionen nach Bedarf bearbeiten oder hinzufügen. Im Luftmodus von Summernote können Sie die gesamte Symbolleiste ausblenden und Ihr Dokument im laufenden Betrieb bearbeiten. Praktisch. Es kann auch automatisch alle Bilder in base64 konvertieren, sodass Sie überhaupt keine Bildverarbeitung durchführen müssen. Für mich ist das Beste an Summernote das fleißige Entwicklerteam, das ständig auf die Community hört und neue Funktionen hinzufügt. Beispiele hierfür sind die Unterstützung von Plugins und einer Lite- oder Vanilla-Version von Summernote, für die kein Bootstrap erforderlich ist. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d48b6067378fbbbed4746fb15a5e64e8-101381.jpg" alt="7 Bester WYSIWYG HTML Editor Open Source"> Vorteile: <ul> <li>Minimale Lernkurve</li> <li>Luftmodus für die Bearbeitung im laufenden Betrieb</li> <li>Unterstützt Bootstrap 3.x.x bis 4.x.x.</li> <li>Anzeigen und Bearbeiten in HTML</li> </ul> Nachteile: <ul> <li>Benötigt Bootstrap</li> </ul> Urteil: Summernote ist wahrscheinlich der funktionsreichste, aber kostenlosste und Open-Source-WYSIWYG-HTML-Editor auf dem Markt und wird ständig verbessert. Wenn Sie mit Bootstrap arbeiten, ist Summernote ein Kinderspiel, aber selbst wenn Sie dies nicht tun, sollte Summernote ausgecheckt werden. Holen Sie sich die Summernote-Demo <h3>6. Froala</h3> Froala ist ein wunderschöner WYSIWYG HTML Editor Open Source in JavaScript geschrieben. Es ist eines der beliebtesten Tools auf dieser Liste und seine Beliebtheit bei Entwicklern kann auf seine einfache Integration und sein übersichtliches Design zurückgeführt werden. Froala ist an sich ein sehr leistungsfähiger Editor, und die Vielzahl der Plugins hat sich nur noch vergrößert. Einige von ihnen enthalten einen erweiterten Bildeditor, Emoticons und eine Rechtschreibprüfung. Sie können sogar ganz einfach Ihr eigenes Plugin erstellen. Auf alle Tools kann auch mit dem Inline-Editor zugegriffen werden, was äußerst praktisch ist. Wie TinyMCE ist Froala in vielen Geschmacksrichtungen erhältlich, aber auch die kostenlose Version bietet jede Menge Punsch. Der einzige Unterschied besteht darin, dass Sie nicht den vollständigen Quellcode und technischen Support erhalten. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-5a89ec944a7b7318dad29d4cbe38303c-101381.jpg" alt="7 Bester WYSIWYG HTML Editor Open Source"> Vorteile: <ul> <li>Leichter, leistungsstarker Editor</li> <li>Inline-Bearbeitung</li> <li>Fülle von Plugins</li> </ul> Nachteile: <ul> <li>Nicht ideal für mobile Hybrid-Apps / Websites</li> </ul> Urteil: Froala ist schnell und leicht mit einer schönen Benutzeroberfläche, schafft es aber dennoch, alle Funktionen bereitzustellen, nach denen Sie in einem WYSIWYG-HTML-Editor suchen könnten. Wenn Sie ohne den Quellcode und die Unterstützung in Ordnung sind, wird Ihnen die kostenlose Version gut dienen, sonst wissen Sie, was zu tun ist. Holen Sie sich Froala <h3>7. CKEditor</h3> CKEditor ist bei Benutzern sehr beliebt, da es sich um einen wunderschön gestalteten Open-Source-WYSIWYG-HTML-Editor handelt. Es enthält über 21.000 Tests, mit denen Sie HTML in einem benutzerfreundlichen Layout lernen können. Eine detaillierte Dokumentation hilft Ihnen dabei, Ihre Fähigkeiten weiter zu verbessern. Einige der größten Namen der Technologiebranche vertrauen darauf. Beachten Sie, dass Sie die Copyright-Hinweise in jeder Datei intakt halten und die Datei LICENSE.md im CKEditor-Installationsordner nicht löschen müssen. Dies ist kein Nachteil, insbesondere wenn Sie im Gegenzug so viel Wert erhalten. Es gibt Unterstützung für Plugins, @mention, Emojis, ältere Browser und sogar für die automatische Vervollständigung, was viel Zeit sparen kann. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-f7cf4bbbed846085854eb05d6236462e-101381.png" alt="Wenn Sie bereits Programmiererfahrung haben und keine Zeit zum Lernen haben, können Sie mit einem Open Source-WYSIWYG-HTML-Editor absolut davonkommen. Es ist jedoch nicht so einfach, einen guten WYSIWYG-HTML-Editor zu finden, insbesondere wenn Sie ihn als kostenlose und Open Source-Datei benötigen."> Vorteile: <ul> <li>Detaillierte Dokumentation, Tests, Fragen</li> <li>Zusammenarbeiten und @mention</li> <li>Autocomplete</li> </ul> Nachteile: <ul> <li>Lizenzdatei aufbewahren</li> </ul> Holen Sie sich CKEditor Ehrungen: 1. MediumEditor ist ein Open Source-Klon des Inline-WYSIWYG-Editors für Medium.com. Es ist kinderleicht, leicht und ohne Abhängigkeiten. Obwohl es nicht so leistungsfähig ist, könnte es als großartiges Inline-Bearbeitungswerkzeug für Text oder textbezogene Dokumente fungieren. 2. Mit dem HTML-Vorschau-Paket von Atom können Sie einen Vorschaufenster hinzufügen, in dem Sie eine Live-Vorschau Ihres HTML-Codes anzeigen können. Dies kann für Entwickler sehr hilfreich sein. Dies ist definitiv nichts für Anfänger, aber es ist ein großartiges Paket, das Sie zu Ihrem vorhandenen Workflow hinzufügen können, wenn Sie bereits in HTML programmieren. <h3>Bester WYSIWYG HTML Editor Open Source</h3> Während HTML immer noch die leistungsfähigere Methode zum Erstellen einer Website ist und damit viel komplexere Dinge möglich sind, haben sich die WYSIWYG-Redakteure einen eigenen Platz gesichert. Das Erlernen des Codierens erfordert viel Zeit und Energie und ist möglicherweise nicht für alle sinnvoll. Wenn Sie bereits Programmiererfahrung haben und keine Zeit zum Lernen haben, können Sie mit einem Open Source-WYSIWYG-HTML-Editor absolut davonkommen. Lesen Sie auch: <a href="/7-best-open-source-browser-for-android-2018-100540" target="_blank">7 Bester Open Source Browser für Android (2018)</a>