Features Overview

QuillKit is packed with powerful features for creating rich-text content.

Rich Text Editing

Full WYSIWYG editor with comprehensive formatting capabilities:

• Text Formatting: Bold, Italic, Underline, Strikethrough
• Text Alignment: Left, Center, Right
• Block Styles: Headings (H1, H2, H3) and Paragraphs
• Lists: Bullet lists and numbered lists with multiple styles
• Links: Insert and manage hyperlinks
• Undo/Redo: Full history management

List Features

• Multiple bullet styles (disc, circle, square)
• Multiple numbering styles (1,2,3 | a,b,c | i,ii,iii)
• Edit individual list item numbers with custom values

Mathematical Expression Support

Render mathematical expressions using LaTeX or MathML:

LaTeX Support

Powered by KaTeX for fast, beautiful math rendering:

// Example: E = mc²
// Click the "TeX" button in the toolbar

MathML Support

Native MathML rendering for standards-compliant math:

<math>
  <mrow>
    <mi>E</mi>
    <mo>=</mo>
    <mi>m</mi>
    <msup>
      <mi>c</mi>
      <mn>2</mn>
    </msup>
  </mrow>
</math>

Configurable Font Size

const editor = QuillKit.init('#editor', {
    mathSupport: true,
    mathFontSize: '20pt'  // All math renders at 20pt
});

Advanced Table Support

Create and customize tables with powerful features:

• Create tables with custom rows and columns (up to 20×20)
• Resizable columns - drag to resize, double-click to auto-fit
• Resizable rows - drag to adjust row height
• Custom border colors with color picker
• Add/remove rows and columns dynamically
• Full manipulation toolbar

Table Operations

• Add Row Above/Below
• Add Column Left/Right
• Remove Row/Column
• Delete Entire Table

Image Support

Comprehensive image functionality:

• Insert images with URL
• Specify pixel dimensions (width/height)
• Drag corner handles to resize images
• Proportional resizing maintains aspect ratio
• Visual resize handles on all images
• Minimum size enforcement (50px)

Icon Support

Access thousands of icons from popular libraries:

• Bootstrap Icons: 1,800+ high-quality icons
• Font Awesome: 30,000+ icons
• Custom Icons: Use your own icon images via URLs
• Interactive Browser: Beautiful modal to browse and select
• Automatic CSS Loading: Icon libraries loaded on demand

Configuration

const editor = QuillKit.init('#editor', {
    icons: {
        enabled: true,
        bootstrap: true,
        fontAwesome: true,
        autoLoadCss: true,
        customIcons: [
            { name: 'Logo', url: 'https://example.com/logo.png' }
        ]
    }
});

Column Layouts

Multi-column layouts for professional documents:

• 1-column, 2-column, or 3-column layouts
• Automatic text flow across columns
• Visual column dividers
• Element preservation (no breaking across columns)
• Perfect for newsletters, magazines, and reports

Plugin System

Modular architecture - load only what you need:

Available Plugins

• textFormatting - Bold, italic, underline, strikethrough
• alignment - Text alignment
• list - Bullet and numbered lists
• blockFormatting - Headings and paragraphs
• link - Link insertion
• image - Image insertion and resizing
• table - Table creation and manipulation
• column - Multi-column layouts
• history - Undo/redo functionality
• pageView - Page view mode
• math - LaTeX and MathML support

Load Specific Plugins

const editor = QuillKit.init('#editor', {
    plugins: ['textFormatting', 'alignment', 'list', 'history']
});

Additional Features

View Modes

• Rich Text Mode: Visual editing with toolbar
• HTML Mode: Direct HTML code editing
• CSS Mode: View extracted inline styles

Page View

• 8.5" × 11" paper size (US Letter)
• 1-inch margins on all sides
• Realistic paper appearance with shadow
• Toggle on/off via toolbar button

Keyboard Shortcuts

• Ctrl/Cmd + B - Bold
• Ctrl/Cmd + I - Italic
• Ctrl/Cmd + U - Underline
• Ctrl/Cmd + Z - Undo
• Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y - Redo

Next Steps