Vue Wiki
Editor delle pagine wiki per l'ERP — titoli H1–H6, link, immagini, tabelle, codice evidenziato, callout, sezioni richiudibili, menu dei comandi / e commenti ancorati al testo.
Cos'è @pzeta/vue-wiki
@pzeta/vue-wiki è la libreria Vue 3 per scrivere e mostrare le pagine wiki dei moduli ERP (Knowledge in primis). Il suo componente, WikiEditor, è un editor rich-text basato su Tiptap 3 che salva HTML e che il modulo estende con i propri comandi e blocchi, senza conoscere Tiptap.
Questa documentazione si riferisce alla v0.5.x.
WikiEditor è arrivato con la 0.5.0: fino alla 0.4.4 la libreria esportava solo il plugin, senza componenti.Funzionalità principali
- Contenuto completo — titoli H1–H6, grassetto, corsivo, sottolineato, barrato, codice in linea, link, elenchi, citazioni, separatori
- Blocchi — codice con evidenziazione della sintassi, tabelle, immagini, callout (
info,success,warn,danger), sezioni richiudibili - Due barre — una fissa, con i comandi del blocco in cui si trova il cursore (tabella, linguaggio del codice, tipo di callout), e una che compare sulla selezione
- Menu dei comandi
/— con i comandi dell'editor e quelli del modulo (/Indice,/Kanban Elementi…), i cui blocchi li disegna il modulo con uno slot - Commenti ancorati — «Commenta» sulla selezione, testo evidenziato e indicatori nel margine destro
- Nessun CSS da caricare — lo stile sta in classi Tailwind standard scritte nell'HTML, già presenti nella safelist della shell
- Contenuto sicuro — l'HTML in ingresso passa dallo schema: ciò che l'editor non rappresenta, e ogni link o immagine con indirizzo non sicuro, viene scartato
Quando usarlo
| Devo… | Uso |
|---|---|
| Scrivere o mostrare una pagina wiki con link, tabelle, codice e commenti | WikiEditor |
| Un campo rich-text breve dentro un form schema-driven | TiptapEditor di @pzeta/vue-form |
Sezioni
| Sezione | Contenuto |
|---|---|
| Getting Started | Installazione, peer dependencies, traduzioni, plugin |
| WikiEditor | Props, eventi, slot, metodi esposti, barre e scorciatoie |
| Comandi e blocchi del modulo | Comandi / aggiuntivi, ContestoComando, blocchi personalizzati |
| Commenti ancorati | Ancore, evidenziazione, margine, sola lettura |
| Contenuto HTML | Formato salvato, indirizzi ammessi, stile, rendering fuori dall'editor |
| Tipi | Tipi TypeScript pubblici |
Nessuna sotto-pagina disponibile.
Quick start
<script setup lang="ts">
import { ref } from 'vue'
import { WikiEditor } from '@pzeta/vue-wiki'
const contenuto = ref('<h1>Procedura resi</h1><p>Testo della pagina…</p>')
</script>
<template>
<WikiEditor v-model="contenuto" />
</template>
Prima di montarlo, il dizionario it della libreria va unito a quelli dell'applicazione in configureI18n: vedi Installazione.