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';
 
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';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      SheetsZenEditorEnUS
    ),
  },
});
 
univer.registerPlugin(UniverSheetsZenEditorPlugin);

Was this page helpful?