在 Web Component 中整合

如果你正在尋找使用 Web Component 元件作為自訂元件的方法，請參閱此處。

Univer 支援在 Web Component 中整合。

範例程式碼

以下程式碼示範如何透過 Lit 框架將 Univer 整合到 Web Component 中。

TypeScript

import type { Univer } from '@univerjs/presets'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreZhTW from '@univerjs/preset-sheets-core/locales/zh-TW'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'class UniverEditorElement extends HTMLElement {  private univer?: Univer  connectedCallback() {    if (this.univer) return    const container = this    const { univer, univerAPI } = createUniver({      locale: LocaleType.ZH_TW,      locales: {        [LocaleType.ZH_TW]: mergeLocales(          UniverPresetSheetsCoreZhTW,        ),      },      presets: [        UniverSheetsCorePreset({          container,        }),      ],    })    univerAPI.createWorkbook({})    this.univer = univer  }  disconnectedCallback() {    this.univer?.dispose()    this.univer = undefined  }}customElements.define('univer-sheets-editor', UniverEditorElement)

HTML

<univer-sheets-editor style="display: block; height: 600px"></univer-sheets-editor>

你覺得這篇文檔如何？