Usando Squire, un editor ligero de texto enriquecido HTML5

Lo que vas a crear

Lo que es escudero?

Squire es un editor de texto enriquecido HTML5 extremadamente liviano que se adapta mejor a los formularios de entrada enriquecidos de sus aplicaciones y la creación simple de documentos. Proporciona compatibilidad con varios navegadores, pero evita deliberadamente la complejidad de admitir navegadores más antiguos. Funciona mejor comenzando con Opera 10, Firefox 3.5, Safari 4, Chrome 9 e IE8.

Squire no está diseñado para crear y editar páginas web WYSIWYG. Sin embargo, para muchos usos de entrada de texto enriquecido y aplicaciones web, Squire puede ser justo lo que necesita. Proporciona el poder sin la hinchazón. También tiene licencia MIT para reutilización flexible..

En este tutorial, le mostraré cómo descargar Squire y crear formularios de entrada de muestra con él. Si desea ver a Squire en acción, visite la demostración..

¿De dónde vino Squire??

El equipo de FastMail creó Squire para simplificar sus requisitos de editor de correo web. FastMail es una excelente alternativa de correo electrónico basada en la nube para Gmail: soy un usuario diario de FastMail. Debido a que tiene su sede en Australia y opera bajo leyes diferentes a las de los EE. UU., Existen protecciones de privacidad ligeramente mejoradas para los usuarios de FastMail. Puede leer más sobre esto aquí: FastMail dice que está libre de vigilancia de la NSA.

Como el equipo de FastMail escribió en su blog, anteriormente usaban CKeditor:

Si bien no es una mala elección, como la mayoría de los otros editores, fue diseñado para crear sitios web, no para escribir correos electrónicos. Como tal, simplemente insertando una imagen por defecto se presentó un cuadro de diálogo con tres pestañas y más opciones de las que podría creer ... También vino con su propio kit de herramientas de interfaz de usuario y marco, que habríamos tenido que personalizar mucho para encajar con el resto de la nueva interfaz de usuario que estábamos construyendo; un dolor para mantener.

Con nuestro enfoque en la velocidad y el rendimiento, también nos preocupaba el tamaño del código. La versión de CKEditor que usamos para nuestra IU anterior (clásica), que solo incluye los complementos que necesitamos, es una descarga de 159 KB (cuando gzipped; descomprimido es de 441 KB). Eso es solo el código, excluyendo estilos e imágenes..

Decidieron comenzar desde cero y construir Squire. Con solo 11.5 KB de JavaScript después de minification y gzip (34.7 KB sin comprimir) y sin dependencias, Squire es extremadamente ligero.

Los resultados son impresionantes. El peso del código combinado requerido para cargar toda la pantalla de composición, la biblioteca base, el código del modelo de correo y contactos y todo el código de la interfaz de usuario para representar la pantalla completa ahora es de solo 149.4 KB (459.7 KB sin comprimir), excepto el CKEditor.

Squire no tiene dependencias. No hay un contenedor XHR, una biblioteca de widgets o superposiciones de lightbox. No hay una interfaz de usuario para una barra de herramientas, lo que elimina la acumulación de tener cargados dos kits de herramientas de interfaz de usuario. Es solo un simple </code> componente que puede ser manipulado a través de JavaScript.</p><h2>Cómo funciona Squire</h2><p>Squire manipula el DOM utilizando las API de selección y rango. Esto elimina las incompatibilidades comunes entre navegadores. De nuevo, desde el blog de FastMail:</p><blockquote>Hacer un editor de texto enriquecido es notoriamente difícil debido al hecho de que diferentes navegadores son extremadamente inconsistentes en esta área. Microsoft introdujo todas las API de nuevo en el apogeo de IE, y los demás proveedores las copiaron de varias formas incompatibles ... la mayoría de los editores de texto enriquecido ejecutan un comando, luego intentan limpiar el desorden que creó el navegador. Con Squire, evitamos esto.</blockquote><blockquote>La filosofía general de Squire es permitir que el navegador haga todo lo que pueda (lo que, lamentablemente, no es mucho), pero puede tomar el control en cualquier lugar que se desvíe de lo que se requiere, o existen diferencias significativas entre los navegadores..<br></blockquote><blockquote>Instalando Squire<img><br></blockquote><p>Primero, visite la página de Squire Github y clone o descargue el código fuente:<br></p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_2.jpeg"><p>En segundo lugar, copiar el contenido de la <code>construir/</code> directorio en su aplicación.</p><p>Tercero, edita el <code><style></code> bosquejar <code>document.html</code> para agregar los estilos predeterminados que le gustaría que usara el editor (o enlace a una hoja de estilo externa).</p><h2>Utilizando Squire</h2><p>Veamos la aplicación de demostración incluida con Squire. Cuando se usa Squire, en lugar de un <code><textarea></code> elemento, usas un <code><iframe src="path/to/document.html"></code>. </p><p>En la demo que es:</p><pre><iframe src="build/document.html" onload="top.editor=this.contentWindow.editor"></iframe> </pre><p><code>Documento.html</code> es un lienzo en blanco con estilos predeterminados y carga 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">… A texto-decoración: subrayado; h1 font-size: 138.5%; … Blockquote border-left: 2px solid blue; margen: 0; relleno: 0 10px; </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html></pre><p>Cuando utiliza Squire, adjunta un detector de eventos al evento de carga del iframe. Cuando esto se dispara, puede tomar una referencia al objeto editor a través de<code> iframe.contentWindow.editor</code>. Por ejemplo, el iframe demo incluye:</p><p><code>onload = "top.editor = this.contentWindow.editor"</code><br></p><p>La demostración tiene dos tipos de enlaces para manipular el contenido dentro de Squire. Los comandos simples que pueden operar con cualquier texto seleccionado se ven así:</p><p><code><span>Negrita</span></code><br></p><p>Y los comandos complejos que requieren una entrada de usuario adicional se ven así: agregan el prompt c:</p><p><code><span>Tamaño de fuente</span></code></p><p>Así es como se ve la aplicación de demostración:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_3.jpeg"><p>El JavaScript que se encuentra en la parte superior de la página de demostración escucha los clics en estos comandos de intervalo. Si la clase de solicitud existe, recopila más información del usuario:</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>Luego, llama al editor Squire con el comando y cualquier valor proporcionado por el usuario. Squire entonces aplica el comando al texto seleccionado actualmente:</p><p><code>editor [id] (valor);</code></p><p>Puede obtener más información sobre Squire y ver su documentación completa de API en el ReadMe.</p><h2>Extendiendo la Demo</h2><p>A modo de ejemplo, agreguemos dos comandos que lean el estado del editor Squire. Agregaremos dos enlaces al final del encabezado del comando de la demostración:</p><pre> <p> obtener selección | obtener doc </p> </pre><p>Cuando selecciona un texto y hace clic en él, la selección aparecerá en la alerta como se muestra a continuación.</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_4.jpeg"><p>Examinemos la demo más estética y su barra de herramientas:</p><img src="//accentsconagua.com/img/images_12/using-squire-a-lightweight-html5-rich-text-editor_5.jpeg"><p>El bloque de cabecera de esta página integra hojas de estilo para Bootstrap y una llamada <code>Squire-UI</code>. También proporciona JavaScript para esto <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>Escudero</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> También ofrece html estático para un área de texto en el cuerpo. <div> <div> <div> <textarea>

Pero en carga, su JQuery. $ (documento) .ready función reemplaza la estática #foo textarea con su SquireUI.

La configuración de la barra de herramientas se implementa con una configuración bastante compleja de JQuery, AJAX, HTML5 y CSS. Está cargando esta página HTML para mostrar la mayoría de la barra de herramientas: 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], content: $ ('# drop-link'). html (), posición: 'bottom center', openOn: 'click');

Aquí hay un subconjunto del código fuente de Squire-UI.html para que pueda ver lo que se está cargando:

...

Podría haber sido bueno si hubieran proporcionado una barra de herramientas Bootstrap simplificada en el código de distribución como un complemento, pero ciertamente puede aprender de lo que hicieron en su propia demostración anterior..

Espero que encuentre a Squire útil para sus propias aplicaciones. Por favor, siéntase libre de publicar correcciones, preguntas o comentarios a continuación. También puedes contactarme en Twitter @reifman o enviarme un correo electrónico directamente.

`enlaces relacionados`

 Squire: Editor de texto enriquecido de FastMail
 Página de demostración de escudero
 Squire Codebase en Github





		
			
	   
	




Código