Editores de rich text: Tiptap
Integre o editor Tiptap ProseMirror a um formulário SvelteKit com um wrapper do Svelte.
Editores de rich text: Tiptap é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Tiptap
Tiptap é um editor popular baseado em ProseMirror, com um sistema de extensões intuitivo.
Instalação
Adicione o núcleo e o StarterKit.
npm install @tiptap/core @tiptap/starter-kitInicialização
Crie um editor em onMount direcionado a uma div.
const editor = new Editor({ element: el, extensions: [StarterKit] });Vinculação ao DOM
Use bind:this para obter a referência do elemento.
<div bind:this={el} class="editor" />Limpeza
Chame editor.destroy() em onDestroy para liberar recursos.
Vinculação bidirecional
Assine o evento de atualização do editor para sincronizar o conteúdo com um armazenamento do Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());Barra de ferramentas
Crie uma barra de ferramentas com botões que chamem editor.chain().focus().toggleBold().run() e outros comandos.
Estados ativos reativos
Assine as atualizações do editor para destacar os botões ativos.
Extensões
Adicione imagens, menções, tabelas e blocos de código por meio das extensões do Tiptap.
Personalização do esquema
Defina seu próprio esquema para experiências de edição específicas do domínio.
Encapsulamento para SvelteKit
Envolva o editor em um componente com uma propriedade de conteúdo e atualizações disparadas.
Dispositivos móveis
Teste em dispositivos com toque; ProseMirror lida bem com a seleção em diferentes plataformas.
Verificação rápida
O que editor.destroy() faz?
Recapitulação
Envolva Tiptap em um componente com bind:this e ganchos do ciclo de vida. Crie barras de ferramentas por meio dos comandos do editor.
Perguntas Frequentes
A aula “Editores de rich text: Tiptap” é grátis?
Sim — o texto completo de “Editores de rich text: Tiptap” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Editores de rich text: Tiptap”?
Integre o editor Tiptap ProseMirror a um formulário SvelteKit com um wrapper do Svelte. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Editores de rich text: Tiptap”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Usando Tailwind CSS com SvelteKit
- Gráficos D3.js no Svelte
- Mapas Leaflet com ações do Svelte
- Editores de rich text: Tiptap