Folosind Squire, un Editor de text îmbogățit HTML5 ușor

Ce veți crea

Ce este Squire?

Squire este un editor de text extrem de ușor HTML5, cel mai potrivit pentru formele de intrare bogate ale aplicațiilor dvs. și pentru crearea simplă a documentelor. Oferă suport pentru browser încrucișat, dar evită în mod deliberat complexitatea de a sprijini browserele mai vechi. Funcționează cel mai bine începând cu Opera 10, Firefox 3.5, Safari 4, Chrome 9 și IE8.

Squire nu este destinat creării și editării paginilor Web WYSIWYG. Cu toate acestea, pentru multe utilizări bogate de text și aplicații web, Squire poate fi exact ceea ce aveți nevoie. Oferă puterea fără balonare. De asemenea, MIT este licențiată pentru reutilizarea flexibilă.

În acest tutorial, vă vom arăta cum să descărcați Squire și să construiți formularele de intrări de eșantioane cu ea. Dacă doriți să vedeți Squire în acțiune, vizitați demo-ul.

De unde a venit Squire?

Echipa FastMail a construit Squire pentru a simplifica cerințele editorului webmail. FastMail este o excelentă alternativă de e-mail pe bază de cloud pentru Gmail - sunt utilizator FastMail zilnic. Deoarece se bazează în Australia și operează în temeiul unor legi diferite decât în S.U.A., există o protecție a confidențialității ușor îmbunătățită pentru utilizatorii FastMail. Puteți citi mai multe despre acest lucru aici: FastMail spune că este liber de supravegherea NSA.

Pe măsură ce echipa FastMail a scris pe blogul lor, au folosit anterior CKeditor:

Deși nu este o alegere proastă, la fel ca majoritatea editorilor de acolo, a fost proiectat pentru crearea de site-uri web, fără a scrie e-mailuri. Ca atare, inserarea pur și simplu a unei imagini în mod implicit a prezentat un dialog cu trei tab-uri și mai multe opțiuni decât ați putea crede posibil ... A venit, de asemenea, cu propriul toolkit UI și cadru, pe care ar fi trebuit să-l personalizăm puternic pentru a se potrivi cu restul noul interfață utilizată pe care o construim; o durere de întreținut.

Cu accentul pus pe viteză și performanță, am fost, de asemenea, îngrijorați de dimensiunea codului. Versiunea CKEditor pe care o folosim pentru UI-ul nostru precedent (clasic), care include numai pluginurile de care avem nevoie, este o descărcare de 159 KB (când este gzipată, necomprimată este de 441 KB). Acesta este doar codul, excluzând stilurile și imaginile.

Ei au decis să înceapă de la zero și să construiască Squire. La doar 11,5 KB de JavaScript după minificare și gzip (34,7 KB necomprimat) și fără dependențe, Squire este extrem de ușor.

Rezultatele sunt impresionante. Greutatea combinată necesară pentru încărcarea întregului ecran de compoziție, a bibliotecii de bază, a codului de e-mail și a contactelor și a întregului cod UI pentru a reda întregul ecran ajunge acum doar la 149,4 KB (459,7 KB necomprimat) - fără CKEditor singur.

Squire nu are dependențe. Nu există nici un XHR wrapper, bibliotecă widget sau suprapuneri cu lightbox. Nu există o interfață de utilizator pentru o bară de instrumente, care elimină umflătura de a avea două seturi de instrumente UI încărcate. Este simplu </code> care poate fi manipulat prin JavaScript.</p><h2>Cum funcționează Squire</h2><p>Squire manipulează DOM utilizând API-uri de selectare și gamă. Acest lucru elimină incompatibilitățile de browser încrucișate. Din nou, din blogul FastMail:</p><blockquote>Efectuarea unui editor de text îmbogățit este notorie dificilă datorită faptului că diferite browsere sunt extrem de incoerente în acest domeniu. API-urile au fost introduse de Microsoft în perioada de glorie IE și apoi au fost copiate de alți furnizori în diferite moduri incompatibile ... cei mai mulți editori de text îmbogățit execută o comandă, apoi încearcă să curețe dezordinea creată de browser. Cu Squire, ne apropiem de asta.</blockquote><blockquote>Filosofia generală a lui Squire este să permită browserului să facă cât de mult poate (care, din păcate, nu este foarte mult), dar să ia control oriunde se abate de la ceea ce este necesar sau există diferențe semnificative între browser-uri.<br></blockquote><blockquote>Instalarea Squire<img><br></blockquote><p>Mai întâi, accesați pagina Squire Github și clonați sau descărcați codul sursă:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>În al doilea rând, copiați conținutul <code>construi/</code> director în aplicația dvs..</p><p>În al treilea rând, editați <code><style></code> blocați în <code>document.html</code> pentru a adăuga stilurile implicite pe care doriți să le folosească editorul (sau o legătură într-o foaie de stil externă).</p><h2>Folosind Squire</h2><p>Să ne uităm la aplicația demo inclusă în Squire. Atunci când utilizați Squire, în loc de a <code><textarea></code> element, utilizați un <code><iframe src="path/to/document.html"></code>. </p><p>În demo-ul care este:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Document.html</code> este o pânză goală cu stiluri implicite și o încarcă pe 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">... text-decoration: underline; h1 font-size: 138,5%; ... blockquote border-left: 2px solid blue; marja: 0; umplutură: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>Când utilizați Squire, atașați un ascultător de evenimente la evenimentul de încărcare al iframei. Când se produce această incendiu, puteți lua o referință la obiectul editorului prin<code> iframe.contentWindow.editor</code>. De exemplu, iframe-ul demo include:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>Demo-ul are două tipuri de linkuri pentru manipularea conținutului în Squire. Comenzile simple care pot funcționa cu orice text selectat arată astfel:</p><p><code><span>Îndrăzneţ</span></code><br></p><p>Comenzile complexe care necesită o intrare suplimentară a utilizatorilor arată astfel; ei adaugă promptul c:</p><p><code><span>Marimea fontului</span></code></p><p>Iată ce arată aplicația demo:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>JavaScript-ul din partea de sus a paginii de demonstrație ascultă pentru orice clicuri la aceste comenzi de span. Dacă există clasa prompt, aceasta colectează mai multe informații de la utilizator:</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>Apoi, sună editorul Squire cu comanda și orice valoare furnizată de utilizator. Squire aplică apoi comanda la textul selectat în prezent:</p><p><code>editor [id] (valoare);</code></p><p>Puteți afla mai multe despre Squire și puteți vedea documentația API completă în ReadMe.</p><h2>Extinderea Demo-ului</h2><p>Ca exemplu, să adăugăm două comenzi care citesc starea editorului Squire. Vom adăuga două linkuri în partea de jos a antetului de comandă al demo-ului:</p><pre> <p> obține selecție | obțineți doc </p> </pre><p>Când selectați un text și faceți clic pe acesta, selecția va apărea în alertă, după cum se arată mai jos.</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>Să examinăm demo-ul mai plăcut din punct de vedere estetic și bara de instrumente:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>Blocul de cap pentru această pagină integrează foile de stil pentru Bootstrap și unul numit <code>Squire-UI</code>. De asemenea, acesta oferă JavaScript pentru aceasta <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>paj</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> Acesta oferă, de asemenea, html static pentru o textarea în corp <div> <div> <div> <textarea>

Dar pe încărcătură, JQuery $ (Document) .ready funcția înlocuiește funcția statică #foo textarea cu ei SquireUI.

Configurația barei de instrumente este implementată cu o configurație destul de complexă a JQuery, AJAX, HTML5 și CSS. Se încarcă această pagină HTML pentru a afișa cea mai mare parte a barei de instrumente: http://neilj.github.io/Squire/build/Squire-UI.html.

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

Iată o submulțime a codului sursă pentru Squire-UI.html pentru a vedea ce se încarcă:

...

S-ar putea să fi fost bine dacă ar fi oferit o bara de instrumente Bootstrap simplificată în codul de distribuție ca un add-on, dar cu siguranță puteți învăța din ceea ce au făcut în demo-ul lor de mai sus.

Sper că veți găsi Squire util pentru propriile aplicații. Nu ezitați să postați corecturi, întrebări sau comentarii de mai jos. Puteți să mă contactați și pe Twitter @reifman sau să mă trimiteți direct prin e-mail.

`Link-uri conexe`

 Squire: Editorul de text îmbogățit de FastMail
 Squire Demonstration Page
 Squire Codebase pe Github

Cod