ProseMirror

> Temas > ProseMirror
Editar

ProseMirror es un framework Javascript para la creación de editores de texto enriquecido.

ProseMirror es un toolkit avanzado y extensible para el desarrollo de editores de texto enriquecido para la web.

Por sus características es idea para la creación de documentos que vamos a editar con WYSIWYG (lo que ves es lo que obtienes), o en "vista diseño" como a veces también se dice. Gracias a este estilo de edición de contenido, el usuario obtiene mayor facilidad de crear texto con formato.

La característica principal de ProseMirror es que edita el contenido con un modelo de datos propio, desde el que luego podemos generar documentos en formatos distintos, como podría ser HTML o Markdown. Además, el hecho de utilizar su propio sistema para modelar los documentos, permite que el código generado con el editor sea limpio y perfectamente personalizable, pudiendo el desarrollador definir qué conjunto de etiquetas va a permitir y cómo se van a generar en el código resultante.

Más información:

ProseMirror

Manuales

Manual de ProseMirror para la creación de editores de texto con Javascript

Manual de ProseMirror para la creación de editores de texto con Javascript

Cómo crear un editor de texto enriquecido (WYSIWYG) con Javascript usando el popular framework ProseMirror.

Por qué usar ProseMirror

Si estás necesitando un editor de texto que permita gestionar el contenido de cualquier elemento y que tenga la posibilidad de agregar negritas, párrafos, encabezados, imágenes y muchas otras cosas tienes dos posibilidades:

  • Usar un editor ya listo, como los populares TinyMCE o Quill, lo que te permite instalar el plugin, configurarlo y comenzar a usar el editor sin demasiadas complejidades.
  • Crear tu propio editor con un framework del estilo de ProseMirror.

¿Por qué querrías liarte creando tu propio editor?

El motivo principal es porque entonces puedes incorporar la funcionalidad que deseas a tu editor y personalizarla a tu gusto. Muchos editores ya listos también lo permiten, pero en realidad no hasta el punto que podrías conseguirlo con un desarrollo personalizado.

Otros motivos son:

  • Con ProseMirror te aseguras tener un código editable limpio y no un HTML enrevesado como con otros editores
  • Con ProseMirror puedes tener diversas salidas en formatos alternativos
  • Puedes crear tu propio set de utilidades de edición, que rendericen a las etiquetas que realmente necesites
  • Puedes personalizar completamente la salida, por ejemplo añadiendo clases a las etiquetas o permitiendo crear etiquetas nuevas en el contenido editable, sacando partido a tecnologías como Web Components
  • El peso de tu editor puede ser mucho más ligero que si usas alternativas ya listas
  • Con ProseMirror puedes construir un editor con la posibilidad de colaboración en tiempo real
  • Es un software libre que puedes usar sin pagar ningún tipo de licencia

Editar

Funcionalidades de ProseMirror

Algunas funcionalidades o posibilidades de ProseMirror para la creación de tus editores WYSIWYG son las siguientes:

  • Posibilidad de hacer edición colaborativa en tiempo real
  • Modular, existiendo muchas piezas que puedes usar, o no, en función de tus necesidades
  • Creación de tus propios schema, que son la definición de los bloques de edición y sus características
  • Extensible mediante plugins
  • Permite undo, redo de manera sencilla
  • Está pensado con características de programación funcional, con estados inmutables
  • Permite integrarse bien en frameworks modernos como React o Vue y además en Web Components, usando Custom Elements con Shadow DOM.

Editar

¿Quieres añadir algo sobre ProseMirror?

Crea artículos, recursos o comparte información sobre ProseMirror

Crear un bloque

Temas relacionados

Preguntas y respuestas de ProseMirror

Se han recibido 0 faqs en ProseMirror

Hacer una pregunta