ToolbarConfig

ToolbarConfig controls built-in toolbar button groups and order.

type ToolbarBuiltinKey =
  | 'undo'
  | 'redo'
  | 'heading'
  | 'fontFamily'
  | 'fontSize'
  | 'lineHeight'
  | 'bold'
  | 'italic'
  | 'strike'
  | 'underline'
  | 'code'
  | 'superscript'
  | 'subscript'
  | 'color'
  | 'highlight'
  | 'align'
  | 'decreaseIndent'
  | 'increaseIndent'
  | 'bulletList'
  | 'orderedList'
  | 'taskList'
  | 'blockquote'
  | 'codeBlock'
  | 'mermaid'
  | 'math'
  | 'hr'
  | 'link'
  | 'image'
  | 'attachment'
  | 'table'
  | 'clearFormat'
  | 'findReplace'
  | 'markdown'
  | 'print'
  | 'fullscreen'
  | 'preview'

type ToolbarGroupConfig = ToolbarBuiltinKey[]
type ToolbarConfig = ToolbarGroupConfig[]
type ToolbarProp = ToolbarConfig | false

Default Groups

const toolbar: ToolbarConfig = [
  ['undo', 'redo'],
  ['heading', 'fontFamily', 'fontSize', 'lineHeight'],
  ['bold', 'italic', 'underline', 'strike', 'code', 'superscript', 'subscript'],
  ['color', 'highlight', 'clearFormat'],
  ['align', 'decreaseIndent', 'increaseIndent'],
  ['bulletList', 'orderedList', 'taskList', 'blockquote', 'codeBlock'],
  ['link', 'image', 'attachment', 'table', 'mermaid', 'math', 'hr'],
  ['findReplace', 'markdown', 'print'],
  ['preview', 'fullscreen'],
]

Hide the Toolbar

<ProEditorElementPlus v-model="content" :toolbar="false" />

Custom Groups

const toolbar: ToolbarConfig = [
  ['undo', 'redo'],
  ['bold', 'italic', 'underline'],
  ['link', 'image', 'attachment', 'table'],
]

Menu data behind buttons is not configured in toolbar. Use ToolbarOptions for font lists, font sizes, palettes, code languages, divider styles, and similar data.