QuillKit - Plugin System Demo

What is the Plugin System?

Demo 1: Full-Featured Editor (All Plugins)

This editor has all plugins loaded:

<h1>Full-Featured Editor</h1> <p>This editor includes all available plugins:</p> <ul> <li>Text formatting (bold, italic, underline, strikethrough)</li> <li>Text alignment (left, center, right)</li> <li>Lists (bullet and numbered)</li> <li>Block formatting (headings, paragraphs)</li> <li>Links</li> <li>Images with resizing</li> <li>Tables with manipulation</li> <li>History (undo/redo)</li> <li>Page view mode</li> <li>Math support (LaTeX/MathML)</li> </ul>

Demo 2: Minimal Editor (Selected Plugins)

This editor only loads basic text formatting plugins:

<h1>Minimal Editor</h1> <p>This editor only has basic formatting capabilities.</p> <p>Notice how the toolbar is much simpler!</p>

Demo 3: Custom Plugin Selection

This editor only loads table and image plugins:

<h1>Custom Selection</h1> <p>This editor is configured for inserting images and tables only.</p>

Dynamic Plugin Loading (Advanced)

Control which plugins are loaded at runtime:

<h1>Dynamic Plugin Loading</h1> <p>This editor demonstrates runtime plugin management.</p> <p>Use the buttons above to load/unload plugins dynamically!</p>

Code Examples

Full-Featured Editor (Default)

// All plugins loaded by default
const editor = QuillKit.init('#my-editor');

Minimal Editor with Selected Plugins

// Load only specific plugins
const editor = QuillKit.init('#my-editor', {
  plugins: ['textFormatting', 'alignment', 'history']
});

Custom Plugin Selection

// Load only image and table plugins
const editor = QuillKit.init('#my-editor', {
  plugins: ['image', 'table', 'history']
});

Accessing Plugin Manager

// Get the plugin manager
const pluginManager = editor.pluginManager;

// List all registered plugins
console.log(pluginManager.getRegisteredPlugins());

// Check if a plugin is loaded
if (pluginManager.isLoaded('math')) {
  console.log('Math plugin is loaded');
}

// Get a specific plugin instance
const historyPlugin = pluginManager.get('history');

Creating a Custom Plugin

// Import the Plugin base class
import { Plugin } from '@atlarafirm/quillkit';

class MyCustomPlugin extends Plugin {
  constructor(editor, options = {}) {
    super(editor, options);
    this.name = 'MyCustomPlugin';
  }

  getToolbarButtons() {
    return [{
      name: 'my-custom-buttons',
      buttons: [
        { command: 'myCommand', label: '⚡', title: 'My Custom Command' }
      ]
    }];
  }

  executeCommand(command, value) {
    if (command === 'myCommand') {
      // Your custom logic here
      alert('Custom command executed!');
    }
  }

  getMetadata() {
    return {
      name: 'My Custom Plugin',
      version: '1.0.0',
      description: 'A custom plugin example',
      author: 'Your Name'
    };
  }
}

// Register and use your custom plugin
const editor = QuillKit.init('#my-editor', {
  usePluginSystem: true
});

editor.pluginManager.register('myCustom', MyCustomPlugin);
editor.pluginManager.load('myCustom');