Editores de texto enriquecido: Tiptap
Integre el editor Tiptap basado en ProseMirror en un formulario de SvelteKit con un wrapper de Svelte.
Editores de texto enriquecido: Tiptap es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Tiptap
Tiptap es un editor popular basado en ProseMirror, con un sistema de extensiones fácil de usar.
Instalación
Añada el núcleo y el kit inicial.
npm install @tiptap/core @tiptap/starter-kitInicialización
Cree un Editor en onMount que apunte a un div.
const editor = new Editor({ element: el, extensions: [StarterKit] });Vincular al DOM
Use bind:this para obtener la referencia del elemento.
<div bind:this={el} class="editor" />Limpieza
Llame a editor.destroy() en onDestroy para liberar recursos.
Vinculación bidireccional
Suscríbase al evento de actualización del editor para sincronizar el contenido con un store de Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());Barra de herramientas
Construya una barra de herramientas con botones que llamen a editor.chain().focus().toggleBold().run(), entre otros.
Estados activos reactivos
Suscríbase a las actualizaciones del editor para resaltar los botones activos.
Extensiones
Añada imágenes, menciones, tablas y bloques de código mediante las extensiones de Tiptap.
Personalización del esquema
Defina su propio esquema para crear experiencias de edición específicas del dominio.
Envoltorio para SvelteKit
Envuelva el editor en un componente con una prop content y actualizaciones emitidas.
Dispositivos móviles
Pruebe en dispositivos táctiles; ProseMirror gestiona bien la selección en distintas plataformas.
Comprobación rápida
¿Qué hace editor.destroy()?
Resumen
Envuelva Tiptap en un componente con bind:this y hooks del ciclo de vida. Construya barras de herramientas mediante comandos del editor.
Preguntas frecuentes
¿La lección «Editores de texto enriquecido: Tiptap» es gratis?
Sí — el texto completo de «Editores de texto enriquecido: Tiptap» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Editores de texto enriquecido: Tiptap»?
Integre el editor Tiptap basado en ProseMirror en un formulario de SvelteKit con un wrapper de Svelte. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Editores de texto enriquecido: Tiptap»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Uso de Tailwind CSS con SvelteKit
- Gráficos de D3.js en Svelte
- Mapas de Leaflet con actions de Svelte
- Editores de texto enriquecido: Tiptap