Text Editor - Link

#Usage

import { TextEditor } from '@primeui/vue-texteditor';

<TextEditor.Root v-model="value">
    <TextEditor.Toolbar>
        <LinkControls />
    </TextEditor.Toolbar>
    <TextEditor.ContextToolbar>
        <LinkControls />
    </TextEditor.ContextToolbar>
    <TextEditor.Content />
</TextEditor.Root>

Use links to wrap a selection in a hyperlink and edit or remove the href around the cursor. Link controls live in any toolbar widget and read both commands and link state from useTextEditorContext(), so a custom control stays in sync with the selection without prop drilling.

commands.insertLink(url, text?) adds a hyperlink — using the optional text when the selection is collapsed, or wrapping the current selection otherwise. commands.updateLink(url) changes the href of the link around the cursor, and commands.removeLink() unwraps it. Both updateLink and removeLink detect the link boundaries around the cursor, so the selection does not have to cover the whole link.

state.link is a boolean for whether the selection sits inside a link, and state.linkUrl is the current href, or null.

#Commands

Call commands.insertLink(url) with a prompted or bound URL to turn the selection into a link, and gate a remove button on state.link so it only appears when the cursor sits inside an existing link.

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

const { commands, state } = useTextEditorContext();

function addLink() {
    const url = window.prompt('Enter URL');
    if (url) commands.insertLink(url);
}
</script>

<template>
    <button @click="addLink">Add link</button>
    <button @click="commands.removeLink()" :disabled="!state.link">Remove link</button>
</template>

#Example

#API

Links expose commands.insertLink, commands.updateLink, commands.removeLink, and state.link / state.linkUrl through useTextEditorContext(). See Slots and Contexts for the surrounding outlet contracts, or API for full signatures.

#Related Docs

• Image
• Mention
• Context Toolbar
• API