Text Editor - Static Toolbar

The static toolbar surface, a headless container the host application fills with its own widgets.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
<TextEditor.Root v-model="value">
    <TextEditor.Toolbar>
        <Toolbar />
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

Use the static toolbar for a persistent role="toolbar" surface above the content that the host fills with its own widgets. TextEditor.Toolbar sits above the content as a persistent surface. The widget inside it reads commands and state from useTextEditorContext() and renders whatever buttons the application needs.

The toolbar height is published on the parent Root as --p-text-editor-toolbar-height, so siblings such as the Navigator and BlockControls offset themselves without coupling to source order.

The full root surface is reachable from the widget: useTextEditorContext() exposes commands, state, pluginCommands, getHTML, getJSON, getBlocks, getText, setValue, disabled, readonly, plus heading and license metadata.

<!-- Toolbar.vue -->
<script setup lang="ts">
import { useTextEditorContext } from '@primeui/vue-texteditor';

const { commands, state } = useTextEditorContext();
</script>

<template>
    <button @click="commands.bold()" :aria-pressed="state.bold">B</button>
    <button @click="commands.italic()" :aria-pressed="state.italic">I</button>
    <button @click="commands.underline()" :aria-pressed="state.underline">U</button>
</template>

#Alternative: inline with slot props

<TextEditor.Toolbar> also surfaces { commands, state, plugins } on its default slot.

<TextEditor.Toolbar v-slot="{ commands, state }">
    <button @click="commands.bold()" :aria-pressed="state.bold">B</button>
    <button @click="commands.italic()" :aria-pressed="state.italic">I</button>
</TextEditor.Toolbar>

#Example

UI parts ship with the product.

#Basic

A small toolbar with common formatting options.

Loading Demo...

#Advanced

The same surface with an extended set of formatting controls.

Loading Demo...

#Complete

The advanced toolbar plus Mention, Table, and the Image and Document uploads, all driven from the same Toolbar UI part.

Loading Demo...

#API

Toolbar widgets read commands, state, and pluginCommands from useTextEditorContext(). Slots and Contexts covers the toolbar outlet and its slot props; API is the full reference.