禅编辑器
| Facade API | 可付费升级 | 需要 Univer 服务端 | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | - | - | - | ❌ 通过 plugin 引入 |
禅编辑器插件提供了一种沉浸式的单元格编辑体验。通过禅编辑器，你可以轻松地以文档编辑器的形式在单元格中编辑文本等内容。
该功能包含以下插件包：
Presets 安装
npm install @univerjs/sheets-zen-editorimport { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor';
import SheetsZenEditorZhCN from '@univerjs/sheets-zen-editor/locale/zh-CN';
import '@univerjs/sheets-zen-editor/lib/index.css';
import '@univerjs/sheets-zen-editor/facade';
const { univerAPI } = createUniver({
locale: LocaleType.ZH_CN,
locales: {
[LocaleType.ZH_CN]: merge(
{},
UniverPresetSheetsCoreZhCN,
SheetsZenEditorZhCN
),
},
theme: defaultTheme,
presets: [
UniverSheetsCorePreset(),
],
plugins: [
UniverSheetsZenEditorPlugin
],
});手动组合安装
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 SheetsZenEditorZhCN from '@univerjs/sheets-zen-editor/locale/zh-CN';
import '@univerjs/sheets-zen-editor/lib/index.css';
import '@univerjs/sheets-zen-editor/facade';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.ZH_CN,
locales: {
[LocaleType.ZH_CN]: merge(
SheetsZenEditorZhCN
),
},
});
univer.registerPlugin(UniverSheetsZenEditorPlugin);Facade API
完整 facade api 类型定义，请查看 FacadeAPI
进入禅编辑模式
FWorkbook.startZenEditingAsync() 可以进入禅编辑模式，此时会打开一个全屏编辑器，可以编辑当前活动单元格的内容。
const fWorkbook = univerAPI.getActiveWorkbook();
const success = await fWorkbook.startZenEditingAsync();
console.log(success);退出禅编辑模式
FWorkbook.endZenEditingAsync(save) 可以退出禅编辑模式，此时会关闭全屏编辑器，如果 save 为 true，则会保存编辑器中更改的内容。
const fWorkbook = univerAPI.getActiveWorkbook();
const success = await fWorkbook.endZenEditingAsync(true);
console.log(success);事件监听
禅编辑器可以使用单元格的编辑事件 达到监听编辑器的变化：
univerAPI.Event.BeforeSheetEditStart：进入禅编辑模式前univerAPI.Event.SheetEditStarted：进入禅编辑模式后univerAPI.Event.BeforeSheetEditEnd：退出禅编辑模式前univerAPI.Event.SheetEditEnded：退出禅编辑模式后
Last updated on