Text Editor - Character Count Plugin

Live character and word counts with an optional, non-enforced limit.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
import { characterCountPlugin } from './character-count-plugin';
<TextEditor.Root v-model="value" :plugins="[[characterCountPlugin, { limit: 280 }]]">
    <TextEditor.Toolbar v-slot="{ plugins }">
        <CounterDisplay :plugins="plugins" />
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

The Character Count plugin reports live document statistics. Read them on demand with getStats(), or subscribe with onChange(cb) to keep a counter in sync as the document changes. An optional limit is surfaced through isOverLimit() for warning UIs. The plugin never blocks input.

#Options

OptionTypeDefaultDescription
limitnumber—Soft character cap reported via isOverLimit(); not enforced

#Commands

CommandSignatureDescription
getStats() => CharacterCountStatsCurrent { characters, words, overLimit }
characters() => numberCurrent character count
words() => numberCurrent word count
isOverLimit() => booleanWhether the count exceeds limit
onChange(cb) => () => voidSubscribe to live stats; returns an unsubscribe fn

#Subscribing to live updates

onChange fires immediately with the current stats and again after every document change. It returns an unsubscribe function.

const stop = plugins.characterCount?.onChange((s) => {
    console.log(s.characters, s.words, s.overLimit);
});

// later
stop?.();

#Example

Type to watch the counter update; it turns red past the 280-character limit.

Loading Demo...