> ## 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.

# Cómo incrustar un editor de Word en tu página web

> Añade el componente <DocondaEditor> a tu web en React: el usuario edita el Word en tu página, en su navegador, y tú recibes el archivo al guardar.

Para incrustar un editor de Word en tu página web, añade el plugin de editor de Doconda (`@doconda/editor`), un
componente de React. El usuario abre el `.docx`, lo edita y lo guarda sin salir de tu web, y tú recibes el archivo
para guardarlo donde quieras. Todo pasa en su navegador: el archivo no se sube a ningún sitio para editarlo.

## Pasos

1. Contrata el plugin en el panel (**Facturación → Plugin de editor**), con 7 días de prueba gratis.
2. Añade tus dominios (hasta 5, solo https). El editor solo abre en ellos; en `localhost` abre siempre, para
   programar.
3. Instálalo con el comando del panel (necesita React 19 o superior):

```bash theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
npm install https://api.eu.doconda.com/v1/editor/package/edt_….tgz
```

4. Ponlo en tu página, dentro de un contenedor con altura:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
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>
  )
}
```

5. Guarda lo que edita el usuario, solo o con Ctrl/Cmd+S:

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

## Que parezca parte de tu producto

* **Colores y tipografía**: `theme="dark"` o tus valores, por ejemplo
  `theme={{ accent: "#e11d48", font: "Inter, sans-serif", radius: "6px" }}`.
* **Idioma**: `locale="es"` o `"en"`, y `labels` para cambiar cualquier texto.
* **Botones**: `toolbar` elige cuáles salen y en qué orden; `features` quita partes (comentarios, imprimir…).
* **Botones propios**: con `items` añades, por ejemplo, «Enviar a firmar», que recibe el archivo con `api.save()`.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor src={url} toolbar="undo redo | bold italic underline | bullets numbering | link" />
```

Todo esto está en [personalizar](/editor/customize).

## Por qué la clave puede ir en tu código

`licenseKey` es tu clave de licencia (`ek_eu_…`), no tu API key. Al abrirse, el editor pide a Doconda un permiso para
la web donde está; la dirección la pone el navegador y la página no puede cambiarla. Fuera de tus dominios la clave no
sirve, y el editor muestra «Este editor necesita una licencia de Doconda».

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Mi web tiene que ser React?">
    Sí: es un componente de React y necesita React 19 o superior.
  </Accordion>

  <Accordion title="¿Sirve también para PowerPoint y Excel?">
    Sí, el mismo componente abre `.docx`, `.pptx` y `.xlsx`.
  </Accordion>

  <Accordion title="¿Funciona en subdominios?">
    Sí. `*.tuempresa.com` abre en cualquier subdominio (no en `tuempresa.com`: añádelo aparte). Ver
    [licencia y dominios](/editor/license#dominios).
  </Accordion>

  <Accordion title="¿Cuánto cuesta?">
    Se contrata aparte de la API, por organización, con plan mensual, anual o de pago único, y documentos y usuarios
    ilimitados. El panel muestra el precio de cada plan. Ver [licencia y dominios](/editor/license).
  </Accordion>
</AccordionGroup>

## Sigue leyendo

* [Plugin de editor](/editor/introduction).
* [Editor de Word (DOCX) para React](/answers/docx-editor-react).


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