Bruk Squire, en lettvektig HTML5 Rich Text Editor

Hva du skal skape

Hva er Squire?

Squire er en ekstremt lett HTML5 rik tekstredigerer som passer best for programmets rike innskrivingsformer og enkelt dokumentoppretting. Den gir støtte for nettleser, men forsettlig unngår kompleksiteten til å støtte eldre nettlesere. Det fungerer best med Opera 10, Firefox 3.5, Safari 4, Chrome 9 og IE8.

Squire er ikke ment for å lage og redigere WYSIWYG nettsider. Men for mange rike tekstinnspillings- og webapplikationsformål kan Squire være akkurat det du trenger. Det gir strømmen uten oppblåsthet. Det er også MIT lisensiert for fleksibel gjenbruk.

I denne opplæringen vil jeg vise deg hvordan du laster ned Squire og bygger sample-skjema med det. Hvis du vil se Squire i gang, kan du besøke demoen.

Hvor kom Squire fra??

FastMail-teamet bygget Squire for å forenkle deres krav til webmailredigerere. FastMail er et utmerket skybasert e-postalternativ til Gmail. Jeg er en daglig FastMail-bruker. Fordi den er basert i Australia og opererer under forskjellige lover enn i USA, er det noe forbedret personvernbeskyttelse for FastMail-brukere. Du kan lese mer om dette her: FastMail sier det er gratis fra NSA Surveillance.

Som FastMail-teamet skrev på bloggen, brukte de tidligere CKeditor:

Selv om det ikke var et dårlig valg, som de fleste andre redaktører der ute, ble det laget for å lage nettsteder, ikke skrive e-post. Som sådan, bare å sette inn et bilde som standard, presenterte en dialog med tre faner og flere alternativer enn du kunne tro mulig ... Det kom også med sitt eget UI-verktøy og rammeverk, som vi hadde måttet tilpasse for å passe inn med resten av den nye brukergrensesnittet vi bygde; en smerte å opprettholde.

Med fokus på fart og ytelse var vi også opptatt av kodestørrelsen. Den versjonen av CKEditor vi bruker til vår tidligere (klassiske) brukergrensesnitt, som bare inneholder pluginene vi trenger, er en 159 KB nedlasting (når gzipped, ukomprimert den er 441 kB). Det er bare koden, unntatt stiler og bilder.

De bestemte seg for å starte fra bunnen av og bygge Squire. På bare 11,5 KB av JavaScript etter minifisering og gzip (34,7 KB ukomprimert) og uten avhengighet, er Squire ekstremt lett.

Resultatene er imponerende. Den kombinerte kodevekten som kreves for å laste hele komposisjonskjermen, basebiblioteket, post- og kontaktmodellkoden og all UI-koden for å gjøre hele skjermen nå kommer til bare 149,4 KB (459,7 KB ukomprimert) -løs enn CKEditor alene.

Squire har ingen avhengighet. Det er ingen XHR wrapper, widget bibliotek eller lightbox overlays. Det er ikke noe brukergrensesnitt for en verktøylinje, noe som eliminerer oppblåstheten av å ha to UI-toolkitter lastet. Det er bare en enkel </code> komponent som kan manipuleres gjennom JavaScript.</p><h2>Hvordan Squire Works</h2><p>Squire manipulerer DOM ved hjelp av utvalg og utvalg APIer. Dette eliminerer vanlige inkompatibiliteter på tvers av nettleseren. Igjen, fra FastMail-bloggen:</p><blockquote>Å lage en rik tekstredigerer er merkelig vanskelig på grunn av at forskjellige nettlesere er ekstremt inkonsekvent i dette området. APIene ble alle introdusert av Microsoft tilbake i IE heyday, og ble deretter kopiert av de andre leverandørene på ulike inkompatible måter ... de fleste rike tekstredaktører utfører en kommando, og deretter prøver å rydde opp rotet nettleseren opprettet. Med Squire bytter vi dette forbi.</blockquote><blockquote>Den generelle filosofien til Squire er å la nettleseren gjøre så mye det kan (som dessverre ikke er veldig mye), men ta kontroll overalt hvor det avviker fra det som kreves, eller det er betydelige forskjeller i nettleseren.<br></blockquote><blockquote>Installere Squire<img><br></blockquote><p>Først, besøk Squire Github siden og klone eller last ned kildekoden:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>For det andre, kopier innholdet av <code>bygge/</code> katalog i søknaden din.</p><p>Tredje, rediger <code><style></code> blokkere inn <code>document.html</code> for å legge til standardstilene du vil at redigereren skal bruke (eller lenke til et eksternt stilark).</p><h2>Bruker squire</h2><p>La oss se på demo-applikasjonen som følger med Squire. Når du bruker Squire, istedenfor a <code><textarea></code> element, du bruker en <code><iframe src="path/to/document.html"></code>. </p><p>I demoen som er:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Document.html</code> er et tomt lerret med standard stiler og det laster 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 tekst-dekorasjon: understreke; h1 skriftstørrelse: 138,5%; ... blockquote border-left: 2px solid blue; margin: 0; polstring: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>Når du bruker Squire, vedlegger du en hendelseslytter til lastbegivenheten til iframe. Når dette brenner, kan du hente en referanse til redigerobjektet gjennom<code> iframe.contentWindow.editor</code>. For eksempel inneholder demo iframe:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>Demoen har to typer lenker for å manipulere innhold innen Squire. Enkelte kommandoer som kan fungere med en valgt tekst, ser slik ut:</p><p><code><span>Modig</span></code><br></p><p>Og komplekse kommandoer som krever ekstra brukerinngang ser slik ut: de legger til spørringen c:</p><p><code><span>Skriftstørrelse</span></code></p><p>Slik ser demo-applikasjonen ut:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>JavaScript øverst på demonstrasjonssiden lytter til eventuelle klikk til disse spankommandoene. Hvis spørreklassen eksisterer, samler den inn mer informasjon fra brukeren:</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>Deretter kaller det Squire-editoren med kommandoen og hvilken som helst bruker-tilført verdi. Squire bruker deretter kommandoen til den valgte teksten:</p><p><code>redaktør [id] (verdi);</code></p><p>Du kan lære mer om Squire og se sin komplette API-dokumentasjon i ReadMe.</p><h2>Utvide demoen</h2><p>Bare som et eksempel, la oss legge til to kommandoer som leser tilstanden til Squire-editoren. Vi legger til to koblinger til bunnen av demoens kommandolinje:</p><pre> <p> få valg | få doc </p> </pre><p>Når du velger litt tekst og klikker på den, vil valget dukke opp i varselet som vist nedenfor.</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>La oss undersøke mer estetisk tiltalende demo og verktøylinjen:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>Hodeblokken for denne siden integrerer stilark for Bootstrap og en som heter <code>Squire-UI</code>. Det gir også JavaScript for dette <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>Squire</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> Den tilbyr også statisk HTML for en tekstarea i kroppen <div> <div> <div> <textarea>

Men på last, det er JQuery $ (Document) .ready funksjonen erstatter den statiske #foo textarea med sin SquireUI.

Verktøylinjekonfigurasjonen er implementert med en ganske komplisert konfigurasjon av JQuery, AJAX, HTML5 og CSS. Den laster denne HTML-siden for å vise det meste av verktøylinjen: http://neilj.github.io/Squire/build/Squire-UI.html.

$ (div) .load (options.buildPath + 'Squire-UI.html', funksjon () this.linkDrop = new Drop (target: $ ('# makeLink'). Første () [0], innhold: $ ('# drop-link'). html (), posisjon: 'bottom center', openOn: 'klikk');

Her er en delmengde av kildekoden for Squire-UI.html slik at du kan se hva som lastes inn:

...

Det kan ha vært fint om de hadde gitt en forenklet Bootstrap-verktøylinje i distribusjonskoden som et tillegg, men du kan sikkert lære av det de gjorde i sin egen demo over.

Jeg håper du finner Squire nyttig for dine egne applikasjoner. Ta gjerne inn korrigeringer, spørsmål eller kommentarer nedenfor. Du kan også nå meg på Twitter @ reifman eller email meg direkte.

`Relaterte linker`

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