Utilizzo di Squire, un editor Rich Text HTML5 leggero

Cosa starai creando

Cos'è lo Squire?

Squire è un editor di testo RTF HTML5 estremamente leggero, più adatto per i moduli di input ricchi di applicazioni e per la semplice creazione di documenti. Fornisce supporto per browser multipli ma evita deliberatamente la complessità del supporto dei browser meno recenti. Funziona meglio a partire da Opera 10, Firefox 3.5, Safari 4, Chrome 9 e IE8.

Squire non è pensato per creare e modificare pagine del sito Web WYSIWYG. Tuttavia, per molti rich text input e applicazioni web, Squire potrebbe essere proprio quello di cui hai bisogno. Fornisce la potenza senza il rigonfiamento. È anche MIT autorizzato per il riutilizzo flessibile.

In questo tutorial, ti mostrerò come scaricare Squire e compilare moduli di input di esempio. Se desideri vedere Squire in azione, visita la demo.

Da dove veniva lo scudiero?

Il team di FastMail ha creato Squire per semplificare i requisiti dei propri editor webmail. FastMail è un'eccellente alternativa e-mail basata su cloud a Gmail: sono un utente FastMail quotidiano. Poiché è basato in Australia e opera in base a leggi diverse rispetto a quelle statunitensi, le protezioni della privacy sono leggermente migliorate per gli utenti di FastMail. Puoi leggere di più su questo qui: FastMail afferma che è privo di sorveglianza NSA.

Come il team di FastMail ha scritto sul proprio blog, in precedenza hanno utilizzato CKeditor:

Anche se non è una cattiva scelta, come la maggior parte degli altri editor là fuori è stato progettato per la creazione di siti Web, non per scrivere e-mail. Pertanto, inserendo semplicemente un'immagine per impostazione predefinita, è stata presentata una finestra di dialogo con tre schede e più opzioni di quelle che si potevano ritenere possibili ... Inoltre, disponeva di un proprio toolkit e framework UI, che avremmo dovuto personalizzare notevolmente per adattarsi al resto di la nuova interfaccia utente che stavamo costruendo; un dolore da mantenere.

Con la nostra attenzione alla velocità e alle prestazioni, eravamo anche preoccupati per le dimensioni del codice. La versione di CKEditor che usiamo per la nostra precedente (classica) UI, che include solo i plugin di cui abbiamo bisogno, è un download di 159 KB (quando compresso con gzip; non compresso è 441 KB). Questo è solo il codice, escludendo stili e immagini.

Hanno deciso di iniziare da zero e costruire Squire. A soli 11,5 KB di JavaScript dopo minification e gzip (34,7 KB non compressi) e senza dipendenze, Squire è estremamente leggero.

I risultati sono impressionanti. Il peso del codice combinato richiesto per caricare l'intero schermo di composizione, la libreria di base, il codice del modello di posta e contatti e tutto il codice dell'interfaccia utente per il rendering dell'intero schermo ora arriva a soli 149,4 KB (459,7 KB non compressi) -less rispetto a CKEditor da solo.

Squire non ha dipendenze. Non ci sono wrapper XHR, libreria di widget o overlay lightbox. Non c'è un'interfaccia utente per una barra degli strumenti, che elimina l'ingordigia di avere due toolkit UI caricati. È solo un semplice </code> componente che può essere manipolato tramite JavaScript.</p><h2>Come funziona lo scudiero</h2><p>Squire manipola il DOM utilizzando le API di selezione e intervallo. Questo elimina comuni incompatibilità cross-browser. Di nuovo, dal blog FastMail:</p><blockquote>Fare un editor di testo ricco è notoriamente difficile a causa del fatto che diversi browser sono estremamente incoerenti in quest'area. Le API sono state tutte introdotte da Microsoft nel periodo natalizio di IE e sono state quindi copiate dagli altri produttori in vari modi incompatibili ... la maggior parte degli editor di testo avanzato esegue un comando, quindi tenta di ripulire il disordine creato dal browser. Con Squire, evitiamo accuratamente questo.</blockquote><blockquote>La filosofia generale di Squire è quella di consentire al browser di fare tutto ciò che può (che sfortunatamente non è molto), ma assumere il controllo ovunque si allontani da ciò che è richiesto, o ci sono significative differenze tra i browser.<br></blockquote><blockquote>Installazione di Squire<img><br></blockquote><p>Per prima cosa, visita la pagina Squire Github e clona o scarica il codice sorgente:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>Secondo, copia il contenuto del file <code>costruire/</code> directory nella tua applicazione.</p><p>Terzo, modifica il <code><style></code> bloccare dentro <code>document.html</code> per aggiungere gli stili di default che vorresti usare per l'editor (o collegarli a un foglio di stile esterno).</p><h2>Utilizzando Squire</h2><p>Diamo un'occhiata all'applicazione demo inclusa con Squire. Quando si usa Squire, invece di a <code><textarea></code> elemento, tu usi un <code><iframe src="path/to/document.html"></code>. </p><p>Nella demo che è:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Document.html</code> è una tela vuota con stili predefiniti e carica 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">... una decorazione del testo: sottolineatura; h1 font-size: 138,5%; ... blockquote border-left: 2px solid blue; margine: 0; padding: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>Quando si usa Squire, si collega un listener di eventi all'evento load dell'iframe. Quando questo si attiva, puoi utilizzare un riferimento all'oggetto editor<code> iframe.contentWindow.editor</code>. Ad esempio, l'iframe demo include:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>La demo ha due tipi di link per manipolare il contenuto all'interno di Squire. I comandi semplici che possono funzionare con qualsiasi testo selezionato hanno questo aspetto:</p><p><code><span>Grassetto</span></code><br></p><p>E i comandi complessi che richiedono un input utente aggiuntivo assomigliano a questo; aggiungono il prompt c:</p><p><code><span>Dimensione del font</span></code></p><p>Ecco come appare l'applicazione demo:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>Il JavaScript nella parte superiore della pagina di dimostrazione ascolta eventuali clic su questi comandi di estensione. Se la classe prompt esiste, raccoglie più informazioni dall'utente:</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>Quindi, chiama l'editor di Squire con il comando e qualsiasi valore fornito dall'utente. Squire quindi applica il comando al testo attualmente selezionato:</p><p><code>editor [id] (valore);</code></p><p>Puoi saperne di più su Squire e vedere la sua documentazione completa sull'API nel Leggimi.</p><h2>Estendere la demo</h2><p>Ad esempio, aggiungiamo due comandi che leggono lo stato dell'editor di Squire. Aggiungeremo due link in fondo all'intestazione del comando della demo:</p><pre> <p> ottenere la selezione | ricevi un documento </p> </pre><p>Quando selezioni del testo e fai clic su di esso, la selezione comparirà nell'avviso come mostrato di seguito.</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>Esaminiamo la demo più esteticamente gradevole e la sua barra degli strumenti:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>Il blocco di testa per questa pagina integra i fogli di stile per Bootstrap e uno chiamato <code>Squire-UI</code>. Fornisce anche JavaScript per questo <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>possidente</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> Offre anche HTML statico per una textarea nel corpo <div> <div> <div> <textarea>

Ma sul carico, il suo JQuery $ (Document) .ready la funzione sostituisce la statica #foo textarea con la sua SquireUI.

La configurazione della barra degli strumenti è implementata con una configurazione abbastanza complessa di JQuery, AJAX, HTML5 e CSS. Sta caricando questa pagina HTML per visualizzare la maggior parte della barra degli strumenti: http://neilj.github.io/Squire/build/Squire-UI.html.

$ (div) .load (options.buildPath + 'Squire-UI.html', function () this.linkDrop = new Drop (target: $ ('# makeLink'). first () [0], contenuto: $ ('# drop-link'). html (), posizione: 'bottom center', openOn: 'click');

Ecco un sottoinsieme del codice sorgente di Squire-UI.html in modo che tu possa vedere cosa viene caricato:

...

Sarebbe stato bello se avessero fornito una barra degli strumenti Bootstrap semplificata nel codice di distribuzione come componente aggiuntivo, ma puoi sicuramente imparare da quello che hanno fatto nella loro demo sopra.

Spero che trovi Squire utile per le tue applicazioni. Non esitate a postare correzioni, domande o commenti qui sotto. Puoi anche raggiungermi su Twitter @reifman o mandarmi un'email direttamente.

`Link correlati`

 Squire: editor Rich Text di FastMail
 Pagina Dimostrazione Squire
 Squire Codebase su Github





		
			
	   
	




Codice