RichEditor

Rich text editor with a formatting toolbar; the value is an HTML string. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiRichEditor } from '@ziyarago/ui/vue'

With content

Package description
Vue
<UiRichEditor label="Package description" v-model="value" />

Empty

Notes
Vue
<UiRichEditor
  label="Notes"
  placeholder="Describe the itinerary..."
  v-model="value"
 />

Sizes

Description
Description
Description
Description
Description
Vue
<UiRichEditor size="xs" label="Description" v-model="value" />

<UiRichEditor size="sm" label="Description" v-model="value" />

<UiRichEditor size="md" label="Description" v-model="value" />

<UiRichEditor size="lg" label="Description" v-model="value" />

<UiRichEditor size="xl" label="Description" v-model="value" />

API reference

Rich text editor with a formatting toolbar, built on contenteditable. Use for formatted descriptions and notes.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring''HTML string.
labelstring'Editor'Label above the editor. Also the accessible name.
placeholderstring—Placeholder shown when empty. Defaults to "Write something…".
sanitizebooleanfalseStrip script, style, iframe, object, embed and similar tags plus on* and javascript: attributes from the emitted HTML, using a small allowlist sanitizer.
sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the editor innerHTML on every edit or toolbar action (sanitized when sanitize is set).

Notes

  • The editor only rewrites its content when modelValue differs from what is already in the DOM, so the caret is kept while typing.
  • sanitize is a best-effort allowlist, not a full XSS guarantee: sanitize on the server too before storing or rendering the HTML elsewhere.
  • Toolbar: bold, italic, underline, strikethrough, alignment, lists, quote and code block.