Formulário

Editor

Texto rico com motor próprio e sem dependências: títulos, listas, tabelas, imagens, links e atalhos de Markdown, ligado como HTML sanitizado.

Testado com WAI-ARIA

Importação

main.ts

import { Editor } from '@vitral/vue';

Padrão

Article

Release notes

This editor writes semantic HTML, keeps undo history and understands Markdown as you type. Try ## , - or **bold**.

Paste from Word or Google Docs
Select text and press Ctrl+K for a link

Nothing pasted can run a script: only what the schema knows survives.

1<script setup lang="ts">2import { Editor, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const article = ref(6    '<h2>Release notes</h2><p>This editor writes <strong>semantic HTML</strong>, keeps <em>undo</em> history and understands <code>Markdown</code> as you type. Try <code>## </code>, <code>- </code> or <code>**bold**</code>.</p>' +7        '<ul data-type="taskList"><li data-type="taskItem" data-checked="true"><p>Paste from Word or Google Docs</p></li><li data-type="taskItem" data-checked="false"><p>Select text and press Ctrl+K for a link</p></li></ul>' +8        '<blockquote><p>Nothing pasted can run a script: only what the schema knows survives.</p></blockquote>'9);10</script>11 12<template>13    <StackPanel spacing="0.375rem" style="width: 100%">14        <Label for="ed-article">Article</Label>15        <Editor id="ed-article" v-model="article" placeholder="Write something…" />16    </StackPanel>17</template>

Barra de ferramentas personalizada

`toolbar` recebe grupos de nomes de itens; o slot `toolbar` substitui a barra por peças suas.

Only the basics here.

1<script setup lang="ts">2import { Editor, EditorButton, EditorToolbar, EditorToolbarGroup, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const note = ref('<p>Only the basics here.</p>');6</script>7 8<template>9    <StackPanel spacing="1rem" style="width: 100%">10        <Editor v-model="note" :toolbar="[['bold', 'italic', 'strike'], ['bulletList', 'orderedList'], ['link', 'undo', 'redo']]" aria-label="Note" />11        <Editor aria-label="Minimal" placeholder="The toolbar slot">12            <template #toolbar>13                <EditorToolbar>14                    <EditorToolbarGroup>15                        <EditorButton command="heading2" />16                        <EditorButton command="bold" />17                        <EditorButton command="italic" />18                    </EditorToolbarGroup>19                    <EditorToolbarGroup>20                        <EditorButton command="clear" show-label />21                    </EditorToolbarGroup>22                </EditorToolbar>23            </template>24        </Editor>25    </StackPanel>26</template>

Menu de barra e ações de bloco

Digite `/` no começo de uma palavra e os blocos são oferecidos, filtrados enquanto você digita; Enter ou um clique insere um. Ao lado do bloco em que está o cursor há uma alça, que abre duplicar, mover, transformar em texto e excluir. `slash-menu` e `block-menu` recebem entradas suas, ou `false` para nenhuma.

Type a slash on the empty line under this one.

This one offers three commands of its own.

1<script setup lang="ts">2import { Editor, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const blocks = ref('<p>Type a slash on the empty line under this one.</p><p></p>');6const custom = ref('<p>This one offers three commands of its own.</p><p></p>');7 8// A slash command is data: a name, a line about it, and either a command the9// editor knows or a `run` of your own.10const slashCommands = [11    { id: 'heading2', label: 'Section', description: 'A heading for a section', icon: 'heading2', command: ['toggleHeading', 2] as const },12    { id: 'taskList', label: 'Checklist', description: 'Things to tick off', icon: 'listChecks', command: ['toggleTaskList'] as const },13    {14        id: 'today',15        label: "Today's date",16        description: 'Puts the date in, as text',17        icon: 'calendar',18        keywords: ['date', 'now'],19        run: (editor: { run: (name: string, ...args: unknown[]) => boolean }) => editor.run('insertText', new Date().toLocaleDateString())20    }21];22</script>23 24<template>25    <StackPanel spacing="1rem" style="width: 100%">26        <Editor v-model="blocks" aria-label="Slash menu example" :toolbar="[['blockType'], ['bold', 'italic']]" />27        <Editor28            v-model="custom"29            aria-label="Own slash commands"30            :toolbar="false"31            :slash-menu="slashCommands"32            :block-menu="[{ id: 'delete', label: 'Delete', icon: 'trash', run: (editor) => editor.run('deleteBlock') }]"33        />34    </StackPanel>35</template>

Barra de ferramentas flutuante

`bubble-menu` mostra uma barra de ferramentas sobre o texto selecionado; com `:toolbar="false"`, ela é a única.

Select some of this text: a floating toolbar appears over it, with bold, italic, a link and a colour.

1<script setup lang="ts">2import { Editor } from '@vitral/vue';3import { ref } from 'vue';4 5const bubble = ref('<p>Select some of this text: a floating toolbar appears over it, with bold, italic, a link and a colour.</p>');6</script>7 8<template>9    <Editor v-model="bubble" :toolbar="false" bubble-menu aria-label="Bubble toolbar example" style="width: 100%" />10</template>

Somente leitura

Terms

Read-only text can still be selected and copied, and links open.

First
Second

1<script setup lang="ts">2import { Editor } from '@vitral/vue';3import { ref } from 'vue';4 5const terms = ref(6    '<h3>Terms</h3><p>Read-only text can still be <mark data-color="yellow">selected and copied</mark>, and <a href="https://example.com" target="_blank">links</a> open.</p><ol><li><p>First</p></li><li><p>Second</p></li></ol>'7);8</script>9 10<template>11    <Editor v-model="terms" readonly :toolbar="false" aria-label="Terms" style="width: 100%" />12</template>

Com contagem e limite

`max-length` interrompe a digitação e a colagem no limite; a contagem descreve o texto.

Bio

Keep it short.

1<script setup lang="ts">2import { Editor, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const bio = ref('<p>Keep it short.</p>');6</script>7 8<template>9    <StackPanel spacing="0.375rem" style="width: 100%">10        <Label for="ed-bio">Bio</Label>11        <Editor id="ed-bio" v-model="bio" :max-length="140" :toolbar="[['bold', 'italic', 'link']]" />12    </StackPanel>13</template>

Saída em HTML e JSON

Type here and watch both formats change.

<p>Type here and watch <strong>both</strong> formats change.</p>

null

1<script setup lang="ts">2import { Editor, type EditorJSON } from '@vitral/vue';3import { ref } from 'vue';4 5const output = ref('<p>Type here and watch <strong>both</strong> formats change.</p>');6const outputJson = ref<EditorJSON | null>(null);7</script>8 9<template>10    <Editor v-model="output" v-model:json="outputJson" aria-label="Output example" :toolbar="[['blockType'], ['bold', 'italic', 'color', 'highlight'], ['bulletList', 'link']]" style="width: 100%" />11    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; width: 100%">12        <pre class="demo-output" aria-label="HTML" tabindex="0" style="margin: 0; max-height: 16rem; overflow: auto; white-space: pre-wrap; font-size: 0.75rem">{{ output }}</pre>13        <pre class="demo-output" aria-label="JSON" tabindex="0" style="margin: 0; max-height: 16rem; overflow: auto; font-size: 0.75rem">{{ JSON.stringify(outputJson, null, 2) }}</pre>14    </div>15</template>

Composto por partes

`Editor.Root`, `Editor.Toolbar`, `Editor.Button`, `Editor.Content`, `Editor.BubbleMenu`, `Editor.Footer` e `Editor.Count`, também exportados como `EditorRoot`, `EditorToolbar`… compartilham um só editor; `useEditor()` chega até ele a partir dos seus próprios componentes.

This one is built from parts, with a toolbar of its own and a word count.

1<script setup lang="ts">2import { Editor } from '@vitral/vue';3import { ref } from 'vue';4 5const composed = ref('<p>This one is built from parts, with a toolbar of its own and a word count.</p>');6const words = ref(0);7</script>8 9<template>10    <Editor.Root v-model="composed" placeholder="Parts…" aria-label="Composed editor" style="width: 100%" @text-change="words = $event.textValue.split(/\s+/).filter(Boolean).length">11        <Editor.Toolbar>12            <Editor.ToolbarGroup>13                <Editor.BlockSelect :options="['paragraph', 'heading1', 'heading2']" />14            </Editor.ToolbarGroup>15            <Editor.ToolbarGroup>16                <Editor.Button command="bold" />17                <Editor.Button command="italic" />18                <Editor.ColorPicker kind="highlight" />19                <Editor.Button command="link" />20            </Editor.ToolbarGroup>21            <Editor.ToolbarGroup>22                <Editor.Button command="taskList" />23                <Editor.ImageButton />24                <Editor.TableMenu />25            </Editor.ToolbarGroup>26        </Editor.Toolbar>27        <Editor.Content />28        <Editor.BubbleMenu :items="['bold', 'italic', 'link']" />29        <Editor.Footer>30            <span style="margin-inline-end: auto">Edited words: {{ words }}</span>31            <Editor.Count :words="false" />32        </Editor.Footer>33    </Editor.Root>34</template>

API

Lido de packages/vue/src/components/Editor/types.ts, então diz o que o componente aceita de fato.

Props

Nome	Tipo	Descrição
placeholder	string	—
readonly	boolean	O texto pode ser lido, selecionado e copiado, não alterado.
disabled	boolean	—
invalid	boolean	—
variant	InputVariant	O padrão é o `inputVariant` do plugin.
maxLength	number	O máximo de caracteres que o texto pode ter; digitar e colar param aí.
autofocus	boolean	Dá foco ao texto, com o cursor no fim, ao montar.
colors	string[]	Nomes de cores da paleta que os seletores de cor e de destaque oferecem, em ordem. O padrão é a paleta inteira.
historyDelay	number	Milissegundos dentro dos quais digitação seguida conta como um só passo de desfazer. O padrão é 500.
slashMenu	boolean \| SlashCommand[]	O menu que uma `/` abre no início de uma palavra: `true` para os blocos que o editor conhece, os comandos a oferecer, ou `false` para nenhum. O padrão é true.
blockMenu	boolean \| BlockAction[]	A alça ao lado do bloco em que está o cursor: `true` para as ações de sempre, as ações a oferecer, ou `false` para nenhuma. O padrão é true.
toolbar	boolean \| EditorToolbarItem[][]	A barra de ferramentas: `false` para nenhuma, ou grupos de nomes de itens, como em `[['bold', 'italic'], ['link']]`. O slot `toolbar` a substitui por completo.
bubbleMenu	boolean \| EditorToolbarItem[]	Uma barra de ferramentas flutuante sobre o texto selecionado; `true` para os botões padrão, ou os itens a mostrar.
showCount	boolean	Mostra a contagem de palavras e caracteres abaixo do texto. Ligado por padrão quando há `maxLength`.
showWordCount	boolean	Mostra a contagem de palavras ao lado da de caracteres. O padrão é true.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

Evento	Payload	Descrição
update:modelValue	value: string	—
update:json	value: EditorJSON	—
text-change	event: EditorTextChangeEvent	O conteúdo mudou.
selection-change	event: EditorSelectionChangeEvent	—
focus	event: FocusEvent	—
blur	event: FocusEvent	—
load	event: { instance: unknown }	O editor está pronto; `instance` é o editor sem framework por trás do componente.

Slots

Nome	Props do slot	Descrição
toolbar	—	Substitui a barra de ferramentas. Monte uma com `EditorToolbar`, `EditorButton` e as outras partes.
footer	—	Substitui o conteúdo do rodapé (a contagem).