Web Component에 통합하기
웹 컴포넌트를 사용자 정의 컴포넌트로 사용하는 방법을 찾고 있다면 여기를 참고하세요.
Univer는 웹 컴포넌트에 통합할 수 있습니다.
예제
TypeScript
import type { Univer } from '@univerjs/presets'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'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.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, ), }, 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>이 가이드는 어떠셨나요?