Squire gebruiken, een lichtgewicht HTML5 Rich Text Editor

Wat is Squire?

Squire is een uiterst lichte HTML5-rich text-editor die het best geschikt is voor de rijke invoerformulieren van uw applicaties en voor eenvoudige documentcreatie. Het biedt ondersteuning voor meerdere browsers, maar voorkomt opzettelijk de complexiteit van het ondersteunen van oudere browsers. Het werkt het beste vanaf Opera 10, Firefox 3.5, Safari 4, Chrome 9 en IE8.

Squire is niet bedoeld voor het maken en bewerken van WYSIWYG-webpagina's. Voor veel rich-textinvoer en webtoepassingsdoeleinden is Squire misschien precies wat u nodig hebt. Het levert de kracht zonder de bloat. Het is ook MIT-licentie voor flexibel hergebruik.

In deze zelfstudie laat ik je zien hoe je Squire download en er voorbeeldinvoervormen mee kunt maken. Als je Squire in actie wilt zien, bezoek dan de demo.

Waar komt Squire vandaan?

Het FastMail-team heeft Squire gebouwd om de vereisten voor de webmaileditor te vereenvoudigen. FastMail is een uitstekend e-mailalternatief in de cloud voor Gmail: ik ben een dagelijkse FastMail-gebruiker. Omdat het in Australië is gevestigd en onder andere wetten werkt dan in de Verenigde Staten, zijn er enigszins verbeterde privacybescherming voor FastMail-gebruikers. U kunt hier meer over lezen: FastMail zegt dat het vrij is van NSA-bewaking.

Zoals het FastMail-team op hun blog schreef, gebruikten ze eerder CKeditor:

Hoewel het geen slechte keuze was, zoals de meeste andere editors, was het bedoeld voor het maken van websites en niet voor het schrijven van e-mails. Als zodanig presenteerde simpelweg het standaard invoegen van een afbeelding een dialoog met drie tabbladen en meer opties dan je voor mogelijk hield ... Het kwam ook met zijn eigen UI-toolkit en -raamwerk, die we enorm moesten aanpassen om in te passen in de rest van de nieuwe gebruikersinterface die we aan het bouwen waren; een pijn om te onderhouden.

Met onze focus op snelheid en prestaties waren we ook bezorgd over de codeafmeting. De versie van CKEditor die we gebruiken voor onze vorige (klassieke) gebruikersinterface, die alleen de plug-ins bevat die we nodig hebben, is een download van 159 KB (wanneer gzipped; ongecomprimeerd is dit 441 KB). Dat is alleen de code, met uitzondering van stijlen en afbeeldingen.

Ze besloten om helemaal opnieuw te beginnen en Squire te bouwen. Met slechts 11,5 KB JavaScript na minificatie en gzip (ongecomprimeerd 34,7 KB) en zonder afhankelijkheden, is Squire extreem licht. 

De resultaten zijn indrukwekkend. Het gecombineerde codegewicht dat vereist is om hun gehele samenstellingsscherm, basisbibliotheek, e-mail en contactenmodelcode en alle UI-code te laden om het volledige scherm te renderen, komt nu slechts uit op 149,4 KB (459,7 KB niet-gecomprimeerd), tenzij CKEditor alleen.

Squire heeft geen afhankelijkheden. Er is geen XHR-wrapper, widgetbibliotheek of lightbox-overlays. Er is geen gebruikersinterface voor een werkbalk, waardoor de druk van het laden van twee UI-toolkits wordt geëlimineerd. Het is gewoon een simpel </code> component die kan worden gemanipuleerd via JavaScript.</p><h2>Hoe Squire werkt</h2><p>Squire manipuleert de DOM met behulp van selectie- en bereik-API's. Dit elimineert veel voorkomende compatibiliteit met andere browsers. Nogmaals, van het FastMail-blog:</p><blockquote>Het maken van een rich text-editor is notoir moeilijk vanwege het feit dat verschillende browsers extreem inconsistent zijn op dit gebied. De API's werden allemaal geïntroduceerd door Microsoft in de hoogtijdagen van IE, en werden vervolgens door de andere leveranciers op verschillende incompatibele manieren gekopieerd ... de meeste RTF-editors voeren een opdracht uit en proberen dan de rommel op te ruimen die de browser heeft gemaakt. Met Squire omzeilen we dit netjes.</blockquote><blockquote>De algemene filosofie van Squire is om de browser zo veel mogelijk te laten doen (wat helaas niet zo veel is), maar de controle overal waar het afwijkt van wat nodig is over te nemen, of er zijn significante verschillen tussen browsers.<br></blockquote><blockquote>Squire installeren<img><br></blockquote><p>Ga eerst naar de Squire Github-pagina en kloon of download de broncode:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>Ten tweede, kopieer de inhoud van de <code>bouwen/</code> map in uw toepassing.</p><p>Ten derde, bewerk de <code><style></code> blokkeren <code>document.html</code> om de standaardstijlen toe te voegen die u wilt dat de editor gebruikt (of een koppeling naar een externe stylesheet).</p><h2>Squire gebruiken</h2><p>Laten we eens kijken naar de demo-applicatie die bij Squire is meegeleverd. Bij het gebruik van Squire, in plaats van een <code><textarea></code> element, gebruik je een <code><iframe src="path/to/document.html"></code>. </p><p>In de demo is dat:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Document.html</code> is een leeg canvas met standaardstijlen en het laadt 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">... een text-decoration: onderstrepen; h1 font-size: 138,5%; ... blockquote border-left: 2px effen blauw; marge: 0; opvulling: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>Wanneer u Squire gebruikt, koppelt u een gebeurtenislistener aan de laadgebeurtenis van het iframe. Wanneer dit wordt geactiveerd, kunt u een verwijzing naar het editorobject doornemen<code> iframe.contentWindow.editor</code>. Het demo-iframe omvat bijvoorbeeld:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>De demo heeft twee soorten links voor het manipuleren van inhoud binnen Squire. Simpele commando's die kunnen werken met elke geselecteerde tekst zien er als volgt uit:</p><p><code><span>Stoutmoedig</span></code><br></p><p>En complexe opdrachten waarvoor extra gebruikersinvoer nodig is, zien er als volgt uit; zij voegen de prompt c toe:</p><p><code><span>Lettertypegrootte</span></code></p><p>Dit is hoe de demotoepassing eruit ziet:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>Het JavaScript boven aan de demonstratiepagina luistert naar klikken naar deze bereikopdrachten. Als de aanwijzingsklasse bestaat, verzamelt deze meer informatie van de gebruiker:</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>Vervolgens roept het de Squire-editor op met het commando en elke door de gebruiker geleverde waarde. Squire past dan de opdracht toe op de momenteel geselecteerde tekst:</p><p><code>editor [id] (waarde);</code></p><p>U kunt meer over Squire leren en de volledige API-documentatie bekijken in de ReadMe.</p><h2>De demo uitbreiden</h2><p>Laten we als voorbeeld twee opdrachten toevoegen die de status van de Squire-editor lezen. We voegen twee links toe aan de onderkant van de opdrachtkop van de demo:</p><pre> <p> verkrijg selectie | krijg doc </p> </pre><p>Wanneer u wat tekst selecteert en erop klikt, verschijnt de selectie in de waarschuwing zoals hieronder weergegeven.</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>Laten we de meer esthetische demo en zijn werkbalk eens bekijken:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>Het hoofdblok voor deze pagina integreert stylesheets voor Bootstrap en één genaamd <code>Squire-UI</code>. Het biedt ook JavaScript hiervoor <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>Schildknaap</title> <!--[if IE 8]> <script type="text/javascript" src="build/ie8.js"></script> <![endif]--> <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> Het biedt ook statische HTML voor een tekstgebied in het lichaam <div> <div> <div> <textarea>