Text Editor - Text Align

Set block alignment to left, center, right, or justify with the textAlign command and pressed state.

#Usage

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

Text alignment positions a block left, center, right, or justified. Toolbar buttons invoke commands.textAlign('left' | 'center' | 'right' | 'justify') and reflect the active value with state.textAlign (a string | null), both from useTextEditorContext().

#Command

commands.textAlign(alignment) aligns the current block, where alignment is 'left', 'center', 'right', or 'justify'.

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

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

<template>
    <button @click="commands.textAlign('left')" :aria-pressed="state.textAlign === 'left'">Left</button>
    <button @click="commands.textAlign('center')" :aria-pressed="state.textAlign === 'center'">Center</button>
    <button @click="commands.textAlign('right')" :aria-pressed="state.textAlign === 'right'">Right</button>
    <button @click="commands.textAlign('justify')" :aria-pressed="state.textAlign === 'justify'">Justify</button>
</template>

#Example

Loading Demo...

#API

commands.textAlign(alignment) and state.textAlign come from useTextEditorContext(). See API for the full reference.