Tiptap: editor per VueJS

Con le differenti tecnologie a disposizione degli Web developer, non è un caso che stiano nascendo sempre più editor dedicati, per venire incontro alle esigenze di chi sviluppa utilizzando un dato toolkit. Programmare con React è differente rispetto a programmare con Vue o con Angular, cosi come programmare in locale è diverso dallo sviluppare su GIT. Tiptap è un editor (della categoria rich-text editor) dedicato appositamente a chi sviluppa con il framework Javascript VueJS.

Tale soluzione è stata creata da Philipp Kühn che, commentando le caratteristiche dell'applicazione, ha dichiarato di averlo concepito quando era alla ricerca di un text editor che agevolasse il compito di scrivere codice basato su VueJS.

Le alternative trovate non lo avevano soddisfatto in quanto un editor dovrebbe essere facilmente estensibile e, soprattutto, non essere basato su dipendenze di vecchia generazione come jQuery.

Dato che per React esiste già qualcosa del genere, un ottimo editor modulare chiamato SlateJS, Kühn ha deciso di creare una controparte anche per React. Grazie a Prosemirror, toolkit per realizzare rich-text editors utilizzato anche da corporation molto conosciute come Atlassian e New York Times, ha potuto produrre Tiptap.

Il template di partenza generato da Tiptap è il seguente:

<template>
<editor>
<!-- Add HTML to the scoped slot called &grave;content&grave; -->
<div slot="content" slot-scope="props">
<p>Hi, I'm just a boring paragraph</p>
</div>
</editor>
</template>
<script>
// Import the editor
import { Editor } from 'tiptap'
export default {
components: {
Editor,
},
}
</script>

I dati generati possono essere salvati come HTML raw oppure come una rappresentazione JSON serializzabile:

{
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {
"level": 2
},
"content": [
{
"type": "text",
"text": "Export HTML or JSON"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Hello from Tiptap."
}
]
}
]
}

Direttamente nella pagina ufficiale del progetto è possibile visualizzare una demo perfettamente funzionante che ci permette di usare l'editor in una collezione di contesti: link, immagini, allineamento del testo, tooltips, barre di navigazione, shortcuts, code-highlighting, embeds, placeholder e molte altro.

Le opzioni sono selezionabili nella barra di navigazione posta direttamente sopra l'editor, una volta selezionate il risultato della demo sarà prodotto direttamente nella pagina.

Via Tiptap