Text Editor - Colors

Apply text and background color to the current selection with the foregroundColor and backgroundColor commands and color state.

#Usage

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

Colors set the text and background color of a selection. A toolbar widget passes a color to commands.foregroundColor(color) and commands.backgroundColor(color) and reflects the active values with state.foregroundColor and state.backgroundColor, all from useTextEditorContext().

#Commands

commands.foregroundColor(color) sets the text color and commands.backgroundColor(color) sets the background color of the selected text, each from a CSS color string such as '#e11d48'. When the selection spans more than one color, the matching state value reports null rather than the first color, so a swatch control reads as cleared.

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

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

<template>
    <input type="color" :value="state.foregroundColor ?? '#000000'" @input="commands.foregroundColor(($event.target as HTMLInputElement).value)" />
    <input type="color" :value="state.backgroundColor ?? '#ffffff'" @input="commands.backgroundColor(($event.target as HTMLInputElement).value)" />
</template>

#Example

Loading Demo...

#API

commands.foregroundColor(color), commands.backgroundColor(color), state.foregroundColor, and state.backgroundColor come from useTextEditorContext(). See Slots and Contexts.