Skip to Content
🎉 Univer 0.6.6 is released.Read more →
GuidesUniver SheetsFeaturesZen Editor

Zen Editor

Facade APIHas Paid PlanUniver ServerUniver on Node.jsPreset
---❌ import via plugins

The Zen Editor plugin provides an immersive cell editing experience. Through Zen Editor, you can easily edit text, images, links, and other content in cells in the form of a document editor.

This feature includes the following plugin packages:

Presets Installation

npm install @univerjs/sheets-zen-editor
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets'; import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core'; import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US'; import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor'; import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US'; import '@univerjs/sheets-zen-editor/lib/index.css'; import '@univerjs/sheets-zen-editor/facade'; const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: merge( {}, UniverPresetSheetsCoreEnUS, SheetsZenEditorEnUS ), }, theme: defaultTheme, presets: [ UniverSheetsCorePreset(), ], plugins: [ UniverSheetsZenEditorPlugin ], });

Piecemeal Installation

npm install @univerjs/sheets-zen-editor
import { LocaleType, merge, Univer } from '@univerjs/core'; import { defaultTheme } from "@univerjs/design"; import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor'; import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US'; import '@univerjs/sheets-zen-editor/lib/index.css'; import '@univerjs/sheets-zen-editor/facade'; const univer = new Univer({ theme: defaultTheme, locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: merge( SheetsZenEditorEnUS ), }, }); univer.registerPlugin(UniverSheetsZenEditorPlugin);

Facade API

To get full definition of facade api, please refer to FacadeAPI

Enter Zen Editing Mode

FWorkbook.startZenEditingAsync() can enter Zen editing mode, at this time, a full-screen editor will be opened, and you can edit the content of the currently active cell.

const fWorkbook = univerAPI.getActiveWorkbook(); const success = await fWorkbook.startZenEditingAsync(); console.log(success);

Exit Zen Editing Mode

FWorkbook.endZenEditingAsync(save) can exit Zen editing mode. At this time, the full-screen editor will be closed. If save is true, the changes in the editor will be saved.

const fWorkbook = univerAPI.getActiveWorkbook(); const success = await fWorkbook.endZenEditingAsync(false); console.log(success);

Event Listening

Zen Editor can use the editing events of cells to listen to changes in the editor:

  • univerAPI.Event.BeforeSheetEditStart: Before entering Zen editing mode
  • univerAPI.Event.SheetEditStarted: After entering Zen editing mode
  • univerAPI.Event.BeforeSheetEditEnd: Before exiting Zen editing mode
  • univerAPI.Event.SheetEditEnded: After exiting Zen editing mode

Was this page helpful?
Last updated on