Integrar en Web Component

Consulta primero la instalación y el uso básico. Este ejemplo usa Web Component para montar Univer Boards 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 { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import BoardsUIesES from '@univerjs-pro/boards-ui/locale/es-ES'import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'import InkUIesES from '@univerjs-pro/ink-ui/locale/es-ES'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignesES from '@univerjs/design/locale/es-ES'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIesES from '@univerjs/docs-ui/locale/es-ES'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIesES from '@univerjs/drawing-ui/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/docs-ui/lib/index.css'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs-pro/ink-ui/lib/index.css'import '@univerjs-pro/boards-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,          DocsUIesES,          DrawingUIesES,          InkUIesES,          BoardsUIesES,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'your license.txt',    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverUIPlugin, { container })    univer.registerPlugin(UniverDocsPlugin)    univer.registerPlugin(UniverDocsUIPlugin)    univer.registerPlugin(UniverDrawingPlugin)    univer.registerPlugin(UniverDrawingUIPlugin)    univer.registerPlugin(UniverInkUIPlugin)    univer.registerPlugin(UniverBoardsPlugin)    univer.registerPlugin(UniverBoardsUIPlugin)    univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})    this.univer = univer  }  disconnectedCallback() {    this.univer?.dispose()    this.univer = undefined  }}customElements.define('univer-boards-editor', UniverEditorElement)
HTML
<univer-boards-editor style="display: block; height: 600px"></univer-boards-editor>

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.