API Reference

Complete API documentation for QuillKit.

Global API Methods

Static methods for managing editor instances across your application.

QuillKit.init(textarea, options)

Initialize a new editor instance with automatic instance tracking.

const editor = QuillKit.init('#my-editor', { 
    apiKey: 'your_api_key_here',  // Required
    height: '500px' 
});

Parameters

Returns

QuillKit - Editor instance (returns existing if already initialized)

QuillKit.getInstance(id)

Get an editor instance by its textarea ID.

const editor = QuillKit.getInstance('my-editor');
if (editor) {
    console.log(editor.getValue());
}

Parameters

Returns

QuillKit | null - Editor instance or null if not found

QuillKit.getAllInstances()

Get an array of all active editor instances.

const allEditors = QuillKit.getAllInstances();
console.log(`Total editors: ${allEditors.length}`);

Returns

Array<QuillKit> - Array of all editor instances

QuillKit.destroyInstance(id)

Destroy a specific editor instance by ID.

const destroyed = QuillKit.destroyInstance('my-editor');

Returns

Boolean - True if destroyed, false if not found

QuillKit.destroyAll()

Destroy all editor instances.

QuillKit.destroyAll();

QuillKit.on(event, callback)

Register a global event listener.

QuillKit.on('init', (data) => {
    console.log(`Editor ${data.id} initialized`);
});

Built-in Events

• init - Fired when an editor is initialized
• destroy - Fired when an editor is destroyed

QuillKit.off(event, callback)

Remove a global event listener.

const handler = (data) => console.log(data);
QuillKit.on('init', handler);
// Later...
QuillKit.off('init', handler);
// Or remove all listeners
QuillKit.off('init');

QuillKit.emit(event, data)

Emit a custom event to all listeners.

QuillKit.emit('custom-event', { message: 'Hello!' });

Constructor

new QuillKit(textarea, options)

Traditional constructor pattern (still fully supported).

const editor = new QuillKit('#my-editor', {
    toolbar: true,
    height: '600px'
});

Instance Methods

getValue()

Get the current HTML content as a string.

const html = editor.getValue();

Returns

String - Current HTML content

setValue(value)

Set the editor content.

editor.setValue('<h1>New Content</h1><p>Some text...</p>');

Parameters

getMode()

Get the current view mode.

const mode = editor.getMode(); // Returns: 'rich', 'html', or 'css'

Returns

String - Current mode ('rich', 'html', or 'css')

setMode(mode)

Switch to a different view mode.

editor.setMode('html');  // Switch to HTML mode
editor.setMode('rich');  // Switch to Rich Text mode
editor.setMode('css');   // Switch to CSS mode

Parameters

destroy()

Remove the editor and restore the original textarea.

editor.destroy();

Configuration Options

Events

Global Events

Use QuillKit.on() to listen for these events:

Custom Events

You can emit and listen for custom events:

// Listen for custom event
QuillKit.on('my-event', (data) => {
    console.log('Custom event:', data);
});

// Emit custom event
QuillKit.emit('my-event', { custom: 'data' });

Next Steps