VMarkdownEditor
Vuero ship <VMarkdownEditor /> component that combines an accessible Markdown editor with a live preview using <VMarkdownPreview />.
Under the hood, this component uses textarea-markdown-editor exposed api to provide a powerfull Markdown editor for vue 3 with extendable commands support.
Toolbar customization
Toolbar can be customized by passing a toolbar property. You can group commands to display them in a dropdown menu.
Actions can be one of bold, italic, strike-through, h1, h2, h3, h4, h5, h6, unordered-list, ordered-list, code-block, code-inline, code, link, image, block-quotes
You also can pass a custom action to the toolbar by passing a function to the action property.
Markdown syntax supported
VMarkdownEditor Props
Here is the full props available for <VMarkdownEditor /> component:
| Props | Default | Type |
|---|---|---|
| model-value | '' | string |
| commands | [] | textarea-markdown-editor commands |
| options | { enableIndentExtension: true, enableLinkPasteExtension: true, enableOrderedListAutoCorrectExtension: true, enablePrefixWrappingExtension: true, enableProperLineRemoveBehaviorExtension: true,} | textarea-markdown-editor options |
| toolbar | undefined | |
| autogrow | false | boolean |
VMarkdownEditor Events
Here is the full events available for <VMarkdownEditor /> component:
| Event | Callback | Description |
|---|---|---|
| @update:modelValue | (value: string) => void | Raised when the textarea value changed Use v-model directive to bind values |
VMarkdownEditor Slots
Here is the full slots available for <VMarkdownEditor /> component:
| Slot | Properties | Description |
|---|---|---|
| #before-textarea | <{ value: string}> | Display content before the textarea when in write mode |
| #after-textarea | <{ value: string}> | Display content after the textarea when in write mode |
| #preview | <{ value: string}> | Replace preview with custom content |