QuillKit - Global API Demo

⚠️ API Key Required: QuillKit requires a valid API key to function. This demo uses a demo API key. For your own projects, you'll need to obtain an API key from the QuillKit service.

Demonstrating the new global object pattern with QuillKit.init() and event system

🌍 Global Initialization API

New Feature: Initialize editors using the global API pattern

  • Use QuillKit.init(selector, options) instead of new QuillKit()
  • Automatically tracks all editor instances
  • Prevents duplicate initialization on the same element
  • Access editors from anywhere using QuillKit.getInstance(id)

🎯 Multiple Editors Management

Instance Management: Easily manage multiple editor instances

  • QuillKit.getAllInstances() - Get array of all active editors
  • QuillKit.getInstance(id) - Get specific editor by ID
  • QuillKit.destroyInstance(id) - Destroy specific editor
  • QuillKit.destroyAll() - Destroy all editors at once

📡 Global Event System

Event Listeners: Listen to editor events from anywhere in your application

  • QuillKit.on(event, callback) - Register event listener
  • QuillKit.off(event, callback) - Remove event listener
  • QuillKit.emit(event, data) - Emit custom events
  • Built-in events: init, destroy

Event Log:

🔄 Backward Compatibility

100% Backward Compatible: The traditional new QuillKit() syntax still works perfectly!

  • Existing code continues to work without changes
  • Choose the pattern that fits your use case
  • Mix and match both patterns in the same application
// Traditional way (still works)
const editor = new QuillKit('#my-editor');

// New global API way
const editor = QuillKit.init('#my-editor');

💡 Key Benefits