Zen Editor
| Facade API | Has Paid Plan | Univer Server | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | - | - | - | ❌ 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-editorimport { 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-editorimport { 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 modeuniverAPI.Event.SheetEditStarted: After entering Zen editing modeuniverAPI.Event.BeforeSheetEditEnd: Before exiting Zen editing modeuniverAPI.Event.SheetEditEnded: After exiting Zen editing mode
Last updated on