Italic

This is the Italic extension. It allows you to make text italic.

Usage

Default usage of the italic extension and its control button.

Italic

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

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

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

Commands

editor?.chain().focus().toggleItalic().run()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlItalic,
  Italic,
} 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	Italic	The aria label

Slots

Slot	Description	Default
icon	The icon to display	Italic01Icon