Integrar en Web Component

Consulta primero la instalación y el uso básico. Este ejemplo usa Web Component para montar Univer Bases en un contenedor con una altura explícita.

Pasos de integración

  1. Inicializa Univer en connectedCallback.
  2. Libera Univer en disconnectedCallback.

Código de ejemplo

TypeScript
import { UniverBasesPlugin } from '@univerjs-pro/bases'import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'import BasesUIesES from '@univerjs-pro/bases-ui/locale/es-ES'import BasesesES from '@univerjs-pro/bases/locale/es-ES'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignesES from '@univerjs/design/locale/es-ES'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIesES from '@univerjs/ui/locale/es-ES'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/bases-ui/lib/index.css'class UniverEditorElement extends HTMLElement {  private univer?: Univer  connectedCallback() {    const container = this    const univer = new Univer({      locale: LocaleType.ES_ES,      locales: {        [LocaleType.ES_ES]: mergeLocales(          DesignesES,          UIesES,          BasesesES,          BasesUIesES,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'your license.txt',    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverUIPlugin, { container })    univer.registerPlugin(UniverProFormulaEnginePlugin)    univer.registerPlugin(UniverBasesPlugin)    univer.registerPlugin(UniverBasesUIPlugin)    univer.createUnit(UniverInstanceType.UNIVER_BASE, {})    this.univer = univer  }  disconnectedCallback() {    this.univer?.dispose()    this.univer = undefined  }}customElements.define('univer-bases-editor', UniverEditorElement)
HTML
<univer-bases-editor style="display: block; height: 600px"></univer-bases-editor>

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.