Text Editor - Documents

Upload documents into the editor with drag and drop support and progress tracking. Uploaded files are inserted as links.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
<TextEditor.Root v-model="value">
    <TextEditor.Content />
    <TextEditor.DocumentUpload :handler="uploadHandler" @reject="onFileReject">
        <TextEditor.DocumentUploadDropzone>
            <DocumentUploadDropzone />
        </TextEditor.DocumentUploadDropzone>
        <TextEditor.DocumentUploadProgress>
            <DocumentUploadProgress />
        </TextEditor.DocumentUploadProgress>
    </TextEditor.DocumentUpload>
</TextEditor.Root>

Use document upload to add non-image files through TextEditor.DocumentUpload, which inserts each uploaded file into the content as a link. TextEditor.DocumentUpload is the overlay the runtime opens when commands.uploadDocuments() runs or a non-image file is dropped onto the content. Nested widgets read upload state from useUploadContext().

<TextEditor.DocumentUpload> mirrors <TextEditor.ImageUpload> for non-image files. The prop shape is the same (handler, maxFileCount, maxFileSize, allowedTypes, accept), the reject and complete emits are the same, and so are the Dropzone and Progress sub-parts (<TextEditor.DocumentUploadDropzone>, <TextEditor.DocumentUploadProgress>). Defaults differ: accept and allowedTypes resolve to .pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip and maxFileSize defaults to 10MB. For maxFileSize, use the named constants from @primeui/vue-texteditor: TEXT_EDITOR_FILE_SIZE.ONE_MB, FIVE_MB, TEN_MB, TWENTY_FIVE_MB, FIFTY_MB.

The Dropzone and Progress widgets follow the same surface as image upload.

<TextEditor.DocumentUpload :handler="uploadHandler" :maxFileCount="3" :maxFileSize="TEXT_EDITOR_FILE_SIZE.TEN_MB" @reject="onFileReject">
    <TextEditor.DocumentUploadDropzone>
        <DocumentUploadDropzone />
    </TextEditor.DocumentUploadDropzone>
    <TextEditor.DocumentUploadProgress>
        <DocumentUploadProgress />
    </TextEditor.DocumentUploadProgress>
</TextEditor.DocumentUpload>

Both widgets pull uploads, selectFiles, onDrop, and dismiss from the same upload context. kind resolves to 'document' here so a shared widget can branch on it.

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

const { selectFiles, onDrop } = useUploadContext();
</script>

<template>
    <div @dragover.prevent @drop="onDrop">
        <button @click="selectFiles">Choose files</button>
    </div>
</template>

#Alternative: inline with slot props

<TextEditor.DocumentUpload :handler="uploadHandler" @reject="onFileReject">
    <TextEditor.DocumentUploadDropzone v-slot="{ selectFiles, onDrop }">
        <div @dragover.prevent @drop="onDrop">
            <button @click="selectFiles">Choose files</button>
        </div>
    </TextEditor.DocumentUploadDropzone>
    <TextEditor.DocumentUploadProgress v-slot="{ uploads, dismiss }">
        <div v-for="u in uploads" :key="u.id">{{ u.fileName }} — {{ u.progress }}%</div>
        <button @click="dismiss">Cancel</button>
    </TextEditor.DocumentUploadProgress>
</TextEditor.DocumentUpload>

#Example

Loading Demo...

#API

TextEditor.DocumentUpload shares the useUploadContext() surface with image upload — uploads, selectFiles, onDrop, dismiss — with kind resolving to 'document'. Slots and Contexts covers the dropzone and progress outlets; API holds the signatures.