e8-form-markdown-editor
Updated on Sep 18, 2025 22 minutes to readA Markdown editor component with rich text editing via Lexical, optional toolbar, image upload, and resizable height.
Overview
e8-form-markdown-editor allows users to edit Markdown content with a full-featured Lexical editor.
It supports resizing, optional toolbar, image upload callbacks, code block disabling, draggable block hiding, and integrates with form groups, labels, tooltips, and error messages.
<e8-form-markdown-editor
v-model="vars.content"
label="Content"
tooltip="Supports rich text and Markdown"
height="200px"
save-option-width="1024"
save-option-height="768"
save-option-format="JPEG"
save-option-compress="0.8"
></e8-form-markdown-editor>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| disable-code-editing | Disables editing of code blocks inside the editor. | boolean | false |
| height | Initial height of the editor (number or CSS string). | number | string | — |
| hide-draggable-block | Hides draggable content blocks inside the editor. | boolean | false |
| label | Label for the input field; set to false to hide label. | string | boolean | — |
| max-image-size | Maximum image size allowed for uploads (in bytes). | number | — |
| readonly | Makes the editor non-editable. | boolean | false |
| save-option-compress | Compression ratio for saved images. | number | — |
| save-option-format | Format for saving images. | E8FileManipulationImageFormats | — |
| save-option-height | Height option for saved images. | number | — |
| save-option-width | Width option for saved images. | number | — |
| toolbar | Shows the editor toolbar when true. | boolean | true |
| tooltip | Tooltip text displayed below the editor. | string | — |
| v-model | Two-way bound editor value (Markdown string). | string | — |
| visible | Controls component visibility. | boolean | true |
Slots
| Slot | Description |
|---|---|
| label | Custom label slot. Provides { label, value } as slot props. |
Events
| Event | Description |
|---|---|
| on-blur | Triggered when the editor loses focus. |
| on-change | Triggered whenever the editor value changes. |
| on-focus | Triggered when the editor gains focus. |
| on-image-upload | Callback when an image is uploaded. |