├── .editorconfig ├── .eslintignore ├── .eslintrc.yml ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── document-pro.ts ├── document.ts ├── index.ts ├── lib │ ├── base.ts │ ├── cabinet.ts │ ├── constants.ts │ ├── document-pro.ts │ ├── document.css │ ├── document.ts │ ├── sheet.css │ ├── sheet.ts │ └── slide.ts ├── sheet.ts ├── slide.ts └── util │ └── assert.ts ├── tsconfig.json ├── tslint.json ├── typings ├── common │ ├── collaboration │ │ └── index.d.ts │ ├── editor.d.ts │ └── helper.d.ts ├── document-pro │ └── editor.d.ts ├── document │ ├── editor │ │ ├── editActions.d.ts │ │ └── index.d.ts │ └── plugins │ │ ├── collaborator │ │ └── index.d.ts │ │ ├── comment │ │ └── index.d.ts │ │ ├── demoScreen │ │ └── index.d.ts │ │ ├── gallery │ │ └── index.d.ts │ │ ├── history │ │ └── index.d.ts │ │ ├── mobile │ │ └── index.d.ts │ │ ├── revision │ │ └── index.d.ts │ │ ├── shortcut │ │ └── index.d.ts │ │ ├── tableOfContent │ │ └── index.d.ts │ │ ├── toolbar │ │ └── index.d.ts │ │ └── uploader │ │ └── index.d.ts ├── global.d.ts ├── sheet │ ├── editor │ │ ├── editor.d.ts │ │ ├── events.d.ts │ │ ├── index.d.ts │ │ ├── sheet.d.ts │ │ ├── spread.d.ts │ │ └── types │ │ │ ├── direction.d.ts │ │ │ ├── formatter.d.ts │ │ │ ├── position.d.ts │ │ │ ├── range.d.ts │ │ │ └── style.d.ts │ └── plugins │ │ ├── basic-plugins │ │ └── index.d.ts │ │ ├── chart │ │ └── index.d.ts │ │ ├── collaborators │ │ └── index.d.ts │ │ ├── comment │ │ ├── comment_list.d.ts │ │ ├── comment_model.d.ts │ │ └── index.d.ts │ │ ├── conditionalFormat │ │ └── index.d.ts │ │ ├── contextmenu │ │ └── index.d.ts │ │ ├── data-validation │ │ └── index.d.ts │ │ ├── fill │ │ └── index.d.ts │ │ ├── filterViewport │ │ └── index.d.ts │ │ ├── formulaSidebar │ │ └── index.d.ts │ │ ├── historySidebarSkeleton │ │ └── index.d.ts │ │ ├── lock │ │ └── index.d.ts │ │ ├── mobile-sheet-tab │ │ └── index.d.ts │ │ ├── mobile-toolbar │ │ └── index.d.ts │ │ ├── pivotTable │ │ └── index.d.ts │ │ ├── print │ │ └── index.d.ts │ │ ├── shortcut │ │ └── index.d.ts │ │ └── toolbar │ │ ├── events.ts │ │ └── index.d.ts └── slide │ ├── editor.d.ts │ └── plugins │ └── layouts │ └── index.d.ts ├── vendor └── shimo-jssdk │ ├── shimo.sdk.common.collaboration.min.js │ ├── shimo.sdk.common.min.js │ ├── shimo.sdk.document-pro.min.css │ ├── shimo.sdk.document-pro.min.js │ ├── shimo.sdk.document.editor.min.js │ ├── shimo.sdk.document.plugins.collaborator.min.js │ ├── shimo.sdk.document.plugins.comment.min.js │ ├── shimo.sdk.document.plugins.demo-screen.min.js │ ├── shimo.sdk.document.plugins.gallery.min.js │ ├── shimo.sdk.document.plugins.history.min.js │ ├── shimo.sdk.document.plugins.mention.min.js │ ├── shimo.sdk.document.plugins.mobile.min.js │ ├── shimo.sdk.document.plugins.revision.min.js │ ├── shimo.sdk.document.plugins.table-of-content.min.js │ ├── shimo.sdk.document.plugins.uploader.min.js │ ├── shimo.sdk.sheet.editor.min.js │ ├── shimo.sdk.sheet.plugins.basicPlugins.min.js │ ├── shimo.sdk.sheet.plugins.chart.min.js │ ├── shimo.sdk.sheet.plugins.collaboration.min.js │ ├── shimo.sdk.sheet.plugins.collaborators.min.js │ ├── shimo.sdk.sheet.plugins.comment.min.js │ ├── shimo.sdk.sheet.plugins.conditionalFormat.min.js │ ├── shimo.sdk.sheet.plugins.contextmenu.min.js │ ├── shimo.sdk.sheet.plugins.dataValidation.min.js │ ├── shimo.sdk.sheet.plugins.fill.min.js │ ├── shimo.sdk.sheet.plugins.filterViewport.min.js │ ├── shimo.sdk.sheet.plugins.form.min.js │ ├── shimo.sdk.sheet.plugins.formulaSidebar.min.js │ ├── shimo.sdk.sheet.plugins.historySidebar.min.js │ ├── shimo.sdk.sheet.plugins.lock.min.js │ ├── shimo.sdk.sheet.plugins.mobileContextmenu.min.js │ ├── shimo.sdk.sheet.plugins.mobileSheetTab.min.js │ ├── shimo.sdk.sheet.plugins.mobileToolbar.min.js │ ├── shimo.sdk.sheet.plugins.numberTextPrompt.min.js │ ├── shimo.sdk.sheet.plugins.pivotTable.min.js │ ├── shimo.sdk.sheet.plugins.print.min.js │ ├── shimo.sdk.sheet.plugins.remarks.min.js │ ├── shimo.sdk.sheet.plugins.sheetmenu.min.js │ ├── shimo.sdk.sheet.plugins.shortcut.min.js │ ├── shimo.sdk.sheet.plugins.toolbar.min.js │ ├── shimo.sdk.sheet.plugins.watermark.min.js │ └── shimo.sdk.slide.min.js └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | charset = utf-8 6 | 7 | [*.{js,ts}] 8 | indent_style = space 9 | indent_size = 2 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.json] 14 | indent_style = space 15 | indent_size = 2 16 | end_of_line = lf 17 | charset = utf-8 18 | trim_trailing_whitespace = true 19 | 20 | [*.{yml,toml}] 21 | indent_style = space 22 | indent_size = 2 23 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | vendor 2 | dist 3 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | browser: true 3 | es6: true 4 | extends: 5 | - standard 6 | globals: 7 | Atomics: readonly 8 | SharedArrayBuffer: readonly 9 | parserOptions: 10 | ecmaVersion: 2018 11 | sourceType: module 12 | rules: {} 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | index.js 3 | bundle 4 | dist 5 | *.go 6 | go.mod -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 石墨 SDK 简易开发模块 2 | 3 | ## 简介 4 | 5 | 用于石墨 SDK 接入的 All-in-One 模块。 6 | 7 | 接入示例：[sdk-cabinet-example](https://github.com/shimohq/sdk-cabinet-example)。 8 | 9 | ## 使用说明 10 | 11 | ### 安装 12 | 13 | 通过 [npm](https://www.npmjs.com/) 安装： 14 | 15 | ``` 16 | npm install shimo-sdk-cabinet 17 | ``` 18 | 19 | 通过 [yarn](https://yarnpkg.com/) 安装： 20 | 21 | ``` 22 | yarn add shimo-sdk-cabinet 23 | ``` 24 | 25 | 安装后，本模块提供以下可用资源： 26 | 27 | ``` 28 | . 29 | ├── dist 30 | │ ├── cabinet.min.js 31 | │ ├── cabinet.min.js.map 32 | │ ├── document-pro.min.js 33 | │ ├── document-pro.min.js.map 34 | │ ├── document.min.js 35 | │ ├── document.min.js.map 36 | │ ├── sheet.min.js 37 | │ ├── sheet.min.js.map 38 | │ ├── slide.min.js 39 | │ └── slide.min.js.map 40 | └── vendor 41 | ``` 42 | 43 | `dist`：为已预先处理的 JS 文件，可以在项目中直接使用。 44 | 45 | `vendor`：为已预先处理的石墨 JS SDK 文件，本模块初始化编辑器依赖于此目录下的 JS SDK 文件。 46 | 47 | `dist/cabinet.min.js`：仅包含简易开发模块基础逻辑，需配合引入 `vendor` 目录下的 `JS SDK` 一起使用。适用于有定制需求，希望自定义使用部分插件功能的场景。 48 | 49 | `dist/document.min.js`、`dist/document-pro.min.js`、`dist/sheet.min.js` 和 `dist/slide.min.js` 等等为**包含对应套件的 JS SDK 文件**的模块文件，**不需要额外引入 JS SDK 文件**。适用于无定制需求，希望全部使用石墨编辑器所有功能的场景。 50 | 51 | - document：新文档 52 | - document-pro：专业文档 53 | - sheet：表格 54 | - slide：幻灯片 55 | 56 | **本模块仅提供统一的代码包，不代表实际可用的套件。** 57 | 58 | ### 用法 (以新文档为例) 59 | 60 | #### 开始之前 61 | 62 | - 请参考[鉴权认证文档](https://platform.shimo.im/docs/api-be-authentication)了解[如何申请 Access Token](https://platform.shimo.im/docs/api-be-authentication/#%E4%BD%BF%E7%94%A8-client-credentials-%E8%8E%B7%E5%8F%96-access-token) 63 | - 请参考[创建文档](https://platform.shimo.im/docs/api-be-file/#%E5%88%9B%E5%BB%BA%E6%96%87%E6%A1%A3)一节了解如何获取文档 GUID 64 | - Access Token (下称 ``) 和 GUID (下称 ``) 均需要由你获取后提供给前端页面 65 | 66 | #### 全局引入 67 | 68 | ```html 69 | 70 |
71 | 72 | 73 | 85 | 86 | ``` 87 | 88 | #### React / Vue 等方式 89 | 90 | 以 React 为例： 91 | 92 | `shimo-sdk-cabinet/dist` 下的文件为已经过打包处理、兼容 `ES5` 的代码，包含 93 | 94 | - `cabinet.min.js` 不包含任何套件的初始化工具，仅在需定制插件时使用 95 | - `document.min.js` 文档 96 | - `document-pro.min.js` 专业文档 97 | - `sheet.min.js` 表格 98 | - `slide.min.js` 幻灯片 99 | 100 | ```js 101 | import React from "react" 102 | import ReactDOM from "react-dom" 103 | 104 | // 仅加载文档套件 105 | import ShimoCabinet from 'shimo-sdk-cabinet/dist/document.min.js' 106 | 107 | class Editor extends React.Component { 108 | componentDidMount () { 109 | const elm = ReactDOM.findDOMNode(this) 110 | const cabinet = new ShimoCabinet({ 111 | fileGuid: this.props.fileGuid, 112 | entrypoint: this.props.entrypointURL, 113 | token: this.props.accessToken, 114 | 115 | container: elm 116 | }) 117 | cabinet.render().then(() => { 118 | console.log('Editor is ready!') 119 | }) 120 | } 121 | 122 | render () { 123 | return ( 124 |
125 |
126 | ) 127 | } 128 | } 129 | 130 | ReactDOM.render(, document.getElementById('app')) 131 | ``` 132 | 133 | 如有定制需求，比如希望自定义使用部分插件 (一般建议采用上述方式自动处理配置) ： 134 | 135 | ```js 136 | import React from "react" 137 | import ReactDOM from "react-dom" 138 | 139 | // ES5 兼容的格式 140 | import ShimoCabinet from 'shimo-sdk-cabinet/dist/cabinet.min.js' 141 | // TypeScript 可用原始文件 142 | // import ShimoCabinet from 'shimo-sdk-cabinet' 143 | 144 | // 加载石墨 JS SDK 资源，需要用 script-loader 等方式加载，不能再次使用 webpack 或其他工具重新处理 145 | require('shimo-sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.common.min.js') 146 | require('shimo-sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.document.editor.min.js') 147 | // 假设只启用上传插件 148 | require('shimo-sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.document.plugins.uploader.min.js') 149 | 150 | class Editor extends React.Component { 151 | componentDidMount () { 152 | const elm = ReactDOM.findDOMNode(this) 153 | const cabinet = new ShimoCabinet({ 154 | fileGuid: this.props.fileGuid, 155 | entrypoint: this.props.entrypointURL, 156 | token: this.props.accessToken, 157 | 158 | container: elm, 159 | 160 | editorOptions: { 161 | plugins: { 162 | // 以默认选项启用工具栏插件 163 | Uploader: { 164 | // 自定义选项 165 | }, 166 | 167 | // 停用其他插件 168 | Collaborator: false, 169 | Collaboration: false, 170 | Comment: false, 171 | DemoScreen: false, 172 | Gallery: false, 173 | History: false, 174 | Shortcut: false, 175 | TableOfContent: false 176 | } 177 | } 178 | }) 179 | cabinet.render().then(() => { 180 | console.log('Editor is ready!') 181 | 182 | // 访问插件，如启动文档演示模式 183 | cabinet.document.plugins.demoScreen.show() 184 | }) 185 | } 186 | 187 | render () { 188 | return ( 189 |
190 |
191 | ) 192 | } 193 | } 194 | 195 | ReactDOM.render(, document.getElementById('app')) 196 | ``` 197 | 198 | #### ShimoCabinet 參数 199 | 200 | | 名称 | 类型 | 默认值 | 描述 | 201 | | ------------------ | --------- | ------- | ---------------- | 202 | | container | HTMLElement | 必选 | 石墨表格渲染所需的根 DOM | 203 | | entrypoint | string | 必选 | 石墨 SDK 后端入口地址 | 204 | | token | string | 必选 | 石墨 SDK 后端鉴权 access token | 205 | | fileGuid | string | 必选 | 石墨文件的 GUID | 206 | | editorOptions | object | 可选 | 编辑器基本配置 | 207 | | externals | object | 可选 | 石墨 JS SDK 文件的远程地址，用于优化加载性能 | 208 | | externalLoader | function | 可选 ｜ 自定义 JS SDK 加载器 | 209 | 210 | ##### 新文档 (`document`) 配置 211 | 212 | | 名称 | 类型 | 默认值 | 描述 | 213 | | ------------------ | --------- | ------- | ---------------- | 214 | | plugins | object | 可选 | 插件配置，设为 `true` 时使用默认配置，设为 `false` 为关闭，空配置 `{}` 等同于 `true` | 215 | | plugins.Collaborator | object
boolean | 可选 | 协作者插件，详见 [`d.ts` 文件](typings/document/plugins/collaborator/index.d.ts) | 216 | | plugins.Collaboration | object
boolean | 可选 | 协作插件，详见 [`d.ts` 文件](typings/common/collaboration/index.d.ts) | 217 | | plugins.Comment | object
boolean | 可选 | 划词评论插件，详见 [`d.ts` 文件](typings/document/plugins/comment/index.d.ts) | 218 | | plugins.DemoScreen | object
boolean | 可选 | 演示模式插件，详见 [`d.ts` 文件](typings/document/plugins/demoScreen/index.d.ts) | 219 | | plugins.Gallery | object
boolean | 可选 | 相册插件，详见 [`d.ts` 文件](typings/document/plugins/gallery/index.d.ts) | 220 | | plugins.History | object
boolean | 可选 | 历史插件，详见 [`d.ts` 文件](typings/document/plugins/history/index.d.ts) | 221 | | plugins.Shortcut | object
boolean | 可选 | 快捷键插件，详见 [`d.ts` 文件](typings/document/plugins/shortcut/index.d.ts) | 222 | | plugins.TableOfContent | object
boolean | 可选 | 目录插件，详见 [`d.ts` 文件](typings/document/plugins/tableOfContent/index.d.ts) | 223 | | plugins.Toolbar | object
boolean | 可选 | 工具栏插件，详见 [`d.ts` 文件](typings/document/plugins/toolbar/index.d.ts) | 224 | | plugins.Uploader | object
boolean | 可选 | 文件上传器插件，详见 [`d.ts` 文件](typings/document/plugins/uploader/index.d.ts) | 225 | 226 | 默认初始化的插件： 227 | - 协作者 228 | - 协作 229 | - 划词评论 230 | - 演示模式 231 | - 相册 232 | - 历史 233 | - 快捷键 234 | - 目录 235 | - 工具栏 236 | - 文件上传器 237 | 238 | ##### 专业文档 (`document-pro`) 配置 239 | 240 | 专业文档暂没有定制化配置。 241 | 242 | ##### 表格 (`sheet`) 配置 243 | 244 | | 名称 | 类型 | 默认值 | 描述 | 245 | | ------------------ | --------- | ------- | ---------------- | 246 | | plugins | object | 可选 | 插件配置，设为 `true` 时使用默认配置，设为 `false` 为关闭，空配置 `{}` 等同于 `true` | 247 | | plugins.Chart | object
boolean | 可选 | 图表插件，详见 [`d.ts` 文件](typings/sheet/plugins/chart/index.d.ts) | 248 | | plugins.Collaborator | object
boolean | 可选 | 协作者插件，详见 [`d.ts` 文件](typings/sheet/plugins/collaborator/index.d.ts) | 249 | | plugins.Collaboration | object
boolean | 可选 | 协作插件，详见 [`d.ts` 文件](typings/common/collaboration/index.d.ts) | 250 | | plugins.Comment | object
boolean | 可选 | 划词评论插件，详见 [`d.ts` 文件](typings/sheet/plugins/comment/index.d.ts) | 251 | | plugins.ContextMenu | object
boolean | 可选 | 上下文菜单插件，详见 [`d.ts` 文件](typings/sheet/plugins/contextmenu/index.d.ts) | 252 | | plugins.Fill | object
boolean | 可选 | 下拉填充插件，详见 [`d.ts` 文件](typings/sheet/plugins/fill/index.d.ts) | 253 | | plugins.FilterViewport | object
boolean | 可选 | 筛选插件，详见 [`d.ts` 文件](typings/sheet/plugins/filterViewport/index.d.ts) | 254 | | plugins.FormulaSidebar | object
boolean | 可选 | 公式插件，详见 [`d.ts` 文件](typings/sheet/plugins/formulaSidebar/index.d.ts) | 255 | | plugins.HistorySidebarSkeleton | object
boolean | 可选 | 历史插件，详见 [`d.ts` 文件](typings/sheet/plugins/historySidebarSkeleton/index.d.ts) | 256 | | plugins.Lock | object
boolean | 可选 | 锁定插件，详见 [`d.ts` 文件](typings/sheet/plugins/lock/index.d.ts) | 257 | | plugins.Shortcut | object
boolean | 可选 | 快捷键插件，详见 [`d.ts` 文件](typings/sheet/plugins/shortcut/index.d.ts) | 258 | | plugins.Toolbar | object
boolean | 可选 | 工具栏插件，详见 [`d.ts` 文件](typings/sheet/plugins/toolbar/index.d.ts) | 259 | | plugins.Print | object
boolean | 可选 | 打印插件，详见 [`d.ts` 文件](typings/sheet/plugins/print/index.d.ts) | 260 | 261 | 默认不初始化的插件： 262 | - 锁定。需要额外的定制化配置。 263 | 264 | 移动端不可用的插件： 265 | - 上下文 266 | - 下拉填充 267 | - 打印 268 | - 公式 269 | - 工具栏 270 | - 历史 271 | - 快捷键 272 | 273 | ##### 幻灯片 (`slide`) 配置 274 | 275 | 幻灯片暂没有定制化配置。 276 | 277 | ##### externals 和 externalLoader 278 | 279 | 由于打包后的文件较大，如 `dist/sheet.min.js`，且文档数据接口请求也是在 JS 加载完后进行，会影响整体性能。 280 | 281 | 因此提供 `externals` 来缓解此问题。**此模式仅支持文档 (document) 和表格 (sheet) 。** 282 | 283 | ```js 284 | import ShimoCabinet from 'shimo-sdk-cabinet/dist/cabinet.min.js' 285 | 286 | const cabinet = new ShimoCabinet({ 287 | ...options, 288 | externals: { 289 | common: { 290 | common: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.common.min.js', 291 | collaboration: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.common.collaboration.min.js' 292 | }, 293 | sheet: { 294 | editor: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.sheet.editor.min.js', 295 | basicPlugins: '/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.sheet.plugins.basicPlugins.min.js', 296 | chart: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.sheet.plugins.chart.min.js', 297 | ... 298 | } 299 | } 300 | }) 301 | cabinet.render() 302 | ``` 303 | 304 | 注意 `import ShimoCabinet from 'shimo-sdk-cabinet/dist/cabinet.min.js'` 引入的是 `cabinet.min.js`，此文件不包含 `vendor/` 下的 JS SDK 文件，因此体积很小。 305 | 306 | 下面例子定义了 `common` 和 `sheet` JS SDK 的地址： 307 | 308 | ```js 309 | externals: { 310 | common: { 311 | common: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.common.min.js', 312 | collaboration: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.common.collaboration.min.js' 313 | }, 314 | sheet: { 315 | editor: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.sheet.editor.min.js', 316 | basicPlugins: '/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.sheet.plugins.basicPlugins.min.js', 317 | chart: 'https://cdn.com/static/sdk-cabinet/vendor/shimo-jssdk/shimo.sdk.sheet.plugins.chart.min.js', 318 | ... 319 | } 320 | } 321 | ``` 322 | 323 | `common` 属于必须加载的组件，其他组件则按需选择，key 为 `shimo.sdk.<套件名>.<组件名>.min.js` 或 `shimo.sdk.<套件名>.plugins.<组件名>.min.js` 中的组件名。 324 | 325 | 同时提供一个方法：`cabinet.preload()`，此方法在调用的时候，会同步执行： 326 | 327 | - 通过 Ajax 请求指定 fileGuid 文档的数据和配置 328 | - 通过 `