Text Editor - Architecture

#Usage

import { TextEditor } from '@primeui/vue-texteditor';

<TextEditor.Root>
    <TextEditor.Toolbar />
    <TextEditor.Content />

    <TextEditor.ContextToolbar>
        <TextEditor.ContextToolbarMore />
    </TextEditor.ContextToolbar>

    <TextEditor.BlockControls />
    <TextEditor.BlockMenu>
        <TextEditor.BlockSubmenu />
    </TextEditor.BlockMenu>

    <TextEditor.SlashMenu />
    <TextEditor.MentionMenu />

    <TextEditor.ImageUpload>
        <TextEditor.ImageUploadDropzone />
        <TextEditor.ImageUploadProgress />
    </TextEditor.ImageUpload>
    <TextEditor.DocumentUpload>
        <TextEditor.DocumentUploadDropzone />
        <TextEditor.DocumentUploadProgress />
    </TextEditor.DocumentUpload>

    <TextEditor.TableControls />
    <TextEditor.TableColumnMenu>
        <TextEditor.TableColumnSubmenu />
    </TextEditor.TableColumnMenu>
    <TextEditor.TableRowMenu>
        <TextEditor.TableRowSubmenu />
    </TextEditor.TableRowMenu>
    <TextEditor.TableCellMenu>
        <TextEditor.TableCellSubmenu />
    </TextEditor.TableCellMenu>

    <TextEditor.Navigator>
        <TextEditor.NavigatorTrigger />
        <TextEditor.NavigatorMenu />
    </TextEditor.Navigator>
</TextEditor.Root>

The root owns editor state, commands, the document model, history, and accessibility wiring. The tree above is an anatomy map: it shows the parts the editor can render. A real page declares only the toolbar, overlays, and surfaces it needs. Each part turns on its feature when it is present.

#Runtime Model

TextEditor has two layers.

Each part renders an empty surface and exposes its commands, state, and request data through a matching useXxxContext() accessor. The application brings the widgets; the runtime handles state and command dispatch.

Every part renders data-scope="texteditor" data-part="..." on its root element. The root additionally writes data-id (an SSR-stable per-instance ID) and data-disabled / data-readonly when those props are set. Style with these attributes; they are the public DOM contract.

#Anatomy

The structure is the default, not an advanced mode. It is how the editor keeps document behavior stable while the application owns the visible UI. Each part renders an empty surface; the application drops its own widget inside.

#First Editor

Start with TextEditor.Root, a toolbar widget inside TextEditor.Toolbar, and TextEditor.Content. Bind the value with v-model. The toolbar widget reads commands and state from useTextEditorContext().

#Editing Modes

The mode prop on TextEditor.Root selects the editing surface. The same parts, commands, and styling apply to both modes.

#Block

Each entry in the bound array is its own block. Blocks reorder via drag-and-drop, expose a per-block options menu, and accept new content from a slash command palette: headings, lists, tables, images, and documents.

#Markdown

Markdown is a feature, not a separate mode. It works inside both classic and block editors. Enable it with the markdown prop. Typing #, **, -, or > then converts to the matching rich-text element on input.

#Template First

TextEditor does not ship a built-in toolbar, context toolbar, block menu, or upload UI. The application owns every visible surface, while the runtime owns the document and commands.

Two reference template sets ship as a starting point. One uses PrimeUI components, the other uses native HTML with Tailwind. Both are copied into the host codebase with the CLI and can be edited freely.

#Plugins

Plugins register new capabilities at the runtime layer without modifying the editor. They add commands, intercept content, or connect to external services such as AI assistants, spell checkers, and collaboration backends.

#Feature Surface

Add parts after the mode and toolbar are clear. Each surface turns on its feature when mounted.

#Related Docs

• Setup
• LLMs
• Static Toolbar
• Block Mode
• API