Font Family

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

Default Usage

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

Vue

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

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

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

Custom Font Family Options

You can provide custom font family options to the control.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlFontFamily
        :editor="editor"
        :fontFamilyOptions="customFontFamilyOptions"
        fallbackFont="Impact"
      />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlFontFamily,
    FontFamily,
    TextStyle,
  } from '@platform-ui/rte'

  const customFontFamilyOptions = [
    {
      label: h('div', { style: { fontFamily: 'Arial' } }, 'Arial'),
      key: 'Arial',
    },
    {
      label: h('div', { style: { fontFamily: 'Courier New' } }, 'Courier New'),
      key: 'Courier New',
    },
    {
      label: h('div', { style: { fontFamily: 'Georgia' } }, 'Georgia'),
      key: 'Georgia',
    },
    {
      label: h(
        'div',
        { style: { fontFamily: 'Times New Roman' } },
        'Times New Roman'
      ),
      key: 'Times New Roman',
    },
    {
      label: h('div', { style: { fontFamily: 'Verdana' } }, 'Verdana'),
      key: 'Verdana',
    },
  ]

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

Fallback Font

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

Vue

<HLTextEditor :editor="editor">
  <template #header>
    <RTEControlFontFamily :editor="editor" fallbackFont="Georgia" />
  </template>
</HLTextEditor>

Filterable

Enable search/filter functionality in the font family dropdown.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlFontFamily :editor="editor" :filterable="true" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlFontFamily,
    FontFamily,
    TextStyle,
  } from '@platform-ui/rte'

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

Commands

// Set font family
editor?.chain().focus().setFontFamily('Arial').run()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlFontFamily,
  FontFamily,
  TextStyle,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
fallbackFont	string	'Inter'	The default font family
fontFamilyOptions	Array<{label: string | VNode, key: string}>	undefined	Custom font family options
filterable	boolean	false	Enable search/filter in dropdown
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

Events

Event	Payload	Description
update:value	string	Emitted when font family is changed

Slots

Slot	Description	Default
label	The label displayed in dropdown	Capitalized selected font family