co-rich-text-editor

Demo

Ver código

<co-rich-text-editor preset="task" label="Ejemplo" placeholder="Escribe aquí…"></co-rich-text-editor>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`accountFonts`	`account-fonts`	`string \| undefined \| { label: string; value: string; }[]`	`—`	Account/imported fonts shown in a separate "Imported fonts" section. JS property: `Array<{ label: string; value: string }>`. HTML attribute: JSON string of the same array.
`autofocus`	`autofocus`	`boolean`	`false`
`customExtensions`	—	`object[] \| undefined`	`—`	Extra Tiptap extensions appended to the preset (JS property only). Registered at editor creation — required for new schema nodes (images, tables, embeds, …) that `getEditorInstance()` cannot add afterwards.
`disabled`	`disabled`	`boolean`	`false`
`features`	`features`	`object \| string \| undefined`	`—`	Feature overrides (JSON string for HTML attr, or object via JS property).
`fontFamilies`	`font-families`	`string \| undefined \| { label: string; value: string; }[]`	`—`	Font families available in the bubble menu font selector. JS property: `Array<{ label: string; value: string }>`. HTML attribute: JSON string of the same array. If not provided, a default list of system fonts is used.
`fontLoader`	—	`(() => Promise<{ label: string; value: string; url?: string \| undefined; }[]>) \| undefined`	`—`	Async callback that loads account/imported fonts. Called once when the font dropdown opens for the first time. Must return `Array<{ label: string; value: string; url?: string }>`. If `url` is provided, the font is registered via FontFace API. JS property only — cannot be set via HTML attribute.
`fontsLoading`	`fonts-loading`	`boolean \| undefined`	`—`	Whether account fonts are currently loading.
`helperText`	`helper-text`	`string \| undefined`	`—`
`imageUpload`	—	`((file: File) => Promise<string>) \| undefined`	`—`	Host image upload handler (JS property): `(file) => Promise<url>`.
`label`	`label`	`string \| undefined`	`—`
`locale`	`locale`	`string`	`'en'`	BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English.
`maxLength`	`max-length`	`number \| undefined`	`—`
`placeholder`	`placeholder`	`string`	`''`
`preset`	`preset`	`"comment" \| "document" \| "email" \| "task"`	`'task'`	Preset controlling allowed nodes/marks, toolbar and sanitization.
`readonly`	`readonly`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`secondaryLabel`	`secondary-label`	`string \| undefined`	`—`
`showCharacterCount`	`show-character-count`	`boolean`	`false`
`status`	`status`	`"default" \| "error" \| "info" \| "success" \| "warning"`	`'default'`
`toolbar`	`toolbar`	`"auto" \| "basic" \| "compact" \| "full" \| "none"`	`'auto'`	Toolbar layout. `auto` uses the preset default.
`value`	`value`	`null \| string`	`null`	ProseMirror document as a JSON string. `null`/empty = empty editor.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coBlur`	`void`	✓	✓
`coChange`	`RichTextOutput`	✓	✓	Emitted on blur (committed value).
`coClear`	`void`	✓	✓
`coFocus`	`void`	✓	✓
`coFontPopupHide`	`void`	✓	✓	Emitted when the font dropdown closes.
`coFontPopupShow`	`void`	✓	✓	Emitted when the font dropdown opens — host should load account fonts.
`coInput`	`RichTextOutput`	✓	✓	Emitted on every keystroke.
`coReady`	`void`	✓	✓	Emitted once the editor is mounted and ready.

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(content)`	Editable ProseMirror surface
`::part(helper)`	Helper text row
`::part(label)`	Field label
`::part(toolbar)`	Formatting toolbar
`::part(wrapper)`	Outer container

CSS Custom Properties

Este componente no expone CSS custom properties.