Getting Started with QuillKit
Welcome! This guide will help you get QuillKit up and running in your project.
QuillKit requires a valid API key to function. You must obtain an API key from the QuillKit service before using the library in your projects.
Installation
Using npm
Install QuillKit via npm:
npm install @atlarafirm/quillkitUsing CDN
You can include QuillKit directly in your HTML using a CDN link. This is the easiest way to get started without any build tools.
unpkg
<!-- Latest version -->
<script src="https://unpkg.com/@atlarafirm/quillkit/dist/quillkit.js"></script>jsDelivr
<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/@atlarafirm/quillkit/dist/quillkit.js"></script>Using Direct Download
Download the quillkit.js file from the dist folder and include it in your HTML:
<script src="path/to/quillkit.js"></script>Quick Start
Here's the simplest way to get started using a CDN:
1. Create an HTML file
<!DOCTYPE html>
<html>
<head>
<title>My Editor</title>
</head>
<body>
<textarea id="my-editor">
<h1>Hello World!</h1>
<p>Start editing here...</p>
</textarea>
<!-- Include QuillKit from CDN -->
<script src="https://unpkg.com/@atlarafirm/quillkit/dist/quillkit.js"></script>
<script>
const editor = QuillKit.init('#my-editor', {
apiKey: 'your_api_key_here' // Replace with your actual API key
});
</script>
</body>
</html>2. Open in browser
That's it! You now have a fully functional rich-text editor. No build tools or npm installation required!
Basic Usage
Global API Pattern (Recommended)
The Global API provides instance management and a global event system:
// Initialize editor with API key
const editor = QuillKit.init('#my-editor', {
apiKey: 'your_api_key_here' // Required
});
// Access from anywhere
const editor = QuillKit.getInstance('my-editor');Traditional Constructor Pattern
The traditional pattern is still fully supported:
const editor = new QuillKit('#my-editor');Configuration Options
Customize the editor with these options:
const editor = QuillKit.init('#my-editor', {
toolbar: true, // Show toolbar (default: true)
modeSwitching: true, // Enable mode switching (default: true)
mathSupport: true, // Enable LaTeX and MathML (default: true)
mathFontSize: null, // Default font size for math (e.g., '20pt')
height: '500px', // Custom editor height (default: '400px')
pageView: true, // Enable page view mode (default: true)
customSnippets: {} // Custom HTML snippets (default: {})
});Minimal Configuration
Create a simple editor without toolbar:
const editor = QuillKit.init('#my-editor', {
toolbar: false,
modeSwitching: false
});