Använda Squire, en lättfattig HTML5 Rich Text Editor

Vad du ska skapa

Vad är Squire?

Squire är en extremt lätt HTML5 rik textredigerare som passar bäst för dina applikations rika inmatningsformer och enkel dokumentskapande. Det ger stöd för cross-browser men avsiktligt undviker komplexiteten att stödja äldre webbläsare. Det fungerar bäst med Opera 10, Firefox 3.5, Safari 4, Chrome 9 och IE8.

Squire är inte avsedd för att skapa och redigera WYSIWYGs hemsidor. Men för många riktiga inmatningar och webbapplikationer kan Squire vara precis vad du behöver. Det ger kraften utan uppblåsthet. Det är också MIT licensierat för flexibel återanvändning.

I den här handledningen visar jag dig hur man laddar ner Squire och bygger provinmatningsformulär med den. Om du vill se Squire i aktion, besök demo.

Var kom Squire från?

FastMail-teamet byggde Squire för att förenkla deras krav på webmailredigerare. FastMail är ett utmärkt molnbaserat e-postalternativ till Gmail. Jag är en daglig FastMail-användare. Eftersom det är baserat i Australien och fungerar enligt olika lagar än i USA, är det något förbättrade sekretessskydd för FastMail-användare. Du kan läsa mer om detta här: FastMail säger att det är gratis från NSA-övervakning.

Som FastMail-laget skrev på sin blogg, använde de tidigare CKeditor:

Även om det inte var ett dåligt val, liksom de flesta andra redaktörer där ute, utformades det för att skapa webbplatser, inte skriva e-postmeddelanden. Som sådan införde du helt enkelt en bild med en dialogruta med tre flikar och fler alternativ än du kunde tro det var möjligt. Det kom också med ett eget UI-verktygsverktyg och ramverk, som vi skulle behöva anpassa mycket för att passa in i resten av det nya gränssnittet vi byggde en smärta att behålla.

Med vårt fokus på hastighet och prestanda var vi också oroade över kodstorleken. Den version av CKEditor som vi använder för vårt tidigare (klassiska) användargränssnitt, som bara innehåller de plugins vi behöver, är en 159 KB-hämtning (när den är gzipped, okomprimerad den är 441 KB). Det är bara koden, med undantag av stilar och bilder.

De bestämde sig för att börja från början och bygga Squire. På bara 11,5 KB av JavaScript efter minifiering och gzip (34,7 KB okomprimerad) och utan beroenden är Squire extremt lätt.

Resultaten är imponerande. Den kombinerade kodvikt som krävs för att ladda hela kompositionsskärmen, basbiblioteket, post- och kontaktmodellkoden och all UI-koden för att göra hela skärmen kommer nu endast till 149,4 KB (459,7 KB okomprimerad) -lös än CKEditor ensam.

Squire har inga beroenden. Det finns inget XHR-omslag, widgetbibliotek eller ljusblocksöverläggningar. Det finns inget användargränssnitt för en verktygsfält, vilket eliminerar uppblåstheten av att ha två UI-verktygslådor laddade. Det är bara en enkel </code> komponent som kan manipuleras via JavaScript.</p><h2>Hur Squire fungerar</h2><p>Squire manipulerar DOM med hjälp av urval och intervall-API. Detta eliminerar vanliga inkompatibiliteter för tvärbrowser. Återigen, från FastMail-bloggen:</p><blockquote>Att skapa en rik textredigerare är notoriskt svårt på grund av att olika webbläsare är extremt inkonsekventa i detta område. API: erna introducerades alla gånger av Microsoft tillbaka i IE-stråldagen och kopierades sedan av de andra leverantörerna på olika inkompatibla sätt ... de flesta rika textredigerare utför ett kommando, försök sedan rensa upp roten i webbläsaren som skapats. Med Squire vi omedelbart kringgår detta.</blockquote><blockquote>Squires allmänna filosofi är att tillåta webbläsaren att göra så mycket som möjligt (vilket tyvärr inte är så mycket), men ta kontroll överallt det avviker från vad som krävs eller om det finns signifikanta skillnader mellan webbläsare.<br></blockquote><blockquote>Installera Squire<img><br></blockquote><p>Först, besök Squire Github-sidan och klon eller ladda ner källkoden:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>För det andra, kopiera innehållet i <code>bygga/</code> katalog i din ansökan.</p><p>Tredje, redigera <code><style></code> blockera in <code>document.html</code> för att lägga till standardstilarna du vill att redigeraren ska använda (eller länka till ett externt stilark).</p><h2>Använda Squire</h2><p>Låt oss titta på demo-ansökan som ingår i Squire. När du använder Squire, istället för a <code><textarea></code> element, du använder en <code><iframe src="path/to/document.html"></code>. </p><p>I den demo som är:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Document.html</code> är en tom duk med standardstilar och det laddar 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">... en text-decoration: understrykning; h1 fontstorlek: 138,5%; ... blockquote border-left: 2px solid blue; marginal: 0; vaddering: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>När du använder Squire, bifogar du en händelselysare till iframes lasthändelse. När detta bränder kan du fånga en referens till redigeringsobjektet genom<code> iframe.contentWindow.editor</code>. Exempelvis innefattar demo iframe:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>Demon har två typer av länkar för att manipulera innehåll inom Squire. Enkla kommandon som kan fungera med valfri text ser så här ut:</p><p><code><span>Djärv</span></code><br></p><p>Och komplexa kommandon som kräver ytterligare användarinmatning ser ut så här; de lägger till prompten c:</p><p><code><span>Textstorlek</span></code></p><p>Så här ser demo-programmet ut:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>JavaScript på toppen av demonstrationssidan lyssnar på några klick till dessa spankommandon. Om promplassen finns, samlar den mer information från användaren:</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>Då kallas det Squire editoren med kommandot och något användarlevererat värde. Squire tillämpar sedan kommandot på den aktuella valda texten:</p><p><code>redaktör [id] (värde);</code></p><p>Du kan lära dig mer om Squire och se dess fullständiga API-dokumentation i ReadMe.</p><h2>Utöka demo</h2><p>Låt oss till exempel lägga till två kommandon som läser Squire-editorens tillstånd. Vi lägger till två länkar längst ner i demoens kommandoradsrubrik:</p><pre> <p> få urval | få doc </p> </pre><p>När du väljer lite text och klickar på det, kommer valet att dyka upp i varningen som visas nedan.</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>Låt oss undersöka den mer estetiskt tilltalande demo och dess verktygsfält:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>Huvudblocket för denna sida integrerar stilark för Bootstrap och en kallad <code>Squire-UI</code>. Det ger också JavaScript för detta <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>Väpnare</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> Det erbjuder också statisk HTML för en textarea i kroppen <div> <div> <div> <textarea>

Men på laddning, är det JQuery $ (Dokument) .ready funktionen ersätter det statiska #foo textarea med dess SquireUI.

Verktygsfältets konfiguration implementeras med en ganska komplex konfiguration av JQuery, AJAX, HTML5 och CSS. Den laddar den här HTML-sidan för att visa det mesta av verktygsfältet: http://neilj.github.io/Squire/build/Squire-UI.html.

$ (div) .load (options.buildPath + 'Squire-UI.html', funktion () this.linkDrop = new Drop (target: $ ('# makeLink'). $ ('# drop-link'). html (), position: 'bottom center', openOn: 'click');

Här är en delmängd av källkoden för Squire-UI.html så att du kan se vad som laddas:

...

Det kan ha varit trevligt om de hade tillhandahållit en förenklad Bootstrap verktygsfält i distributionskoden som en tillägg, men du kan säkert lära av vad de gjorde i sin egen demo ovan.

Jag hoppas att du hittar Squire användbart för dina egna applikationer. Vänligen gärna posta rättelser, frågor eller kommentarer nedan. Du kan också nå mig på Twitter @ reifman eller maila mig direkt.

`relaterade länkar`

 Squire: FastMail Rich Text Editor
 Squire Demonstration Page
 Squire Codebase på Github