> ## Documentation Index
> Fetch the complete documentation index at: https://docs.doconda.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Plugin de editor

> Word, PowerPoint y Excel dentro de tu web: un componente de React que abre, edita y guarda el archivo en el navegador.

El plugin de editor es un **componente de React** que añades a tu producto. Tus usuarios abren un Word, un
PowerPoint o un Excel (por ejemplo, el que acaba de crear tu agente con Doconda), lo retocan y lo guardan, sin salir de
tu web. Todo pasa en su navegador: el archivo no se sube a ningún sitio para editarlo.

Se contrata aparte de la API, por organización, con plan **mensual, anual o de pago único** y **7 días de prueba gratis**. Ver [licencia y dominios](/editor/license).

## Instalar

Con la licencia activa, en el panel (**Facturación → Plugin de editor**) tienes tu comando de instalación, con un
enlace personal:

```bash theme={null}
npm install https://api.eu.doconda.com/v1/editor/package/edt_….tgz
```

Se importa como `@doconda/editor`. Necesita React 19 o superior.

<Warning>
  El enlace es secreto: no lo publiques. Si deja de estar activa la licencia, el enlace deja de funcionar. Cada
  descarga lleva una marca de tu organización.
</Warning>

## Tu primer editor

```tsx theme={null}
import { DocondaEditor } from "@doconda/editor"

export function Edit({ url }: { url: string }) {
  return (
    <div style={{ height: 700, display: "flex" }}>
      <DocondaEditor src={url} licenseKey="ek_eu_…" className="flex-1" />
    </div>
  )
}
```

* `src` es el enlace del archivo: un `.docx`, `.pptx` o `.xlsx`. Por ejemplo, el `url` de un fichero de
  `GET /documents/{id}/outputs`.
* El formato se deduce de la extensión del enlace. Si el enlace no la lleva, pásalo con `format="docx"`, `"pptx"` o
  `"xlsx"`.
* El editor ocupa el alto que le des: ponlo en un contenedor con altura.
* `licenseKey` es tu clave de licencia (del panel, en **Facturación → Plugin de editor**). En `localhost` no hace falta.

## Abrir desde memoria o con cabeceras

Si el archivo ya lo tienes (un `<input type="file">`, una respuesta de tu API) pásalo con `file`: un `File`, `Blob`,
`ArrayBuffer` o `Uint8Array`.

```tsx theme={null}
<DocondaEditor file={selectedFile} licenseKey="ek_eu_…" />
```

Si el enlace necesita autenticación, `requestInit` se pasa tal cual a `fetch`:

```tsx theme={null}
<DocondaEditor src="/api/contracts/42.docx" requestInit={{ headers: { Authorization: `Bearer ${token}` } }} />
```

## Guardar

Pide el archivo editado con una `ref`:

```tsx theme={null}
import { useRef } from "react"
import { DocondaEditor, type EditorHandle } from "@doconda/editor"

const editor = useRef<EditorHandle>(null)

<DocondaEditor ref={editor} src={url} licenseKey="ek_eu_…" />

const file = await editor.current!.save()   // un File (.docx, .pptx o .xlsx)
```

El archivo se llama como el original (o como diga `fileName`). La `ref` también trae `bytes()` (los bytes, sin
envolver en `File`), `focus()` e `isDirty()` (si hay cambios sin guardar).

O escucha **Ctrl/Cmd+S** con `onSave`, que recibe los bytes del archivo:

```tsx theme={null}
<DocondaEditor src={url} licenseKey="ek_eu_…" onSave={(bytes) => upload(bytes)} />
```

O guarda solo: con `autosave`, `onSave` se llama cuando el usuario lleva ese tiempo (en milisegundos) sin tocar nada.

```tsx theme={null}
<DocondaEditor
  src={url}
  autosave={2000}
  onSave={(bytes) => upload(bytes)}
  onDirtyChange={(pending) => setNotice(pending ? "Sin guardar" : "Guardado")}
  confirmOnLeave
/>
```

`onDirtyChange` avisa cuando pasa a haber cambios sin guardar y cuando se guardan. `confirmOnLeave` pide confirmación
si se cierra o recarga la página con cambios pendientes.

Para guardarlo en Doconda como versión nueva del documento (con su revisión, PDF e informe de cambios), envía ese
archivo a [`POST /documents/{id}/versions`](/guides/edit#guardar-una-versión-editada-a-mano):

```ts theme={null}
const body = new FormData()
body.append("file", await editor.current!.save())
await fetch(`https://api.eu.doconda.com/v1/documents/${id}/versions`, {
  method: "POST",
  headers: { Authorization: `Bearer ${DOCONDA_API_KEY}` },
  body,
})
```

<Warning>
  Haz esa llamada desde tu servidor: la API key no debe llegar al navegador.
</Warning>

## Qué se puede hacer

| Formato | Lo que edita |
| - | - |
| **Word** | Texto y estilos de párrafo, fuentes, tamaños, colores, resaltado, subrayados, listas, sangrías, interlineado, bordes y sombreado, tablas y sus estilos, imágenes, formas, cuadros de texto, enlaces, columnas, encabezado y pie, notas al pie, comentarios, índice, buscar y reemplazar, imprimir o guardar como PDF |
| **PowerPoint** | Diapositivas (nueva, duplicar, ordenar, diseño, fondo), texto con sus estilos, formas, imágenes, tablas, agrupar, alinear y distribuir, orden de capas, transiciones, animaciones de entrada, notas del orador, zoom, presentar a pantalla completa, imprimir. Los gráficos se ven y se conservan |
| **Excel** | Celdas y fórmulas (se calculan en el editor, escritas como en Excel en español), formato de celda y de número, bordes, combinar, ajustar texto, insertar y borrar filas y columnas, cambiar anchos y altos, varias hojas |

Lo que el editor no toca se guarda tal cual: estilos, gráficos, notas o partes del archivo que no sabe editar no se
pierden.

## Propiedades

| Propiedad | Qué hace |
| - | - |
| `src` | Enlace del archivo |
| `file` | El archivo en memoria (`File`, `Blob`, `ArrayBuffer` o `Uint8Array`), en lugar de `src` |
| `requestInit` | Opciones de `fetch` para descargar `src` (cabeceras, credenciales) |
| `format` | `"docx"`, `"pptx"` o `"xlsx"`, si el enlace no lleva extensión |
| `fileName` | Nombre del archivo que devuelve `save()` (por defecto, el del original) |
| `licenseKey` | Tu clave de licencia (`ek_…`) |
| `readOnly` | Solo ver: sin barras ni edición |
| `author` | Nombre que firma los comentarios nuevos |
| `onReady` | El archivo se ha abierto |
| `onError` | No se pudo abrir (o `editor_unlicensed`, sin licencia) |
| `onChange` | Cada vez que cambia algo |
| `onSave` | Ctrl/Cmd+S (y `autosave`), con los bytes del archivo |
| `autosave` | Milisegundos sin cambios tras los que se llama a `onSave` |
| `onDirtyChange` | Hay cambios sin guardar (`true`) o ya se guardaron (`false`) |
| `confirmOnLeave` | Pide confirmación al salir de la página con cambios sin guardar |
| `fallback` | Lo que se ve mientras abre (por ejemplo, tu spinner) |
| `className`, `style` | Clase y estilos del contenedor |
| `theme`, `locale`, `labels`, `toolbar`, `items`, `features`, `classNames`, `colors`, `fonts`, `spellCheck` | Ver [personalizar](/editor/customize) |
| `licenseUrl` | Solo si usas otra API de Doconda (por defecto la de la región de tu clave) |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.