Mit Squire, einem Lightweight HTML5 Rich Text Editor

Was Sie erstellen werden

Was ist Knappe??

Squire ist ein extrem leichter HTML5-Rich-Text-Editor, der am besten für die umfangreichen Eingabeformulare Ihrer Anwendungen und die einfache Dokumenterstellung geeignet ist. Sie bietet Browser-übergreifende Unterstützung, vermeidet jedoch bewusst die Komplexität der Unterstützung älterer Browser. Es funktioniert am besten mit Opera 10, Firefox 3.5, Safari 4, Chrome 9 und IE8.

Squire ist nicht zum Erstellen und Bearbeiten von WYSIWYG-Webseiten gedacht. Für viele Rich-Text-Eingaben und Webanwendungen ist Squire jedoch genau das, was Sie brauchen. Es gibt die Kraft ohne Aufblasen. Es ist auch MIT für die flexible Wiederverwendung lizenziert.

In diesem Tutorial zeige ich Ihnen, wie Sie Squire herunterladen und Beispieleingabeformulare damit erstellen. Wenn Sie Squire in Aktion sehen möchten, besuchen Sie die Demo.

Woher kam Squire??

Das FastMail-Team hat Squire entwickelt, um die Anforderungen an den Webmail-Editor zu vereinfachen. FastMail ist eine hervorragende Cloud-basierte E-Mail-Alternative zu Google Mail. Ich bin täglicher FastMail-Benutzer. Da es in Australien ansässig ist und anderen Gesetzen unterliegt als in den USA, ist der Schutz der Privatsphäre für FastMail-Benutzer geringfügig verbessert. Sie können hier mehr darüber lesen: FastMail sagt, es ist frei von NSA-Überwachung.

Wie das FastMail-Team in seinem Blog schrieb, benutzten sie zuvor CKeditor:

Obwohl es keine schlechte Wahl ist, wurde sie wie die meisten anderen Editoren für das Erstellen von Websites und nicht für das Schreiben von E-Mails entwickelt. Durch das einfache Einfügen eines Bildes als Standardwert wurde ein Dialogfeld mit drei Registerkarten und mehr Optionen angezeigt, als Sie für möglich hielten. Außerdem gab es ein eigenes UI-Toolkit und ein eigenes Framework, das wir stark anpassen mussten, um sich an den Rest anzupassen die neue Benutzeroberfläche, die wir bauten; ein schmerz zu erhalten.

Bei unserem Fokus auf Geschwindigkeit und Leistung waren wir auch besorgt über die Codegröße. Die Version von CKEditor, die wir für unsere vorherige (klassische) Benutzeroberfläche verwenden, die nur die Plugins enthält, die wir benötigen, ist ein Download von 159 KB (wenn gzipped; unkomprimiert sind es 441 KB). Das ist nur der Code, ausgenommen Stile und Bilder.

Sie beschlossen, bei Null anzufangen und Squire zu bauen. Mit nur 11,5 KB JavaScript nach Minification und gzip (34,7 KB unkomprimiert) und ohne Abhängigkeiten ist Squire extrem leicht.

Die Ergebnisse sind beeindruckend. Das kombinierte Codegewicht, das zum Laden des gesamten Bildschirms für Zusammenstellung, der Basisbibliothek, der E-Mail- und Kontaktmodelle sowie des gesamten UI-Codes zum Rendern des gesamten Bildschirms erforderlich ist, beträgt jetzt nur noch 149,4 KB (459,7 KB unkomprimiert) - weniger als der CKEditor allein.

Squire hat keine Abhängigkeiten. Es gibt keine XHR-Wrapper-, Widget-Bibliothek- oder Lightbox-Überlagerungen. Es gibt keine Benutzeroberfläche für eine Symbolleiste, so dass zwei UI-Toolkits nicht aufgebläht werden. Es ist nur ein einfaches </code> Komponente, die durch JavaScript manipuliert werden kann.</p><h2>Wie funktioniert Squire?</h2><p>Squire manipuliert das DOM mithilfe von Auswahl- und Bereichs-APIs. Dadurch werden häufige Inkompatibilitäten zwischen Browsern vermieden. Nochmals aus dem FastMail-Blog:</p><blockquote>Das Erstellen eines Rich-Text-Editors ist bekanntermaßen schwierig, da verschiedene Browser in diesem Bereich extrem inkonsistent sind. Die APIs wurden alle von Microsoft in der IE-Blütezeit eingeführt und dann von den anderen Herstellern auf verschiedene inkompatible Arten kopiert. Die meisten Rich-Text-Editoren führen einen Befehl aus und versuchen dann, das durch den Browser erzeugte Chaos zu beseitigen. Mit Squire umgehen wir dies souverän.</blockquote><blockquote>Die allgemeine Philosophie von Squire ist, dem Browser zu erlauben, so viel zu tun, wie er kann (was leider nicht sehr viel ist), aber die Kontrolle überall dort zu übernehmen, wo er von den Anforderungen abweicht, oder es gibt erhebliche Unterschiede zwischen den Browsern.<br></blockquote><blockquote>Squire installieren<img><br></blockquote><p>Besuchen Sie zuerst die Squire Github-Seite und klonen Sie den Quellcode oder laden Sie ihn herunter:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>Zweitens kopieren Sie den Inhalt der <code>bauen/</code> Verzeichnis in Ihre Anwendung.</p><p>Drittens bearbeiten Sie die <code><style></code> block in <code>document.html</code> Hinzufügen der Standardstile, die der Editor verwenden soll (oder Verknüpfung mit einem externen Stylesheet).</p><h2>Squire verwenden</h2><p>Schauen wir uns die Demo-Anwendung von Squire an. Bei Verwendung von Squire anstelle von <code><textarea></code> Element verwenden Sie ein <code><iframe src="path/to/document.html"></code>. </p><p>In der Demo heißt es:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Document.html</code> ist eine leere Leinwand mit Standardstilen und lädt Squire:</p><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css">… Eine Textdekoration: Unterstrichen; h1 Schriftgröße: 138,5%; … Blockquote border-left: 2px durchgehend blau; Marge: 0; Polsterung: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>Wenn Sie Squire verwenden, hängen Sie einen Ereignis-Listener an das Ladeereignis des Iframes an. Wenn dies ausgelöst wird, können Sie einen Verweis auf das Editorobjekt durch greifen<code> iframe.contentWindow.editor</code>. Zum Beispiel enthält das Demo-iframe:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>In der Demo gibt es zwei Arten von Links zum Manipulieren von Inhalten in Squire. Einfache Befehle, die mit jedem ausgewählten Text funktionieren, sehen folgendermaßen aus:</p><p><code><span>Fett gedruckt</span></code><br></p><p>Und komplexe Befehle, die zusätzliche Benutzereingaben erfordern, sehen so aus. Sie fügen die Aufforderung c hinzu:</p><p><code><span>Schriftgröße</span></code></p><p>So sieht die Demoanwendung aus:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>Das JavaScript oben auf der Demonstrationsseite wartet auf Klicks auf diese Bereichsbefehle. Wenn die Eingabeaufforderungsklasse vorhanden ist, werden weitere Informationen vom Benutzer erfasst:</p><pre><script type="text/javascript" charset="utf-8"> var editor; document.addEventListener( 'click', function ( e ) var id = e.target.id, value; if ( id && editor && editor[ id ] ) if ( e.target.className === 'prompt' ) value = prompt( 'Value:' ); editor[ id ]( value ); , false ); </script></pre><p>Dann ruft es den Squire-Editor mit dem Befehl und einem beliebigen vom Benutzer angegebenen Wert auf. Squire wendet den Befehl dann auf den aktuell ausgewählten Text an:</p><p><code>Editor [ID] (Wert);</code></p><p>Sie können mehr über Squire erfahren und die vollständige API-Dokumentation in der ReadMe einsehen.</p><h2>Erweiterung der Demo</h2><p>Als Beispiel fügen wir zwei Befehle hinzu, die den Status des Squire-Editors lesen. Wir fügen am unteren Rand des Befehls-Headers der Demo zwei Links hinzu:</p><pre> <p> Auswahl erhalten | doc erhalten </p> </pre><p>Wenn Sie einen Text auswählen und darauf klicken, wird die Auswahl wie unten gezeigt in der Warnmeldung angezeigt.</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>Schauen wir uns die ästhetisch ansprechendere Demo und ihre Symbolleiste an:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>Der Kopfblock für diese Seite enthält Stylesheets für Bootstrap und eines, das aufgerufen wird <code>Squire-UI</code>. Es bietet auch JavaScript dafür <code>Squire-UI</code>.</p><pre><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8"> <title>Knappe</title>  <link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> <link href="build/Squire-UI.css" rel="stylesheet" type="text/css" /> <link href="build/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="build/jQuery/jQuery.js" type="text/javascript"></script> <script src="build/squire-raw.js" type="text/javascript"></script> <script src="build/Squire-UI.js" type="text/javascript"></script> Es bietet auch statisches HTML für eine Textarea im Körper <div> <div> <div> <textarea>

Aber beim Laden ist es JQuery $ (Dokument) .ready Funktion ersetzt die Statik #foo Textfeld mit seiner SquireUI.

Die Toolbar-Konfiguration ist mit einer recht komplexen Konfiguration von JQuery, AJAX, HTML5 und CSS implementiert. Es lädt diese HTML-Seite, um die meisten Symbolleisten anzuzeigen: http://neilj.github.io/Squire/build/Squire-UI.html.

$ (div) .load (options.buildPath + 'Squire-UI.html') function () this.linkDrop = new Drop (Ziel: $ ('# makeLink'). first () [0], Inhalt: $ ('# drop-link'). html (), Position: 'Mitte unten', openOn: 'Klick');

Hier ist eine Teilmenge des Quellcodes für Squire-UI.html, damit Sie sehen können, was geladen wird:

…

Es wäre vielleicht schön gewesen, wenn sie eine vereinfachte Bootstrap-Symbolleiste als Add-On im Distributionscode bereitgestellt hätten, aber Sie können sicherlich aus den oben beschriebenen Demonstrationen lernen.

Ich hoffe, Sie finden Squire für Ihre eigenen Anwendungen hilfreich. Bitte zögern Sie nicht, Korrekturen, Fragen oder Kommentare zu posten. Sie können mich auch auf Twitter @reifman erreichen oder mich direkt per E-Mail kontaktieren.

`ähnliche Links`

 Squire: FastMails Rich Text Editor
 Squire Demonstration Seite
 Squire Codebase auf Github