Entwickler haben in den letzten Jahren intensiv daran gearbeitet, Benutzern die Möglichkeit zu geben, Text zu formatieren, ohne zusätzlichen Code erlernen zu müssen. Und das ist nicht umsonst, sie haben bereits erhebliche Fortschritte gemacht. Wir stellen Ihnen die 10 am häufigsten verwendeten WYSIWYG-Editoren vor. Wir hoffen, dass Sie etwas für Ihre eigenen Projekte finden.
01. NicEdit
NicEdit ist eine hervorragende Alternative zu großen und umständlichen Editoren. Es enthält alle erforderlichen Funktionen, lässt sich aber dennoch sehr einfach in eine Website integrieren.
02. TinyMCE
TinyMCE ist ein kostenloser Javascript-HTML-WYSIWYG-Editor. Es lässt sich leicht in Ihre Website integrieren und bietet zahlreiche Anpassungs- und Darstellungsoptionen. TinyMCE ist heute wahrscheinlich der „vollständigste“ Editor in unserer Auswahl. Fast MSWord.
03.CKEditor
CKeditor ist der neue FCKEditor, der schon früh den Titel Marktführer errungen hat. Der Editor wurde auf dieser Grundlage entwickelt und zielt darauf ab, die im FCKEditor aufgetretenen Probleme zu beheben. Das Ergebnis ist ein hochproduktiver WYSIWYG-Editor, der alle Funktionen bietet, die Sie normalerweise in MSWord oder Open Office finden.
04. YUI-Rich-Text-Editor
YUI Rich Text Editor ist eine grafische Benutzeroberfläche von Yahoo, die ein normales Texteingabefeld in einen vollwertigen WYSIWYG-Editor verwandelt. Die Anwendung wird in verschiedenen Versionen mit unterschiedlichen Eigenschaften und Inhalten bereitgestellt. Aber mit jeder Version erhalten Sie alle für den Editor notwendigen Funktionen.
Markitup ist ein jQuery-Plugin, mit dem Sie ein normales Texteingabefeld in einen Tags- und Formatierungseditor umwandeln können. HTML, Wiki und BBcode sind nur einige der Angebote des Plugins. Markitup ist kein WYSIWYG-Editor, aber das macht es nicht schlimmer, da es Ihnen alle Funktionen bietet, die Sie benötigen.
06. FreeTextBox
FreeTextBox ist ein HTML-Editor, der speziell für ASP.NET entwickelt wurde. Das Erscheinungsbild des Editors ähnelt stark dem von Microsoft Word. Die kostenlose Version bietet nicht wirklich viele Funktionen, aber alles, was Sie brauchen.
07.MuhBearbeitbar
WYSIWYG-Editoren bieten mittlerweile größtenteils Plugins für die beliebte jQuery-Bibliothek und in selteneren Fällen Mootools an. MooEditable füllt diese Lücke gut, indem es eine einfache, aber sehr effektive Javascript-Bibliothek ist. Wenn Sie ein Mootools-Fan sind, werden Sie damit keine Probleme haben.
08. OpenWysiwyg?
OpenWysiwyg ist ein browserübergreifender vollwertiger Editor mit allen erforderlichen Funktionen. Es enthält sogar attraktive Dropdown-Menüs und Schaltflächen. Leider wird Chrome dies nicht unterstützen.
09. Spaw Editor – die Seite ist tot
Spaw Editor ist ein WYSIWYG-Editor, der es Website-Entwicklern ermöglicht, Standardtextfelder durch einen kontrollierten HTML-Editor zu ersetzen, mit einer breiten Palette an Optionen, mehreren Sprachen und der Möglichkeit, das Erscheinungsbild zu ändern.
10.jHtmlArea
jHtmlArea ist ein weiterer WYSIWYG-Texteditor, der ein Plugin für Jquery ist. Das Ziel des Plugins ist Einfachheit und Benutzerfreundlichkeit. Es enthält alle erforderlichen Funktionen. Sie können das Erscheinungsbild, die Funktionen und die Sprachen anpassen.
Ich war auf der Suche nach einem visuellen Editor, der optisch ansprechend ist, sodass ich das Design nicht wiederholen und Zeit verschwenden muss. Dabei habe ich mehrere visuelle Editoren gefunden und getestet. Die Installation visueller Editoren auf einer Website ist ein einfaches Aktionssystem. Sie müssen eine Reihe von Skriptanfragen in das HEAD-Tag einfügen (nachdem Sie den gesamten Ordner mit dem visuellen Editor auf den Server hochgeladen haben). Die heruntergeladenen Dateien stellen normalerweise eine Demoversion zur Verfügung. Aus dem Code dieser Seite lassen sich die Namen der erforderlichen Skripte leicht ermitteln. Hier ist ein kleiner Code, der in der BODY-Seite zur direkten Verwendung des Editors verwendet wird. Wir werden es an der Stelle im HTML-Formular platzieren, an der wir es benötigen.
Visuelle Editoren werden in Typen mit unterschiedlicher Verarbeitung unterteilt. So bin ich auf visuelle Editoren gestoßen, die auf jQuery, MooTools, ActiveX und nur JavaScript basieren.
Visuelle Editoren mit MooTools
Ich bin auf einige sehr interessante visuelle Editoren gestoßen, die auf dieser Technologie basieren. Aufgrund der Inkompatibilität mit jQuery-Skripten, die auf der Website bereits für andere Zwecke verwendet wurden, setzte ich die Suche nach etwas Universellerem fort.
Ein Beispiel für den visuellen Editor MooEditable mit MooTools
Zwischen Tags eingefügte Skripte:
window.addEvent("load", function())( $("textarea-1").mooEditable(); // Post senden $("theForm").addEvent("submit", function(e)( alarm( $ ("textarea-1").value); return true;
Verwendung in
Textbereich 1 – Hier ist der Text, der in einem visuellen Editor geschrieben wurde –
Hier wird das standardmäßige TEXTAREA-Formular-Tag verwendet, wodurch das Eingabefeld auch dann funktioniert, wenn es deaktiviert ist
Benutzer-JavaScript (obwohl nicht alle Optionen des visuellen Editors funktionieren).
Laden Sie den visuellen Editor MooEditable herunter
Beispiel ggEdit, ein visueller Editor basierend auf MooTools
In FireFox funktionierte dieser visuelle Editor („ggEdit“) überhaupt nicht. Als Mozilla-Benutzer passte das überhaupt nicht zu mir.
Allerdings gefiel mir die Oberfläche eines solchen visuellen Editors (Beispiel „ggEdit“ (Quelle kann heruntergeladen werden)).
Visuelle Editoren basierend auf jQuery
Dieser visuelle Editor (WKRTE) wäre wahrscheinlich nett, wenn die modularen Fenster (Bilder einfügen, Links) nicht außerhalb des Bildschirmrahmens auftauchen würden
Beispiel für WKRTE, einen jQuery-basierten visuellen Editor:
Bemerkenswert ist, dass die Hauptskripte nicht in ... eingefügt werden, wo es sich hauptsächlich um Stilanforderungen (CSS) handelt:
Die Hauptskripte werden vor dem schließenden Tag angezeigt:
--Einige Inhalte-- $(document).ready(function() ( var arr = $(".wkrte-1").rte(( width: 720, height: 520, Controls_rte: rte_toolbar, Controls_html: html_toolbar )) ; ));
Visueller Editor AJAX, jQuery, JavaScript
Dieser visuelle Editor („CKEditor“) nutzt in seinen Anwendungsfällen eine umfangreiche Palette an Technologien. Obwohl AJAX hier eher Hilfsfunktionen als Schlüsselfunktionen des visuellen Editors ausführt. Hauptbibliothek: jQuery, JavaScript.
Ich habe keine strengen Tests zur browserübergreifenden Kompatibilität durchgeführt, aber es funktioniert großartig in meinen Browsern, was mich wirklich glücklich macht. Ein zusätzliches Plus ist die russische Sprache!
Skripte: können unterschiedlich sein. Ein Beispiel:
Hauptbibliothek in HEAD:
--Einige Inhalte-- //
Sicherlich sind Sie schon oft auf visuelle Editoren gestoßen, mit denen Sie das Erscheinungsbild von Seiten oder einigen Nachrichten beispielsweise in einem Forum ganz bequem gestalten können. Und zwar nicht mit BB-Codes, sondern sofort mit einem konkreten Ergebnis. Es gibt eine ganze Reihe dieser Editoren im Internet. Eines der beliebtesten ist TinyMCE. Ich bin jedoch ein Befürworter meiner eigenen Skripte und glaube, dass es für jede Aufgabe eine eigene Lösung geben sollte und keine universelle. Daher erkläre ich Ihnen in diesem Artikel, wie Sie einen visuellen Editor in JavaScript erstellen.
Hier ist ein ziemlich gut kommentierter Code:
// Bearbeitungsschaltflächen anzeigen
document.write("");
document.write("");
document.write("
");
document.write(""); // Einen Iframe hinzufügen
/* Je nach Browser erhalten wir Zugriff auf den erstellten Frame */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.document;
/* Erstelle den Code für eine leere HTML-Seite */
iHTML = "";
iDoc.open(); // Öffne den Rahmen
iDoc.write(iHTML); // Den geschriebenen Code zum Frame hinzufügen
iDoc.close(); // Rahmen schließen
iDoc.designMode = "on"; // Frame-Bearbeitungsmodus aktivieren
/* Funktionen zum Festlegen des Erscheinungsbilds des ausgewählten Textes
Vollständiger Satz möglicher Befehle: http://javascript.itsoft.ru/execcom/execCommands.html */
Funktion setBold() (
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
Funktion setItal() (
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
Funktion save() (
/* Speichern des HTML-Codes im versteckten Feld, damit Sie den resultierenden HTML-Code später an den Skript-Handler übergeben können */
document.getElementById("content").value = iDoc.body.innerHTML;
return true;
}
Auf den ersten Blick erscheint der Code sehr komplex. Und so ist es auch, aber wenn man es in seinen Grundelementen betrachtet, dann gibt es nichts Kompliziertes. Es gibt ein reguläres Formular und ein verstecktes Feld, in dem der im Editor generierte HTML-Code gespeichert wird. Der Editor selbst ist ein regulärer Frame, also eine reguläre HTML-Seite, in die wir Text schreiben können (designMode = „on“). Und verschiedene Formatierungen werden mit der Methode execCommand() erstellt, die den im Parameter angegebenen Befehl ausführt. Und ich denke, es wird Ihnen nicht schwer fallen, neue Schaltflächen zu erstellen und ihnen ähnliche Handler hinzuzufügen.
In diesem Skript gibt es nichts Überflüssiges, nur die wichtigsten und grundlegendsten Dinge, und Sie können es als Grundlage für die Erstellung Ihres eigenen visuellen Editors in JavaScript verwenden, in dem es nichts Überflüssiges gibt, sondern nur das, was Sie brauchen.
Als ich einmal einen WYSIWYG-Editor brauchte, erinnerte ich mich daran, wie er aussah und welche Funktionen er hatte, konnte mich aber nicht an den Namen erinnern. Nach 45 Minuten habe ich es endlich gefunden ... Dann habe ich es mir zur Aufgabe gemacht, vielen, auch mir selbst, zu helfen: eine konsolidierte Liste aller etwas bekannteren WYSIWYG-Editoren zu erstellen.
Einleitung Dieses Thema ist eine umfangreiche Liste visueller Editoren, die fast oder teilweise für den Einsatz geeignet sind. Mein Ziel war es, vorhandene, über das Internet verstreute Daten zu organisieren.TinyMCE
Es ist einer der gebräuchlichsten visuellen Editoren und verfügt über eine bemerkenswerte Funktionalität. Es sind viele Add-ons und viele Plugins standardmäßig installiert.
(Browser: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Offizielle Website | Demo]CKeditor
Vollständiges Analogon von TinyMCE.
[Offizielle Website]CLEditor
Ein einfacher visueller Editor, der nicht viele Funktionen bietet. Aber es ist ganz gut gemacht, alle Funktionen sind effizient umgesetzt.
(Browser: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Offizielle Website]NicEdit
Der Editor ist CLEditor sehr ähnlich. Verfügt über Standardfunktionalität.
(Browser: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Offizielle Website]elRTE
Sehr hochwertiger visueller Editor. Verfügt über eine breite Funktionalität. Hergestellt in sehr hoher Qualität.
(Browser: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome)
[Offizielle Website | Demo ]Spaw
Ein sehr durchschnittlicher visueller Editor. Verfügt über Standardfunktionalität.
[Offizielle Website | Demo]Xinha
Ein guter visueller Editor zeichnet sich durch viele integrierte Aktionen aus. Das heißt, es wird nicht schwierig sein, ihn an Ihre Bedürfnisse anzupassen.
(Browser: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Offizielle Website | Demo ]Imperavi (kostenpflichtig)
Ganz netter Editor, die Funktionalität ist nicht so toll, aber völlig ausreichend. Beim Übergang von HTML zum visuellen Editor und zurück treten eine Reihe von Fehlern auf. (Ausrichtungen werden entfernt) Es ist wichtig zu beachten, dass Imperavi als Plugin für JQuery funktioniert.
Es gibt eine gute Dokumentation.
(Browser: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome)
[Offizielle Website | Demo]Markitup
Markitup ähnelt eher einem praktischen HTML-Editor, der eher für einen Profi als für einen durchschnittlichen Benutzer geeignet ist. Aber wenn Sie sich mit HTML auskennen, kann es sehr praktisch sein.
(Browser: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome)
[Offizielle Website | Demo]Aloha Editor
Kein schlechter Editor, sehr praktisch. Es gibt jedoch einen großen Nachteil, der fast alle Vorteile in den Schatten stellt – die Weigerung, alte und nicht ganz so alte Browser zu unterstützen (es sind nur die neuesten Browserversionen verfügbar).
(Browser: HTML5-Unterstützung erforderlich, Opera nicht unterstützt)
[Offizielle Website | Demo]Mercury-Editor
Mercury ist eine komplette Webseite und kann zum Bearbeiten einer gesamten Seite oder einzelner spezifischer Bereiche verwendet werden. Es unterstützt die Vorschau bearbeiteter Inhalte sowie das Posten von Links, Bildern, Videos und Tabellen. Das Hochladen von Dateien kann über die Drag-and-Drop-Schnittstelle erfolgen.
Der Editor unterstützt auch die Zusammenarbeit mehrerer Personen. Mercury kann als eigenständiges Rails oder durch Einbettung in den Seitencode installiert werden. (JQuery erforderlich)
Und der Nachteil ist, dass nur die folgenden Browser unterstützt werden: Chrome 10+, Safari 5+, Firefox 4+.
[Offizielle Website | Demo auf der Startseite]YUI Rich Text Editor
Visueller Editor von Yahoo. Wie sdevalex zu Recht bemerkte, einer der besten visuellen Editoren. Es verfügt über umfassende Funktionalität und wird von den meisten Browsern unterstützt.
[Demo]MooEditierbar
Der Funktionsumfang ist sehr eingeschränkt, mehr ist aber manchmal auch nicht nötig.
[Demo]OpenWysiwyg
Browserübergreifender vollwertiger Editor mit allen benötigten Funktionen. Es enthält sogar attraktive Dropdown-Menüs und Schaltflächen. Leider wird Chrome dies nicht unterstützen.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ und Netscape 7+)