快速开始

只需几行代码，即可将 SheetNext 集成到您的项目中。支持 npm 安装和浏览器直接引入两种方式，满足不同场景需求。

npm install sheetnext

<div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>

import SheetNext from 'sheetnext';
import 'sheetnext/dist/sheetnext.css';

// 注意设置容器#SNContainer宽高
const SN = new SheetNext(document.querySelector('#SNContainer'));

<!-- 引入样式 -->
<link rel="stylesheet" href="dist/sheetnext.css">

<!-- 编辑器容器 -->
<div id="SNContainer" style="width: 100vw; height: 100vh;padding:0 7px 7px"></div>

<!-- 引入脚本 -->
<!-- <script src="dist/sheetnext.umd.js"></script> -->

<!-- 初始化,注意设置宽高 -->
<!-- <script>
  const SN = new SheetNext(document.querySelector('#SNContainer'));
</script> -->

SheetNext 支持多种可选配置参数，用于定制编辑器的功能和外观。

const SN = new SheetNext(document.querySelector('#container'), {
  AI_URL: "http://localhost:3000/sheetnextAI",  // AI 中转地址
  AI_TOKEN: "your-token",                        // AI 中转 token
  licenseKey: "your-license-key",                // 授权密钥
  menuList: (defaultList) => { /* ... */ },      // 自定义菜单栏
  menuRight: '<div>&copy SheetNext</div>'                // 菜单栏右侧自定义内容
});

参数	类型	说明
`AI_URL`	`string`	AI 服务中转地址，用于配置 AI 功能的后端接口
`AI_TOKEN`	`string`	AI 服务访问令牌，用于鉴权认证
`licenseKey`	`string`	商业版授权密钥，社区版可不填
`menuList`	`function`	自定义顶部菜单栏，接收默认菜单并返回修改后的菜单
`menuRight`	`string`	菜单栏右侧区域的自定义 HTML 内容

const SN = new SheetNext(document.querySelector('#container'), {
  menuList: (defaultList) => {
    // 在"文件"菜单末尾添加自定义项
    defaultList[0].items.push({
      label: '我的自定义功能',
      handler: () => alert('这是自定义菜单项！')
    });

    // 添加新的顶级菜单
    defaultList.push({
      label: '帮助',
      items: [
        { label: '使用文档', handler: () => window.open('https://www.sheetnext.com/docs') },
        { label: '关于', handler: () => alert('SheetNext v1.0') }
      ]
    });

    return defaultList;
  }
});

MenuList 结构定义：

interface MenuItem {
  label: string;              // 菜单项标签
  handler?: () => void;       // 点击处理函数
  disabled?: boolean;         // 是否禁用
  tip?: string;               // 提示信息（右侧显示）
  divider?: boolean;          // 是否为分隔线
}

interface Menu {
  label: string;              // 菜单标签
  items: MenuItem[];          // 菜单项列表
}

type MenuList = Menu[];

注意事项：

menuList 和 menuRight 只能在初始化时配置，后续无法修改
如果不传入 menuList，将使用默认菜单（包含：文件、插入、公式、数据、视图、更多）
AI 功能需要配置 AI_URL 才能使用，详见 AI 中转配置

快速开始

📦 使用 npm 安装

🌐 浏览器直接引入

⚙️ 初始化配置

配置参数说明

menuList 自定义菜单示例