# @editorjs/footnotes 中文文档

规范地址：https://npmcn.com/package/%40editorjs/footnotes/

版本：1\.1\.0
npm 元数据更新时间：2022-04-05T06:42:29.196Z
中文译文更新时间：2026-11-14T07:59:08.928Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40editorjs/footnotes
原文对照：https://npmcn.com/package/%40editorjs/footnotes/?lang=original
源码仓库：https://github.com/editor-js/footnotes

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.2 MB，48 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2021-07-21T22:25:25.965Z
- 最新版本发布：2021-08-24T21:32:01.671Z
- 近 30 天下载量：2114（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

用于编辑的 Block Tune.js 脚注

## 安装

```sh
npm install @editorjs/footnotes
```

也可以使用：`pnpm add @editorjs/footnotes`、`yarn add @editorjs/footnotes`、`bun add @editorjs/footnotes`

## README

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# 脚注 Tune

脚注: [编辑.js](https://editorjs.io/)。 。 。 .

![](https://npmcn.com/package/%40editorjs/footnotes/assets/example.gif)

> 因为 [FireFox 错误](https://bugzilla.mozilla.org/show_bug.cgi?id=1665167) Tune在那里工作不顺利.

## 安装

### 通过国家预防机制或Yarn安装

拿到包裹

```shell
npm i --save-dev @editorjs/footnotes
```

或者说

```shell
yarn add @editorjs/footnotes --dev
```

在应用程序中包含模块

```javascript
const FootnotesTune = require('@editorjs/footnotes');
```

### 从 CDN 装入

装入脚本 [日记](https://www.jsdelivr.com/package/npm/@editorjs/footnotes) CDN 连接到您的页面 .

### 从源代码构建

1.  清除还原
2.  运行 `yarn` 以安装依赖关系
3.  运行 `yarn build` 以构建软件包
4.  添加 `dist/bundle.js` 文档到您的页面.

## 使用量

添加新工具到 `tools` 的属性.

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    footnotes: {
      class: FootnotesTune,
    }
  }
  
  ...
});
```

要启用其它块的脚注 Tune, 请添加一个 `tunes` 属性到其配置 :

```typescript
var editor = EditorJS({
  ...
  
  tools: {
    list: {
      class: ListTool,
      tunes: ['footnotes'], // note that stirng here should be the same as tools object key for Tune  
    },
    paragraph: {
      tunes: ['footnotes'], // note that stirng here should be the same as tools object key for Tune  
    },
    footnotes: {
      class: FootnotesTune,
    }
  }
  
  ...
});
```

您可以通过 Tune 的额外配置

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    footnotes: {
      class: FootnotesTune,
      config: {
        placeholder: 'Your placeholder for footnotes popover',
        shortcut: 'CMD+SHIFT+F',
      },
    },
  },
  
  ...
});
```

## 配置参数

| 外地 | 类型 | 说明 |
| --- | --- | --- |
| 占位符 | `string` | 用于空脚注弹出的占位符 |
| 快捷键 | `string` | 插入脚注元素的快捷键 |

## 产出数据

此调值插入 `sup` block 内容的元素 `data-tune="footnotes"` 属性可以让你在渲染时找到它们.

还有,在Block上,你会得到 `tunes` 保存数据中的属性 `footnotes` 属性(与初始配置中的密钥相同).

`tune.footnotes` 属性分别包含 Block 内容中每个 sup 元素的字符串数组

```json
{
  "type": "paragraph",
  "data": {
    "text": "You text with a footnote<sup data-tune=\"footnotes\">1</sup>. And another footnote<sup data-tune=\"footnotes\">2</sup>"
  },
  "tunes": {
    "footnotes": [
      "This is a text for the first footnote",
      "And text for the second one"
    ]
  }
}
```

# 支助维修

如果你在你的生意中使用了这个工具和编辑器.js,请考虑支持它们的维护和演化.

[http://opencollection.com/editorjs (中文(中国大陆) )](http://opencollective.com/editorjs)

# 关于代码X

![](https://codex.so/public/app/img/codex-logo.svg)

CodeX是一个由全球数字专家组成的团队,他们有兴趣在全球市场上建立高质量的开源产品. 我们是 [打开](https://codex.so/join) 帮助那些希望不断提高技能并专业地发展领导技术的年轻人.

| 🌐 | 加入QQ 组合 | 微博 | 内存 |
| --- | --- | --- | --- |
| [代码](https://codex.so/) | [代码. so/ join](https://codex.so/join) | [@ codex 团队](http://twitter.com/codex_team) | [@ codex 团队](http://instagram.com/codex_team) |

## 常见问题

### @editorjs/footnotes 是什么？

用于编辑的 Block Tune\.js 脚注

### 如何安装 @editorjs/footnotes？

在项目目录运行 npm install @editorjs/footnotes，或使用 pnpm add / yarn add / bun add。

### @editorjs/footnotes 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @editorjs/footnotes 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @editorjs/footnotes 可以商用吗？

@editorjs/footnotes 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @editorjs/footnotes 的下载量有多少？

根据 npm 官方下载统计，@editorjs/footnotes 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,114 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @editorjs/footnotes 还在维护吗？

最新版本 1\.1\.0 发布于 2021/08/25（5 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/07/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。