e8-form-html-editor
Updated on Sep 18, 2025 8 minutes to readA rich text editor component, providing formatted text editing, image insertion, and link creation.
Overview
e8-form-html-editor allows users to edit HTML content with rich text features such as bold, lists, colors, links, and embedded images.
It supports both full and air (minimal) toolbar modes and can optionally restrict image size.
<e8-form-html-editor
v-model="vars.content"
label="Description"
tooltip="Enter formatted content"
:height="200"
:toolbar="true"
:max-image-size="1024"
text-paste-mode="mergeFormatting"
:air-mode="false"
></e8-form-html-editor>
đź”˝ Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| air-mode | Enables minimal “air” mode with floating toolbar. | boolean | false |
| height | Editor height in pixels. | number | string | — |
| label | Custom label text; set to false to hide label. | string | boolean | — |
| max-image-size | Maximum allowed image size (in KB). | number | string | — |
| modify-data | Determines whether changes to this field mark the object as modified and require saving. | boolean | true |
| readonly | Makes the editor non-editable. | boolean | false |
| text-paste-mode | Controls how pasted text is handled. | E8FormHtmlEditorTextPasteModes | 'keepFormatting' |
| toolbar | Enables or disables the toolbar. | boolean | true |
| tooltip | Tooltip text displayed below the editor. | string | — |
| v-model | Two-way bound HTML content. | string | — |
| visible | Controls component visibility. | boolean | true |
Slots
| Slot | Description |
|---|---|
| label | Custom label slot. Provides { label, value } as slot props. |
Events
| Event | Description | Arguments (in order) |
|---|---|---|
| on-image-upload | Called for the first selected image after it is read as a base64 data URL. The handler replaces default image insertion. | data: { basename: string, base64str: string }, editor: object (editor instance) |
| on-change | Called when HTML is changed or committed on blur. Receives the new and previous HTML strings. | value: string, oldValue: string | null |
| on-blur | Called after the current HTML is committed when the visual or code editor loses focus. | — |
| on-focus | Called when the editor gains focus. | — |