脚注 Tune

脚注: 编辑.js。 。 。 .

因为 FireFox 错误 Tune在那里工作不顺利.

安装

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

拿到包裹

npm i --save-dev @editorjs/footnotes

或者说

yarn add @editorjs/footnotes --dev

在应用程序中包含模块

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

从 CDN 装入

装入脚本 日记 CDN 连接到您的页面 .

从源代码构建

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

使用量

添加新工具到 tools 的属性.

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

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

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 的额外配置

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

配置参数

产出数据

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

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

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

{
  "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 (中文(中国大陆) )

关于代码X

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