GuidesUniver SheetsFeaturesZen Editor

Zen Editor

Facade APIPaid VersionUniver 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, Tools } 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: {
    enUS: Tools.deepMerge(
      {},
      UniverPresetSheetsCoreEnUS,
      SheetsZenEditorEnUS 
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsZenEditorPlugin 
  ],
});

Advanced Installation

npm install @univerjs/sheets-zen-editor
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor';
import { LocaleType, Tools } from '@univerjs/core';
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]: Tools.deepMerge(
      SheetsZenEditorEnUS
    ),
  },
});
 
univer.registerPlugin(UniverSheetsZenEditorPlugin);