En algún punto de nuestra actividad en la web hemos usado un editor de texto enriquecido. El caso mas próximo para cualquier usuario, es el del correo electrónico. Para los que no saben, el texto enriquecido, es aquel texto que se le da cierto formato para que tome ciertas características, comúnmente conocidas como negrita, subrayado, tachado, etc.

Este tipo de editor de texto, es bastante usado en aquellos proyectos en los que se desea dar al usuario la posibilidad de editar algo, como un comentario, dar formato a un mensaje, editar un articulo. La ventaja de usar Quill, es que el usuario podrá realizar cualquier edición en HTML, sin la necesidad de conocer las etiquetas que se usarían.

Primeros Pasos

Para empezar, Quill es un plugin de JavaScript, con el cual nos ahorraremos cierta cantidad de trabajo ;) Lo primero que haremos, es descargar este plugin, dando click en el siguiente enlace. Se descargara un archivo compreso, solo tendrá que descomprimirlo y allí encontrara el script, en su versión normal y compresa.

Al igual que otras librerías y scripts de JavaScript, debemos de incluir Quill en el head del HTML.

[html]

<link rel="stylesheet" href="css/quill.snow.css">
<script src="js/quill.js"></script>

[/html]

Para las opciones básicas, solo necesita estos dos archivos.

El Código HTML

Este plugin depende de gran manera de la estructura de HTML y la mayoría del código está en las etiquetas, y no en el JavaScript. Si quieres un editor bastante complejo, tendrás que tener una gran estructura en HTML.

Para el ejemplo, haremos lo siguiente:

• Transformar el texto seleccionado en negrita.
• Letra cursiva.
• Letra subrayada.
• Letra en negrita.
• Cambiar el tamaño del texto.
• Añadir un enlace al texto seleccionado.

En la estructura, crearemos primero el contenedor que tendrá los botones para el editor de texto enriquecido.

[html]

<div id="toolbar" class="sc-toolbar-container toolbar">

</div>

[/html]

El siguiente paso es crear el código HTML para nuestros botones, como añadimos la plantilla de estilos del plugin, usaremos el estilo del tema así que se añadirán algunas clases extra, pero esas clases (por ejemplo: sc-format-button) no son necesarias para que el editor para trabaje:

[html]

<div id="toolbar" class="sc-toolbar-container toolbar">
<div class="sc-format-group">
<span class="sc-bold sc-format-button"></span>
<span class="sc-italic sc-format-button"></span>
<span class="sc-strike sc-format-button"></span>
<span class="sc-underline sc-format-button"></span>
<span class="sc-link sc-format-button"></span>
<span class="sc-format-separator"></span>
</div>
</div>

[/html]

Como se puede ver que primero se define un grupo que contendrá todos estos botones y luego se crean los botones usando clases asignadas. Se agregaron: negrita, cursiva, tachado, subrayar y opciones de enlace y luego un separador.
El separador es sólo para mostrar, ya que ahora se agregó en la lista desplegable para el tamaño de la fuente:

[html]

<select class="sc-size">
<option value="small">Menos</option>
<option value="normal">Normal</option>
<option value="large">Mas</option>
</select>

[/html]

Sólo tiene que añadir este fragmento de código antes de la etiqueta de cierre la barra de herramientas y nuestra barra de herramientas estará diseñada, lo que nos faltaría, es tener nuestro editor de texto, para esto usamos otro div:

[html]

<div id="editor">
<p>Hola Visitantes De HostDime Colombia !</p></br>
<p>Esto es solo un texto de ejemplo que puedes <b>eliminar</b>.</p>
</div>

[/html]

El Codigo JavaScript

Ahora que nuestro HTML está todo hecho sólo tenemos que conectar todas las piezas con JavaScript. En primer lugar tenemos que crear una instancia de un nuevo objeto de Quill y pasar el id del div del editor como parámetro.

[js] var editor = new Quill(‘#editor’); [/js]

Si se prueba solo con el anterior código, veremos que funciona, pero de una manera muy rudimentaria: los botones realmente no hacer nada y eso no es lo que queremos, para conseguir el editor que queremos hay que añadir algunos módulos:

[js]

var editor = new Quill(‘#editor’, {
modules: {
‘toolbar’: { container: ‘#toolbar’ },
‘link-tooltip’: true
},
theme: ‘snow’,//estilo del tema
});

[/js]

Como puedes ver se han añadido dos módulos simples, uno para identificar la barra de herramientas y hacer que funcione correctamente y uno para dejar Quill sepa que tenemos un botón de enlace y queremos activar el módulo de enlace de información sobre herramientas. Ademas, hemos añadido el estilo de este plugin.

El resultado seria el siguiente:

See the Pen zwvxg by HostDime Colombia (@HostDimeColombia) on CodePen.