Intégrer dans Web Component

Consultez d’abord l’installation et les premiers pas. Cet exemple utilise Web Component pour monter Univer Boards dans un conteneur avec une hauteur explicite.

Étapes d’intégration

  1. Initialisez Univer dans connectedCallback.
  2. Libérez Univer dans disconnectedCallback.

Exemple de code

TypeScript
import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import BoardsUIfrFR from '@univerjs-pro/boards-ui/locale/fr-FR'import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'import InkUIfrFR from '@univerjs-pro/ink-ui/locale/fr-FR'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignfrFR from '@univerjs/design/locale/fr-FR'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIfrFR from '@univerjs/docs-ui/locale/fr-FR'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIfrFR from '@univerjs/drawing-ui/locale/fr-FR'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIfrFR from '@univerjs/ui/locale/fr-FR'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.FR_FR,      locales: {        [LocaleType.FR_FR]: mergeLocales(          DesignfrFR,          UIfrFR,          DocsUIfrFR,          DrawingUIfrFR,          InkUIfrFR,          BoardsUIfrFR,        ),      },    })    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>

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.