QuillKit - Column Layout Demo

About Column Support

New Feature: QuillKit now supports multi-column layouts, similar to newspaper columns! You can easily create 2-column or 3-column layouts for your content.

How to Use:

1 Col - Single column (normal layout, removes columns)
2 Col - Two-column layout
3 Col - Three-column layout

Click the column buttons in the toolbar to apply different layouts to your content!

Interactive Demo

Try out the column layout feature below. The editor already contains sample content. Use the 1 Col, 2 Col, and 3 Col buttons in the toolbar to change the layout!

<h2>Understanding Multi-Column Layouts</h2>
<p>Multi-column layouts are commonly used in newspapers, magazines, and professional documents to create more visually appealing and readable content. The text flows naturally from one column to the next, making efficient use of space.</p>

<h3>Benefits of Column Layouts</h3>
<p>Column layouts offer several advantages for document design:</p>
<ul>
  <li><strong>Improved readability</strong> - Shorter line lengths are easier to read</li>
  <li><strong>Better space utilization</strong> - Fit more content on a single page</li>
  <li><strong>Professional appearance</strong> - Common in newspapers and magazines</li>
  <li><strong>Visual variety</strong> - Break up large blocks of text</li>
  <li><strong>Flexible design</strong> - Mix single and multi-column sections</li>
</ul>

<h3>Use Cases</h3>
<p>Multi-column layouts are perfect for various types of content:</p>
<p><strong>Newsletters:</strong> Create professional-looking company newsletters with multiple columns for different sections.</p>
<p><strong>Magazines:</strong> Design magazine-style articles with flowing text across columns.</p>
<p><strong>Academic Papers:</strong> Some academic formats require multi-column layouts for conference proceedings.</p>
<p><strong>Brochures:</strong> Design marketing materials with attractive column layouts.</p>
<p><strong>Reports:</strong> Make long reports more readable with strategic use of columns.</p>

<h3>Best Practices</h3>
<p>When using column layouts, keep these tips in mind:</p>
<ol>
  <li>Use appropriate column widths for readability</li>
  <li>Maintain consistent spacing between columns</li>
  <li>Consider the length of your content</li>
  <li>Test how images and tables flow in columns</li>
  <li>Use single columns for headings and important callouts</li>
</ol>

<h3>Technical Details</h3>
<p>The column feature uses CSS multi-column layout properties, which provide native browser support for flowing content across multiple columns. The implementation includes:</p>
<ul>
  <li>Automatic column balancing</li>
  <li>Column gap spacing (20px)</li>
  <li>Visual column dividers</li>
  <li>Break-inside prevention for elements</li>
</ul>

<p>This ensures that elements like images, tables, and headings don't get awkwardly split across columns, maintaining a professional appearance throughout your document.</p>

Quick Actions

Use these buttons to quickly test different column layouts:

Code Example

Here's how to initialize the editor with column support:

// Initialize editor (column support is enabled by default)
const editor = QuillKit.init('#editor', {
  toolbar: true,
  pageView: true,
  height: '600px'
});

// Or access the column plugin directly
const columnPlugin = editor.pluginManager.get('column');

// Apply 2-column layout programmatically
columnPlugin.setColumnCount(2);

// Remove columns (back to single column)
columnPlugin.setColumnCount(1);
    