Utilisation de Squire, un éditeur de texte enrichi HTML5 léger

Qu'est-ce que Squire??

Squire est un éditeur de texte enrichi HTML5 extrêmement léger, parfaitement adapté aux formulaires de saisie riches et à la création simple de documents de vos applications. Il prend en charge plusieurs navigateurs, mais évite délibérément la complexité de la prise en charge des navigateurs plus anciens. Cela fonctionne mieux en commençant par Opera 10, Firefox 3.5, Safari 4, Chrome 9 et IE8..

Squire n'est pas conçu pour créer et éditer des pages de sites Web WYSIWYG. Toutefois, pour de nombreuses applications de saisie de texte enrichi et d'applications Web, Squire peut être exactement ce dont vous avez besoin. Il fournit le pouvoir sans le gonflement. Il est également autorisé par le MIT pour une réutilisation flexible.

Dans ce tutoriel, je vais vous montrer comment télécharger Squire et comment créer des exemples de formulaires de saisie. Si vous souhaitez voir Squire en action, visitez la démo.

D'où vient Squire??

L’équipe FastMail a conçu Squire pour simplifier ses exigences en matière d’éditeur de messagerie Web. FastMail est une excellente alternative de messagerie basée sur le cloud à Gmail. Je suis un utilisateur quotidien de FastMail. Basé en Australie et régi par des lois différentes de celles des États-Unis, la protection de la vie privée des utilisateurs de FastMail est légèrement améliorée. Vous pouvez en savoir plus à ce sujet ici: FastMail dit que la surveillance de la NSA est gratuite.

Comme l'équipe de FastMail l'a écrit sur leur blog, ils utilisaient auparavant CKeditor:

Bien que ce ne soit pas un mauvais choix, il a été conçu, comme la plupart des autres éditeurs, pour créer des sites Web et non pour envoyer des courriels. En tant que tel, le simple fait d'insérer une image par défaut présentait un dialogue avec trois onglets et davantage d'options que vous n'auriez pu imaginer… Il comportait également sa propre boîte à outils d'interface utilisateur et son propre cadre, qu'il nous aurait fallu fortement personnaliser pour s'adapter au reste de la nouvelle interface utilisateur que nous construisions; une douleur à maintenir.

En nous concentrant sur la vitesse et la performance, nous nous sommes également préoccupés de la taille du code. La version de CKEditor que nous utilisons pour notre précédente interface utilisateur (classique), qui n'inclut que les plugins dont nous avons besoin, est un téléchargement de 159 ko (une fois compressé; 441 ko compressé; non compressé). C'est juste le code, à l'exclusion des styles et des images.

Ils ont décidé de partir de zéro pour construire Squire. À seulement 11,5 Ko de JavaScript après minification et gzip (34,7 Ko non compressé) et sans dépendance, Squire est extrêmement léger. 

Les résultats sont impressionnants. Le poids de code combiné nécessaire pour charger tout leur écran de composition, bibliothèque de base, code de modèle de courrier et de contacts et tout le code de l'interface utilisateur pour restituer l'écran complet ne représente plus que 149,4 Ko (459,7 Ko non compressé) - moins que CKEditor seul..

Squire n'a pas de dépendances. Il n'y a pas de wrapper XHR, de bibliothèque de widgets ou de superpositions de lightbox. Il n'y a pas d'interface utilisateur pour une barre d'outils, ce qui élimine le fardeau d'avoir deux kits d'outils d'interface utilisateur chargés. C'est juste un simple </code> composant pouvant être manipulé via JavaScript.</p><h2>Comment fonctionne Squire</h2><p>Squire manipule le DOM à l'aide des API de sélection et de plage. Cela élimine les incompatibilités courantes entre les navigateurs. Encore une fois, à partir du blog FastMail:</p><blockquote>Créer un éditeur de texte riche est notoirement difficile en raison du fait que les différents navigateurs sont extrêmement incohérents dans ce domaine. Les API ont toutes été introduites par Microsoft à l'époque de IE, puis copiées par les autres fournisseurs de différentes manières incompatibles… la plupart des éditeurs de texte enrichi exécutent une commande, puis tentent de nettoyer le désordre créé par le navigateur. Avec Squire, nous contournons soigneusement cette.</blockquote><blockquote>La philosophie générale de Squire est de permettre au navigateur de faire tout ce qui est en son pouvoir (ce qui n’est malheureusement pas grand chose), mais de prendre le contrôle partout où il s'écarte de ce qui est requis ou de grandes différences entre les navigateurs..<br></blockquote><blockquote>Installation de Squire<img><br></blockquote><p>Tout d’abord, visitez la page Squire Github et clonez ou téléchargez le code source:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>Deuxièmement, copiez le contenu de la <code>construire/</code> répertoire dans votre application.</p><p>Troisièmement, éditez le <code><style></code> bloquer <code>document.html</code> pour ajouter les styles par défaut que vous voudriez que l'éditeur utilise (ou un lien vers une feuille de style externe).</p><h2>Utiliser Squire</h2><p>Regardons l'application de démonstration fournie avec Squire. Lors de l'utilisation de Squire, au lieu d'un <code><textarea></code> élément, vous utilisez un <code><iframe src="path/to/document.html"></code>. </p><p>Dans la démo c'est:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Document.html</code> est une toile vierge avec des styles par défaut et charge 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">… Une text-decoration: souligné; h1 taille de la police: 138,5%; … Blockquote border-left: 2px solid blue; marge: 0; rembourrage: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>Lorsque vous utilisez Squire, vous associez un écouteur d'événement à l'événement de chargement de l'iframe. Lorsque cela se déclenche, vous pouvez saisir une référence à l'objet d'édition via<code> iframe.contentWindow.editor</code>. Par exemple, l'iframe de démonstration comprend:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>La démo comporte deux types de liens permettant de manipuler du contenu dans Squire. Les commandes simples pouvant fonctionner avec tout texte sélectionné ressemblent à ceci:</p><p><code><span>Audacieux</span></code><br></p><p>Et les commandes complexes nécessitant une entrée utilisateur supplémentaire ressemblent à ceci; ils ajoutent l'invite c:</p><p><code><span>Taille de police</span></code></p><p>Voici à quoi ressemble l'application de démonstration:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>Le code JavaScript situé en haut de la page de démonstration écoute les clics sur ces commandes span. Si la classe d'invite existe, elle collecte plus d'informations de l'utilisateur:</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>Ensuite, il appelle l'éditeur Squire avec la commande et toute valeur fournie par l'utilisateur. Squire applique ensuite la commande au texte actuellement sélectionné:</p><p><code>éditeur [id] (valeur);</code></p><p>Vous pouvez en apprendre plus sur Squire et voir la documentation complète de son API dans le fichier Lisez-moi..</p><h2>Prolonger la démo</h2><p>A titre d'exemple, ajoutons deux commandes qui lisent l'état de l'éditeur Squire. Nous allons ajouter deux liens au bas de l'en-tête de commande de la démo:</p><pre> <p> obtenir une sélection | obtenir un doc </p> </pre><p>Lorsque vous sélectionnez du texte et que vous cliquez dessus, la sélection apparaîtra dans l'alerte, comme indiqué ci-dessous..</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>Examinons la démo la plus esthétique et sa barre d’outils:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>Le bloc de tête de cette page intègre des feuilles de style pour Bootstrap et un appelé <code>Squire-UI</code>. Il fournit également JavaScript pour cette <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>Écuyer</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> Il offre également du HTML statique pour une zone de texte dans le corps <div> <div> <div> <textarea>