Rich text editor

Used to content editor based Tiptap.js

Import

import { MpRichTextEditor, MpRTEStyleProvider } from '@mekari/pixel3'

Playground

API

MpRichTextEditor

Props

Events

Name	Type	Default
id Id of rich text editor.	string	-
value Value of rich text editor.	string	-
placeholder Placeholder of rich text editor.	string	-
maxlength Maximum character length of rich text editor.	number	-
options Options of rich text editor.	heading | bold | italic | underline | strike | blockquote | bulletList | orderedList | align | mention | textLink | image | file | audio | undo | redo | clear | { value: string, tooltip?: string }	-
suggestions Mention suggestion items. Each item supports id, name, optional description, and optional avatar.	array	[]
is-disabled If true, rich text editor will be disabled.	boolean	false
is-invalid If true, rich text editor is marked as invalid.	boolean	false
has-border If true, rich text editor border will be displayed.	boolean	false
validate-link Custom function to validate link URLs.	(url: string, ctx: { defaultValidate: (url: string) => boolean; protocols: string[] }) => boolean	-
transform-link Custom function to transform / normalize link URLs.	(url: string) => string	-

MpRTEStyleProvider

Props

Name	Type	Default
id Id of RTE style provider.	string	-

Usage

Advance usage

Use emit action or paste event to handle attach image, file, audio

Link validation and transformation

Use validate-link prop to customize link validation rules and transform-link to auto-transform URLs (e.g. adding https:// to "example.com"). The input field will show an invalid state when the URL doesn't pass validation, and the accept button will be disabled.

Transformation happens before validation, allowing you to normalize URLs before they're checked.