在 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 UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'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_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetDocsCoreZhCN, ), }, 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>你觉得这篇文档如何?