在 Web Component 中整合
如果你正在尋找使用 Web Component 元件作為自訂元件的方法,請參閱此處。
Univer 支援在 Web Component 中整合。
示例程式碼
以下程式碼是透過 Lit 框架將 Univer 整合到 Web Component 中的示例。
TypeScript
import type { Univer } from '@univerjs/presets'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhTW from '@univerjs/preset-docs-core/locales/zh-TW'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-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( UniverPresetDocsCoreZhTW, ), }, presets: [ UniverDocsCorePreset({ container, }), ], }) univerAPI.createDocument({}) this.univer = univer } disconnectedCallback() { this.univer?.dispose() this.univer = undefined }}customElements.define('univer-docs-editor', UniverEditorElement)HTML
<univer-docs-editor style="display: block; height: 600px"></univer-docs-editor>你覺得這篇文檔如何?