Text Editor - Font

Apply font family and font size to the current selection with the fontFamily and fontSize commands and font state.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
<TextEditor.Root v-model="value">
    <TextEditor.Toolbar>
        <FontControls />
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

Font controls set the typeface and size of a selection. A toolbar select passes a value to commands.fontFamily(v) and commands.fontSize(v) and reflects the active values with state.fontFamily and state.fontSize, all from useTextEditorContext().

#Commands

commands.fontFamily(v) sets the typeface and commands.fontSize(v) sets the size of the selected text, each from a string such as 'Georgia' or '18px'. Over an unstyled selection the state values fall back to the cursor's rendered font, matching what the reader sees; when the selection mixes typefaces or sizes, the matching state value reports null so the select shows no option.

<!-- FontControls.vue -->
<script setup lang="ts">
import { useTextEditorContext } from '@primeui/vue-texteditor';

const { commands, state } = useTextEditorContext();
</script>

<template>
    <select :value="state.fontFamily ?? ''" @change="commands.fontFamily(($event.target as HTMLSelectElement).value)">
        <option value="Arial">Arial</option>
        <option value="Georgia">Georgia</option>
        <option value="Courier New">Courier New</option>
    </select>
    <select :value="state.fontSize ?? ''" @change="commands.fontSize(($event.target as HTMLSelectElement).value)">
        <option value="14px">14</option>
        <option value="18px">18</option>
        <option value="24px">24</option>
    </select>
</template>

#Example

Loading Demo...

#API

commands.fontFamily(v), commands.fontSize(v), state.fontFamily, and state.fontSize come from useTextEditorContext(). See API for the full reference.