# Características principales - Human documentation: [https://docs.univer.ai/es-ES/guides/docs/features/core](https://docs.univer.ai/es-ES/guides/docs/features/core) - Agent Markdown: [https://docs.univer.ai/es-ES/guides/docs/features/core.md](https://docs.univer.ai/es-ES/guides/docs/features/core.md) - Requested language: `es-ES` - Content language: `es-ES` - Documentation version: `1.2.0` - Source: [docs/features/core/index.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/features/core/index.es-ES.mdx) --- #### Package metadata ```json { "preset": [ { "client": "@univerjs/preset-docs-core", "locale": "@univerjs/preset-docs-core/locales/en-US", "style": "@univerjs/preset-docs-core/lib/index.css" } ], "plugins": [ { "client": "@univerjs/core" }, { "client": "@univerjs/engine-formula" }, { "client": "@univerjs/engine-render" }, { "client": "@univerjs/design", "locale": "@univerjs/design/locale/en-US", "style": "@univerjs/design/lib/index.css" }, { "client": "@univerjs/ui", "locale": "@univerjs/ui/locale/en-US", "style": "@univerjs/ui/lib/index.css" }, { "client": "@univerjs/docs" }, { "client": "@univerjs/docs-ui", "locale": "@univerjs/docs-ui/locale/en-US", "style": "@univerjs/docs-ui/lib/index.css", "facade": "@univerjs/docs-ui/facade" } ], "server": false } ``` Univer Docs proporciona funciones principales que incluyen un editor de documentos, un motor de fórmulas, un motor de renderizado, un sistema de diseño y una biblioteca de componentes de interfaz de usuario. Juntos, forman una poderosa plataforma de procesamiento de documentos que admite varios formatos de documentos y operaciones complejas. ## Características Las características principales de Univer Docs incluyen: * **Representación de documentos**: admite la representación de Univer Docs, incluida la representación del cursor y la selección. * **Composición tipográfica de documentos**: admite la composición tipográfica de texto completo, incluida la configuración de párrafos, el espaciado antes y después de los párrafos, la alineación de párrafos, la sangría y la sangría francesa. También incluye capacidades de composición tipográfica dentro de párrafos, como compresión de puntuación, puntuación colgante, espaciado entre caracteres y separación de palabras occidental. * **Cálculo de fórmulas**: admite agregar y calcular fórmulas de Univer (en desarrollo). * **Capacidad de tabla**: admite la inserción de tablas básicas y la edición de tablas, incluida la adición y eliminación de filas, y la edición de celdas. * **Estilos de documento**: Univer Docs admite ambos *documentos tradicionales estilos* similares a Microsoft Word (incluyendo paginación, encabezados y pies de página) y *estilos de documentos modernos* similares a Notion. En los estilos de documentos modernos, no se requiere paginación, el contenido se puede expandir infinitamente y admite la composición tipográfica mixta de varios elementos a nivel de bloque oficiales o de terceros (como texto, imágenes, tablas, etc.) (planificado). * **Encabezados y pies de página**: admite la inserción de encabezados y pies de página, la edición del contenido del encabezado y del pie de página y distingue entre primeras páginas y páginas pares e impares (solo se admite en documentos tradicionales). * **Características de la lista**: admite la inserción y edición de listas de tareas ordenadas, desordenadas y de tareas, así como sangrías y anulaciones de listas. * **Emoji y símbolos**: inserte emoji y símbolos desde la cinta de Docs. * **Sistema de complementos**: admite un sistema de complementos que permite complementos personalizados, como complementos de fórmulas e imágenes complementos, complementos de gráficos, etc. Esta es también una de las capacidades arquitectónicas principales de Univer. ## Modo de complemento ### Instalación #### npm ```bash npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui ``` #### pnpm ```bash pnpm add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui ``` #### yarn ```bash yarn add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui ``` #### bun ```bash bun add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui ``` ### Uso ```typescript import { LocaleType, mergeLocales, Univer } from '@univerjs/core' import { FUniver } from '@univerjs/core/facade' import DesignEnUS from '@univerjs/design/locale/en-US' import { UniverDocsPlugin } from '@univerjs/docs' import { UniverDocsUIPlugin } from '@univerjs/docs-ui' import DocsUIEnUS from '@univerjs/docs-ui/lib/locale/en-US' import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula' import { UniverRenderEnginePlugin } from '@univerjs/engine-render' import { UniverUIPlugin } from '@univerjs/ui' import UIEnUS from '@univerjs/ui/locale/en-US' import '@univerjs/docs/facade' import '@univerjs/docs-ui/facade' import '@univerjs/design/lib/index.css' import '@univerjs/ui/lib/index.css' import '@univerjs/docs-ui/lib/index.css' const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverFormulaEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app', }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) const univerAPI = FUniver.newAPI(univer) univerAPI.createDocument({}) ``` ### Complementos y Configuración #### @univerjs/core Este complemento es la biblioteca principal de Univer y proporciona funcionalidades básicas como la creación de instancias, temas e idiomas de Univer. ```typescript import type { IUniverConfig } from '@univerjs/core' import { LocaleType, Univer } from '@univerjs/core' const config: IUniverConfig = { locale: LocaleType.ES_ES, darkMode: false, } const univer = new Univer(config) ``` Referencia: [`IUniverConfig`](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/core.md#iuniverconfig) #### @univerjs/engine-render Este complemento es el motor de renderizado de Univer, responsable del renderizado, barras de desplazamiento, cursor y representación de selección. Proporciona el `UniverRenderEnginePlugin`. Referencia: [@univerjs/engine-render](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/engine-render.md) #### @univerjs/engine-formula Este complemento es el motor de fórmulas de Univer, responsable de calcular y procesar fórmulas. Proporciona `UniverFormulaEnginePlugin`. Referencia: [@univerjs/engine-formula](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/engine-formula.md) #### @univerjs/design Este complemento es el sistema de diseño de Univer y proporciona todos los componentes y estilos básicos. Ver: [UI Capítulo](https://docs.univer.ai/es-ES/guides/docs/ui/overview.md) #### @univerjs/ui Este complemento es la base de la interfaz de usuario de Univer. Proporciona el `UniverUIPlugin`. El `UniverUIPlugin` proporciona algunas opciones de configuración que se pueden usar para la configuración de diseño básica. ```typescript interface IUniverUIConfig { // Container element, can be a string or a DOM element container?: string | HTMLElement // Whether to show the header header?: boolean // Whether to show the header toolbar toolbar?: boolean // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode ribbonType?: RibbonType // Whether to show the context menu contextMenu?: boolean // Whether to disable auto focus disableAutoFocus?: true // Dependency injection override configuration override?: DependencyOverride // Menu configuration menu?: MenuConfig } ``` La opción de configuración `menu` se puede usar para simplemente configurar la visualización o el estado oculto de ciertos elementos del menú específicos: ```typescript univer.registerPlugin(UniverDocsUIPlugin, { menu: { 'doc.command.set-inline-format-bold': { hidden: true, }, 'doc.command.set-inline-format-italic': { hidden: true, disabled: true, }, }, }) ``` Aquí, `'doc.command.set-inline-format-bold'` y `'doc.command.set-inline-format-italic'` son los nombres de los comandos, que indican los elementos de menú correspondientes. Referencia: [@univerjs/docs-ui](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/docs-ui.md) #### @univerjs/docs Este complemento es el complemento principal de Univer Docs. Proporciona `UniverDocsPlugin`. Referencia: [@univerjs/docs](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/docs.md) #### @univerjs/docs-ui Este complemento es el complemento de interfaz de usuario de Univer Docs, que incluye componentes de interfaz de usuario e interacciones para el editor de documentos. Proporciona el `UniverDocsUIPlugin`. Referencia: [@univerjs/docs-ui](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/docs-ui.md) ## Modo preestablecido ### Instalación #### npm ```bash npm install @univerjs/presets @univerjs/preset-docs-core ``` #### pnpm ```bash pnpm add @univerjs/presets @univerjs/preset-docs-core ``` #### yarn ```bash yarn add @univerjs/presets @univerjs/preset-docs-core ``` #### bun ```bash bun add @univerjs/presets @univerjs/preset-docs-core ``` ### Uso ```typescript import { UniverDocsCorePreset } from '@univerjs/preset-docs-core' import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US' import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets' import '@univerjs/preset-docs-core/lib/index.css' const { univer, univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(UniverPresetDocsCoreEnUS), }, presets: [UniverDocsCorePreset()], }) univerAPI.createDocument({}) ``` ### Preajustes y configuración #### @univerjs/presets Este ajuste preestablecido proporciona el método `createUniver` para crear una aplicación Univer y expone todos los métodos y objetos de **@univerjs/core** y **@univerjs/design**. El método `createUniver` acepta un objeto de configuración que incluye opciones de tema, idioma, ajustes preestablecidos, etc. Devuelve una instancia `Univer` `univer` y una instancia `FUniver` `univerAPI` para llamar a Facade API. ```typescript interface ICreateUniverParameter { // Univer instance theme, default is `defaultTheme` theme: IStyleSheet // Whether to use dark mode, default is false darkMode?: boolean // The locale of the Univer instance locale: LocaleType region?: LocaleType // The locale objects to use, with keys as locale types and values as corresponding locale objects locales: ILocales // The log level of the Univer instance logLevel?: LogLevel // The list of presets to use. presets: IPresets[] // The list of plugins to use. plugins: IPlugins[] } ``` Referencia: [`createUniver`](https://docs.univer.ai/es-ES/reference/methods/create-univer.md) #### @univerjs/preset-docs-core Este ajuste preestablecido es el ajuste preestablecido principal de Univer Docs y contiene funciones básicas esenciales para documentos electrónicos, como el editor de documentos, el motor de fórmulas y el motor de renderizado. ```typescript interface IUniverDocsCorePresetConfig { // Container element, can be a string or a DOM element container?: string | HTMLElement // Whether to show the header header?: boolean // Whether to show the header toolbar toolbar?: boolean // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode ribbonType?: RibbonType // Whether to show the footer footer?: boolean // Whether to show the context menu contextMenu?: boolean // Whether to disable auto focus disableAutoFocus?: true // Menu configuration menu?: MenuConfig // ... More configuration options } ``` La opción de configuración `menu` se puede usar para configurar simplemente la visualización o el estado oculto de ciertos elementos específicos del menú: ```typescript UniverDocsCorePreset({ menu: { 'doc.command.set-inline-format-bold': { hidden: true, }, 'doc.command.set-inline-format-italic': { hidden: true, disabled: true, }, }, }) ``` Aquí, `'doc.command.set-inline-format-bold'` y `'doc.command.set-inline-format-italic'` son los nombres de los comandos, indicando los elementos de menú correspondientes. Referencia: [@univerjs/preset-docs-core](https://docs.univer.ai/es-ES/reference/packages/presets/univerjs/preset-docs-core.md) ## Controles de vista La cinta Vista contiene configuración de página, zoom y pantalla completa. El selector de zoom y la barra inferior reflejan la misma escala del documento; cambiarla no modifica el formato del texto. ## Orden de menús y disposición en cuadrícula Defina el [`MenuConfig`](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/ui.md#menuconfig) compartido con los ID de menú de Docs y aplíquelo en el modo elegido: ```ts import type { MenuConfig } from '@univerjs/ui' const menu: MenuConfig = { 'ribbon.start.format': { order: -1 }, 'doc.command.set-inline-format-bold': { order: 0, gridLayout: { row: 2, column: 2 }, }, 'doc.command.set-inline-format-italic': { gridLayout: { row: 2, column: 1 }, }, } ``` Elija su modo e incorpore estas opciones a la inicialización existente. Conserve los demás complementos y la configuración de idioma, tema y contenedor; no registre dos veces el mismo complemento. #### Modo de complemento ```typescript import { UniverUIPlugin } from '@univerjs/ui' univer.registerPlugin(UniverUIPlugin, { ribbonType: 'grid', menu, }) ``` #### Modo preestablecido ```typescript import { UniverDocsCorePreset } from '@univerjs/preset-docs-core' import { createUniver } from '@univerjs/presets' const { univerAPI } = createUniver({ presets: [ UniverDocsCorePreset({ ribbonType: 'grid', menu, }), ], }) ``` Tras la inicialización, use [`updateMenuConfig()`](https://docs.univer.ai/es-ES/reference/facade/univer.md#updatemenuconfig) para actualizar la instancia existente: ```ts import '@univerjs/ui/facade' univerAPI.updateMenuConfig(menu) ``` `order` ordena los elementos del mismo nivel de menor a mayor. `gridLayout` solo afecta al Ribbon en cuadrícula, con coordenadas desde 1 en cada grupo de dos filas. Las actualizaciones conservan las propiedades omitidas y actualizan la interfaz inmediatamente. En modo de complemento, pase `menu` a `UniverUIPlugin` e importe `@univerjs/ui/facade` antes de usar la Facade. Consulte la [guía de disposición de menús](https://docs.univer.ai/es-ES/guides/sheets/features/core.md#menu-order-and-grid-layout) para ver los campos y botones personalizados. ## Opciones de pegado Docs permite conservar el formato original, usar el formato de destino o pegar solo texto. El modo de destino mantiene énfasis como negrita y cursiva y aplica los estilos del texto y párrafo de destino. Solo texto elimina imágenes y enlaces y convierte tablas en texto separado por tabuladores. Las opciones posteriores cambian el último pegado. Si el navegador bloquea el portapapeles, usa el teclado o el pegado del sistema. En escritorio, el menú **Pegar** del Ribbon aparece junto a deshacer y rehacer y se oculta al editar texto de formas. El submenú **Pegado especial** está en el grupo de formato del menú contextual tanto en escritorio como en móvil. ## Campos de encabezado y pie de página En documentos tradicionales, al editar un encabezado o pie aparece un Ribbon contextual con inserción, navegación, opciones de primera página y páginas pares/impares, y posición. Permite insertar la página actual, el total de páginas o fecha y hora localizadas. Los campos de página muestran el valor de cada página. Para fecha/hora, active la actualización automática para guardar un campo, o desactívela para insertar texto fijo. Estos campos se actualizan al abrir el documento o mediante **Actualizar campos**, no continuamente como un reloj. Los documentos modernos no usan encabezados ni pies paginados. ## Esquema del documento El esquema izquierdo permite navegar entre títulos sin insertar un índice en el contenido. Si se omite `toc`, se activa en documentos Modern y se desactiva en Traditional. `true` o `false` reemplaza ese valor. El panel se pliega si falta espacio o una tabla se superpone y vuelve a abrirse cuando hay espacio. Añade esta opción a la inicialización existente sin registrar el mismo plugin dos veces. #### Modo plugin ```ts import { UniverDocsUIPlugin } from '@univerjs/docs-ui' univer.registerPlugin(UniverDocsUIPlugin, { toc: true }) ``` #### Modo preset ```ts import { UniverDocsCorePreset } from '@univerjs/preset-docs-core' import { createUniver } from '@univerjs/presets' const { univerAPI } = createUniver({ presets: [UniverDocsCorePreset({ container: 'app', toc: true })], }) ``` ## Plegar secciones Los documentos Modern (`documentStyle.documentFlavor: DocumentFlavor.MODERN`) muestran un triángulo junto a los títulos 1–5 que tienen contenido en su sección. Al plegar, el título permanece y se oculta el contenido hasta el siguiente título de nivel igual o superior, incluidos subtítulos, tablas e imágenes. Cada celda y columna Modern tiene su propia jerarquía. Esta función es independiente de `toc`. Los documentos Traditional y los editores de texto integrados no muestran estos controles. Al abrir el título principal se conserva el estado de sus subtítulos. `IParagraph.headingCollapsed` se guarda en el snapshot de Univer. Solo `true` pliega una sección. El contenido permanece y el estado admite deshacer/rehacer y colaboración: se comparte con otros editores. Una selección oculta se mueve al título visible. No se garantiza su conservación al importar o exportar Office. Para cambiar el estado mediante código, ejecuta el comando registrado con el ID del documento y el `paragraphId` estable del snapshot. Usa `collapsed: false` para desplegar. ```ts import { SetHeadingCollapsedCommand } from '@univerjs/docs' const changed = await univerAPI.executeCommand(SetHeadingCollapsedCommand.id, { unitId: documentId, paragraphId: headingParagraphId, collapsed: true, }) ``` El comando devuelve `false` si no hay cambios o el destino no es válido: documento Traditional, título oculto por un antecesor, sección vacía al plegar o falta de permiso de edición. Consulta el [contrato del comando](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/docs.md#heading-collapse).