Text Editor - Events & Output
Listen to granular editor lifecycle events and serialize the document to Markdown.
#Usage
<script setup lang="ts">
import { TextEditor } from '@primeui/vue-texteditor';
import { ref, useTemplateRef } from 'vue';
const value = ref('');
const root = useTemplateRef('root');
const onMarkdown = () => console.log(root.value?.getMarkdown());
</script>
<template>
<TextEditor.Root ref="root" v-model="value" @editor-create="..." @selection-update="..." @editor-focus="..." @editor-blur="...">
<TextEditor.Content />
</TextEditor.Root>
</template>Beyond v-model (which tracks the document value), TextEditor.Root emits granular lifecycle events and exposes output serializers on its instance.
#Events
| Event | Payload | When |
|---|---|---|
selection-update | — | The selection changes (caret move or range change) with no edit |
editor-focus | — | The editor gains focus |
editor-blur | — | The editor loses focus |
editor-create | — | The editor view is created and ready (once, after mount) |
Document edits are reported through v-model and value-change. selection-update covers selection-only changes, which makes caret movement observable (for example, to reposition a floating UI) without polling.
#Output serializers
The instance (via ref) exposes the document in several formats. All are also reachable from descendant widgets through useTextEditorContext().
| Method | Returns | Description |
|---|---|---|
getHTML() | string | Document as HTML |
getJSON() | unknown | ProseMirror document as loss-less JSON |
getText() | string | Plain-text projection |
getMarkdown() | string | Markdown projection (same serializer as Markdown copy) |
getBlocks() | string[] | Block-mode array (one HTML string per block) |
getMarkdown() uses the same serializer as Markdown copy/paste, so it round-trips headings, emphasis, lists, links, code, tables, and fenced code blocks.
#Example
Type, move the caret, focus/blur, and click Get Markdown.