Personalizar

Todo se configura con propiedades de <DocondaEditor> y funciona igual en Word, PowerPoint y Excel.

Colores y tipografía

<DocondaEditor src={url} theme="dark" />
<DocondaEditor src={url} theme={{ accent: "#e11d48", font: "Inter, sans-serif", radius: "6px" }} />

theme acepta "light" (por defecto), "dark" o tus valores, que se mezclan con el claro. También puedes usar CSS: los colores son variables en .fm-root.

.my-editor { --fm-accent: #e11d48; --fm-surface: #fffdf8; --fm-radius: 4px; }

Clave	Variable CSS	Qué pinta
`font`	`--fm-font`	Tipografía de las barras
`text` / `muted`	`--fm-text` / `--fm-muted`	Texto y texto secundario
`surface` / `subtle` / `canvas`	`--fm-surface` / `--fm-subtle` / `--fm-canvas`	Barras, segunda barra, fondo alrededor del documento
`border`	`--fm-border`	Bordes
`hover` / `active`	`--fm-hover` / `--fm-active`	Botón al pasar por encima y pulsado
`accent` / `accentText`	`--fm-accent` / `--fm-accent-text`	Color de marca y el texto sobre él
`danger`	`--fm-danger`	Avisos y borrar
`radius`	`--fm-radius`	Esquinas

La página, las diapositivas y las celdas mantienen los colores del archivo.

Colores y tipografías de tu marca

<DocondaEditor src={url} colors={["#1a73e8", "#e11d48", "#111827"]} fonts={["Inter", "Georgia"]} />

colors: los colores que salen en los selectores de color (texto, relleno, bordes…). Con o sin #.
fonts: las tipografías de la lista de fuentes. Por defecto salen las del archivo; la que ya lleva el texto siempre aparece.

Corrector ortográfico

El del navegador está encendido. spellCheck={false} lo apaga (por ejemplo, para documentos con mucho código o nombres propios).

Idioma y textos

<DocondaEditor src={url} locale="en" />
<DocondaEditor src={url} labels={{ bold: "Fett", insert: "Einfügen" }} />

locale es "es" o "en"; sin él, el editor usa el idioma del navegador (español si no es ninguno de los dos). Con labels cambias cualquier texto, sobre el idioma elegido: bold o insert para los botones comunes, o la clave completa ("word.find.next") para el resto.

Barra de botones

Por defecto sale la barra completa. Con toolbar eliges qué botones salen y en qué orden: una lista de ids, y | separa los grupos.

<DocondaEditor src={url} toolbar="undo redo | bold italic underline | bullets numbering | link" />

También como listas, distinta por formato, o partiendo de la de fábrica:

<DocondaEditor src={url} toolbar={[["undo", "redo"], ["bold", "italic"]]} />

<DocondaEditor
  src={url}
  toolbar={{
    docx: "undo redo | style | bold italic | bullets numbering",
    pptx: (groups) => groups.filter((g) => !g.includes("present")),
  }}
/>

Las barras de fábrica se exportan como WORD_TOOLBAR, SLIDES_TOOLBAR y SHEET_TOOLBAR. Un id que no existe se ignora.

Formato	Ids
Word	`undo` `redo` `style` `font` `size` `bold` `italic` `underline` `underlineStyle` `strike` `script` `color` `highlight` `clear` `align` `bullets` `numbering` `outdent` `indent` `spacing` `borders` `link` `insert` `columns` `find` `print`
PowerPoint	`undo` `redo` `newSlide` `font` `size` `bold` `italic` `underline` `strike` `color` `align` `bullets` `numbering` `outdent` `indent` `insert` `present` `print`
Excel	`undo` `redo` `font` `size` `bold` `italic` `underline` `strike` `color` `fill` `alignLeft` `alignCenter` `alignRight` `wrap` `merge` `borders` `numberFormat` `lessDecimals` `moreDecimals` `rowsColumns`

Cuando seleccionas algo (una tabla, una imagen, una forma, el encabezado…) aparece una segunda barra con sus opciones. La barra principal no cambia.

Botones propios

Dale un id a tu botón y ponlo en la barra:

<DocondaEditor
  src={url}
  items={[
    {
      id: "sign",
      label: "Enviar a firmar",
      text: "Enviar",
      run: async (api) => sendForSignature(api.save()),
    },
  ]}
  toolbar={(groups) => [...groups, ["sign"]]}
/>

Campo	Qué es
`id`	El que pones en `toolbar`
`label`	Texto al pasar el ratón y para lectores de pantalla
`icon`	Un trazo SVG de 24×24 (el `d` de un `<path>`) o cualquier elemento de React
`text`	Texto del botón, si no lleva icono
`run(api)`	Qué hace al pulsarlo
`active(api)` / `disabled(api)`	Botón marcado o apagado

api trae format ("docx", "pptx" o "xlsx"), save() (los bytes del archivo tal como está), focus() y raw (el estado interno del editor).

Quitar partes

<DocondaEditor src={url} features={{ comments: false, print: false, contextBar: false }} />

Todo está encendido salvo lo que pongas a false.

Clave	Quita	En
`find`	Buscar y reemplazar	Word
`print`	Imprimir o guardar como PDF	Word, PowerPoint
`links`	Enlaces	Word
`columns`	Columnas	Word
`headerFooter`	Encabezado y pie	Word
`images`, `tables`, `shapes`, `textboxes`	Esas opciones de «Insertar»	Word (tablas), Word y PowerPoint (el resto)
`footnotes`, `comments`, `toc`	Notas al pie, comentarios, índice	Word
`present`	Presentar	PowerPoint
`notes`	Notas del orador	PowerPoint
`transitions`, `animations`	Transiciones y animaciones	PowerPoint
`contextBar`	La segunda barra	Todos
`statusBar`	La barra de abajo (páginas, palabras, zoom)	Word, PowerPoint

Si solo quitas un botón de toolbar, su atajo de teclado sigue funcionando. features quita la opción de las barras, de los menús y de su atajo (por ejemplo, Ctrl+F con find: false). Lo que ya trae el archivo se sigue viendo: si el Word tiene comentarios, se muestran aunque comments esté apagado.

Tus clases

classNames pone tu clase en cada parte, para ajustar lo que quieras con tu CSS:

<DocondaEditor src={url} classNames={{ root: "my-editor", toolbar: "my-toolbar", contextBar: "my-toolbar-2", statusBar: "my-footer" }} />

Solo lectura

<DocondaEditor src={url} readOnly />

Se ve el documento, pero no se puede cambiar nada: ni escribiendo, ni pegando, ni arrastrando, ni con atajos de teclado, ni redimensionando imágenes o formas. Desaparecen las barras de botones y los botones de acción (duplicar o borrar diapositivas, borrar comentarios); se puede seguir leyendo, seleccionando y copiando texto, moviéndose entre diapositivas y hojas, y presentar. Se puede cambiar en cualquier momento, sin volver a abrir el archivo:

const [viewOnly, setViewOnly] = useState(true)

<button onClick={() => setViewOnly(!viewOnly)}>{viewOnly ? "Editar" : "Terminar"}</button>
<DocondaEditor src={url} readOnly={viewOnly} />

Empezar

Guías

Colores y tipografía

Colores y tipografías de tu marca

Corrector ortográfico

Idioma y textos

Barra de botones

Botones propios

Quitar partes

Tus clases

Solo lectura

​Colores y tipografía

​Colores y tipografías de tu marca

​Corrector ortográfico

​Idioma y textos

​Barra de botones

​Botones propios

​Quitar partes

​Tus clases

​Solo lectura

Colores y tipografía

Colores y tipografías de tu marca

Corrector ortográfico

Idioma y textos

Barra de botones

Botones propios

Quitar partes

Tus clases

Solo lectura