Características principales

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

pnpm add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

yarn add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

bun add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

Uso

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.

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

@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

@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

@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

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

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:

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

@univerjs/docs

Este complemento es el complemento principal de Univer Docs. Proporciona UniverDocsPlugin.

Referencia: @univerjs/docs

@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

Modo preestablecido

Instalación

pnpm add @univerjs/presets @univerjs/preset-docs-core

npm install @univerjs/presets @univerjs/preset-docs-core

yarn add @univerjs/presets @univerjs/preset-docs-core

bun add @univerjs/presets @univerjs/preset-docs-core

Uso

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.

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

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

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ú:

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

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 compartido con los ID de menú de Docs y aplíquelo en el modo elegido:

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.

import { UniverUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverUIPlugin, {  ribbonType: 'grid',  menu,})

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() para actualizar la instancia existente:

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

import { UniverDocsUIPlugin } from '@univerjs/docs-ui'univer.registerPlugin(UniverDocsUIPlugin, { toc: true })

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.

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.