Underline

This is the Underline extension. It allows you to underline text.

Usage

Default usage of the underline extension and its control button.

Underline

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

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

const editor = new Editor({
  content: 'Select text and click the underline button to underline it',
  extensions: [Underline, RequiredExtensions.configure({})],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})
</script>

Commands

// Toggle underline
editor?.chain().focus().toggleUnderline().run()

// Set underline
editor?.commands.setUnderline()

// Unset underline
editor?.commands.unsetUnderline()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlUnderline,
  Underline,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
tooltipLabel	string	-	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language
ariaLabel	string	Underline	The aria label

Slots

Slot	Description	Default
icon	The icon to display	Underline01Icon