創建插件 4.0.0

我們提供了一個輕量級的插件規範和 API。這被我們的預設插件如代碼高亮Markdown 使用,但也可以用來創建你自己的插件。

插件定義

插件是包含以下屬性的對象。

屬性
id 字符串插件的唯一 ID。這可以用來通過 Reveal.getPlugin(<id>) 檢索插件實例。
init 函數可選的函數,當插件應該運行時被調用。它被調用時有一個參數;插件導入的簡報實例的引用。

init 函數可以選擇性地返回一個 Promise。如果返回了 Promise,reveal.js 將等待它解析完成,然後簡報初始化完成並觸發準備好的事件
destroy 函數可選的函數,當這個插件導入的 reveal.js 實例被卸載時調用。

這裡是一個範例插件,當按下 T 鍵時,它會在簡報中洗牌所有幻燈片。注意,我們導出一個返回新插件對象的函數。這樣做是因為同一頁面上可能有多個簡報實例,而每個實例都應該擁有我們插件的自己的實例。

// toaster.js
export default () => ({
  id: 'toaster',
  init: (deck) => {
    deck.addKeyBinding({ keyCode: 84, key: 'T' }, () => {
      deck.shuffle();
      console.log('🍻');
    });
  },
});

導入插件

插件通過將它們包含在配置選項plugins 數組中來導入。你也可以在運行時使用 Reveal.registerPlugin( Plugin ) 導入插件。

import Reveal from 'dist/reveal.esm.js';
import Toaster from 'toaster.js';

Reveal.initialize({
  plugins: [Toaster],
});

異步插件

如果你的插件需要在 reveal.js 完成初始化之前運行異步代碼,它可以返回一個 Promise。這裡是一個會延遲初始化三秒的範例插件。

let WaitForIt = {
  id: 'wait-for-it',
  init: (deck) => {
    return new Promise((resolve) => setTimeout(resolve, 3000));
  },
};

Reveal.initialize({ plugins: [WaitForIt] }).then(() => {
  console.log('Three seconds later...');
});