Image

This is the Image extension. It allows you to embed images into the editor with support for captions, alt text, dimensions, and alignment.

Default Usage

Default usage of the image extension with floating menu and external embed enabled.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlEmbedImage :editor="editor" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlEmbedImage,
    Image,
    Link,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor = new Editor({
    content: '<p>Click the image button to insert images into the editor</p>',
    extensions: [Image, Link, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Without Floating Menu

Disable the floating menu that appears when an image is selected.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlEmbedImage :editor="editor" :enableFloatingMenu="false" />
    </template>
  </HLTextEditor>
</template>

With Link

Enable the link option in the image control.

Vue

<template>
  <HLTextEditor :editor="editor2">
    <template #header>
      <RTEControlEmbedImage :editor="editor2" :enableLink="true" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>

With Resizable Disabled

Disable the resizable option in the image control.

Vue

<template>
  <HLTextEditor :editor="editor3">
    <template #header>
      <RTEControlEmbedImage :editor="editor3" :resizable="false" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlEmbedImage,
  Image,
  Link,
} from '@platform-ui/rte'

Commands

// Insert image with URL
editor?.chain().focus().setImage({ src: 'https://example.com/image.jpg' }).run()

// Insert image with additional attributes
editor
  ?.chain()
  .focus()
  .setImage({
    src: 'https://example.com/image.jpg',
    alt: 'Description',
    title: 'Image Title',
    width: '500',
    height: '300',
  })
  .run()

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
enableFloatingMenu	boolean	true	Enables the floating menu for the image control
enableExternalEmbed	boolean	true	Allows the user to upload an image from their local machine
externalEmbeddedImage	string	null	The URL of the external image (url, base64, or custom-value)
modalContainer	string	null	The container to render the modal in
externalEmbedText	string	null	The text to display when the user triggers the external embed
tooltipLabel	string	Add Image	The label to display in the tooltip
tooltipPosition	Placement	'top'	The position of the tooltip
language	Language	'en-US'	The language for localization
ariaLabel	string	null	Accessibility label

Events

Event	Payload	Description
triggerExternalEmbed	boolean	Emitted when external embed is triggered
onError	string	Emitted when an error occurs during embedding

Image Attributes

When inserting images, you can specify the following attributes:

• src - Image URL (required)
• alt - Alternative text for accessibility
• title - Image title
• width - Image width in pixels
• height - Image height in pixels
• caption - Image caption text
• align - Image alignment (left, center, right)

Notes

• The control is automatically disabled when inside a link
• The floating menu provides quick access to edit, resize, and remove images
• External embed can be triggered programmatically via events
• Modal container prop is useful when the editor is inside another modal