En este manual vamos a explicar cómo crear un editor de texto enriquecido con Javascript, que permita editar contenido mediante el modelo de trabajo WYSIWYG (What You See Is What You Get).
Para el desarrollo de los editores de texto vamos a usar una herramienta muy útil llamada ProseMirror, que es un popular framework de desarrollo de editores de texto que nos ofrece muchas utilidades para que no tengamos que comenzar el trabajo desde cero.
ProseMirror no es un editor en sí, sino todo un completo framework con el que los desarrolladores podrán construir editores sin las complicaciones que supondría hacerlo todo por nosotros mismos.
A lo largo del Manual de ProseMirror vamos a realizar la creación de nuestro propio editor personalizado, paso a paso a lo largo de varios artículos. Primero comanzaremos con ejemplos básicos que nos ayuden a ir conociendo las diversas partes de este framework y luego pasaremos a artículos más complejos, donde se pongan todas las funcionalidades en un completo editor de texto enriquecido.
El objetivo final del Manual de ProseMirror es construir un componente de edición de texto WYSIWYG, que nos permita luego usarlo en diveros sitios web, con una funcionalidad básica. Te servirá a ti si estás deseando crear tu propio editor de texto o si estás queriendo extender el editor que vamos a desarrollar y lo deseas extender para mejorar sus funcionalidades.
Este manual está en proceso de escritura, por lo que verás novedades conforme pasen las semanas.
Artículos del manual
-
1
Primeros pasos con ProseMirror
Comenzamos viendo qué es ProseMirror y explicando algunas de las particularidades de este framework para el desarrollo de editores de texto con Javascript. Luego haremos un primer editor básico.
-
2
Comandos en ProseMirror
Ahora vamos a ver qué son los comandos de ProseMirror, aunque ya los usamos en el artículo anterior, queremos explorarlos con más detalle y ofrecer nuevos ejemplos y variantes de uso en los editores enriquecidos.
-
3
Inicialización del contenido en el editor de texto con ProseMirror
En este artículo aprenderemos a usar DOMParser para conseguir inicializar el contenido del editor de texto creado con Prosemirror a partir del contenido de un elemento de la página.
-
4
Hacer un botón para negrita en un editor ProseMirror
Después de haber visto cómo ejecutar comandos con combinaciones de teclas podemos aprender a ejecutar comandos Prosemirror al pulsar un botón de la página. En concreto aprenderemos a colocar una negrita.
-
5
Cómo crear plugins en ProseMirror
En este artículo veremos las bases para la creación de plugins en Prosemirror con ejemplos de varios plugins con los que aprender y practicar.
-
6
Obtener el código HTML que hay en un editor ProseMirror
Vamos a hacer un paso fundamental en el uso del editor, que consiste en obtener el código HTML que corresponde al contenido que el usuario está editando. Veremos varias alternativas de trabajo.
-
7
Schemas en ProseMirror
Una definición más detallada sobre qué son los schemas en Prosemirror y cómo podemos configurarlo al crear un editor para que sea capaz de soportar nuevos bloques personalizados.
-
8
Crear un editor de texto basado en Markdown
En este artículo veremos una nueva práctica interesante que realizar con el framework Prosemirror para la implementación de un editor de texto enriquecido WYSIWYG que genera código en el lenguaje Markdown.