Personalizar

Colores, idioma, textos, qué botones salen y en qué orden, botones propios y partes que quitar.

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} />