Link

This is the Link extension. It allows you to add hyperlinks to text with support for custom values, link targets, and a floating menu for editing.

Default Usage

Default usage of the link extension with floating menu for editing existing links.

Vue

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

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

  const editor = new Editor({
    content: '<p>Select text and click the link button to add a hyperlink</p>',
    extensions: [Link, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

With Custom Values

Add custom values (merge tags) that can be inserted as link URLs.

Vue

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

  const customValues = [
    { label: 'First Name', value: '{{contact.first_name}}' },
    { label: 'Last Name', value: '{{contact.last_name}}' },
    { label: 'Email', value: '{{contact.email}}' },
    { label: 'Phone', value: '{{contact.phone}}' },
  ]

  const editor = new Editor({
    content: '<p>Select text to add links with custom merge tags</p>',
    extensions: [Link, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

With Custom Target Options

Customize the available link target options (where the link opens).

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlEmbedLink
        :editor="editor"
        :targetOptions="customTargetOptions"
      />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlEmbedLink,
    Link,
  } from '@platform-ui/rte'

  const customTargetOptions = ['_blank']

  const editor = new Editor({
    content: '<p>Select text to add links with custom target options</p>',
    extensions: [Link, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Without Floating Menu

Default usage of the link extension without floating menu for editing existing links.

Vue

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

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

  const editor = new Editor({
    content: '<p>Select text and click the link button to add a hyperlink</p>',
    extensions: [Link, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Set link on selected text
editor?.chain().focus().setLink({ href: 'https://example.com' }).run()

// Set link with target
editor
  ?.chain()
  .focus()
  .setLink({ href: 'https://example.com', target: '_blank' })
  .run()

// Set link with title
editor
  ?.chain()
  .focus()
  .setLink({
    href: 'https://example.com',
    target: '_blank',
    title: 'Example Link',
  })
  .run()

// Toggle link (add or remove)
editor?.chain().focus().toggleLink({ href: 'https://example.com' }).run()

// Remove link
editor?.chain().focus().unsetLink().run()

Imports

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

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
customValues	Array<{label: string, value: string}>	undefined	Custom values (merge tags) for link URLs
targetOptions	Array<'_self' | '_blank' | '_parent' | '_top'>	['_self', '_blank']	Available link target options
modalContainer	string	null	Container element for the modal
tooltipLabel	string	Add Link	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
onError	string	Emitted when an error occurs