Font Size

This is the Font Size extension. It allows you to change the font size of text in the editor.

Default Usage

Default usage of the font size extension and its control button.

Vue

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

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

  const editor = new Editor({
    content: 'Select text and change the font size',
    extensions: [TextSize, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Custom Font Sizes

You can provide custom font size options to the control.

Vue

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

  const customFontSizes = [10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72]

  const editor = new Editor({
    content: 'Select text and change the font size',
    extensions: [TextSize, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Fallback Font Size

You can set a fallback font size that will be used as the default font size.

Vue

<HLTextEditor :editor="editor" :fallbackFontSize="20">
  <template #header>
    <RTEControlFontSize :editor="editor" />
  </template>
</HLTextEditor>

Fallback Text Block Font Size

You can set different fallback font sizes for different heading levels.

Vue

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

  const fallbackTextBlockFontSize = {
    1: 32, // Heading 1
    2: 28, // Heading 2
    3: 24, // Heading 3
    4: 20, // Heading 4
    5: 18, // Heading 5
    6: 16, // Heading 6
  }

  const editor = new Editor({
    content:
      'Select text and change the font size for different heading levels',
    extensions: [TextSize, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Set font size (value in pixels)
editor?.chain().focus().setFontSize('16px').run()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlFontSize,
  TextSize,
  RTEControlTextBlocks,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
fontSizes	number[]	undefined	Array of custom font sizes (in pixels)
fallbackTextBlockFontSize	{ [key: number]: number }	undefined	Font sizes for different heading levels (1-6)
className	string	''	Additional CSS class name
language	Language	'en-US'	The language for localization
to	string | HTMLElement	undefined	Target element for dropdown portal
ariaLabel	string	null	Accessibility label

Slots

Slot	Description	Default
label	The label displayed in dropdown	Selected font size value