DEV Community

Cover image for Building a Complete Document Generator with Froala 4.7 Plugins
Froala
Froala

Posted on • Originally published at froala.com

Building a Complete Document Generator with Froala 4.7 Plugins

#froala

Froala 4.7 introduced a powerful trio of plugins that streamlines document workflows. Link to Anchor handles internal navigation, Page Break controls print layout, and Export to Word allows for generating downloadable files. While these tools are effective individually, they become a complete document generation system when combined.

This guide details how to integrate these plugins into a cohesive workflow. We will build a custom toolbar button that scans document headings and generates a semantic Table of Contents (TOC) directly inside the editor. This solves a common user friction point where manual linking becomes tedious for long reports in a WYSIWYG editor.

The Objective

The end goal is a seamless user experience. A user clicks a single button, the editor scans their content for structure, and a linked TOC appears at the top of the document. Users can then insert page breaks between sections and export the final result to Microsoft Word with the layout preserved.

Key Takeaways

  • Integrate Core Plugins Combine Link to Anchor, Page Break, and Export to Word for seamless workflows.

  • Automate Navigation Build a custom button that auto-generates a Table of Contents from headings.

  • Sanitize Data Implement logic to create URL-safe anchors and handle duplicate headings.

  • Export Fidelity Ensure page breaks and navigation links remain functional in Word downloads.

  • Validate Input Add safeguards to ensure manual anchor names adhere to strict naming conventions.

What We Are Building

The custom button performs four specific logic operations.

  1. Scans the DOM It identifies all H2 and H3 headings within the editor instance.

  2. Sanitizes Anchors It automatically creates URL-safe anchor tags for navigation.

  3. Generates Navigation It builds a nested, linked list at the top of the content.

  4. Manages Duplicates It intelligently handles identical heading names by appending unique counters.

This automation removes the need for manual anchor placement and ensures every exported document has a functional navigation structure.

Plugin Setup

To begin, you must load all three plugins along with their required dependencies. Note that the Export to Word plugin relies on FileSaver and html-docx-js. These libraries must be loaded before the Froala script to ensure the export functionality initializes correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Froala Editor Basic Setup</title>

    <link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/css/froala_editor.pkgd.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/css/plugins/link_to_anchor.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/css/plugins/page_break.min.css" rel="stylesheet">

    <style>
        html { 
            /* Enables smooth scrolling when jumping to anchors */
            scroll-behavior: smooth; 
        }
    </style>
</head>
<body>

    <div id="editor"></div>

    <script src="https://cdn.jsdelivr.net/npm/file-saver-es@2.0.5/dist/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html-docx-js@0.3.1/dist/html-docx.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/froala_editor.pkgd.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/plugins/link_to_anchor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/plugins/page_break.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/plugins/export_to_word.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize the editor on the div with id="editor"
            new FroalaEditor('#editor', {
                heightMin: 400, // Set a minimum height
                // Add any desired toolbar buttons and configurations here
                toolbarButtons: ['bold', 'italic', 'formatOL', 'formatUL', '|', 'pageBreak', 'export_to_word']
            });
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Creating the Generate TOC Button

Custom toolbar buttons in Froala require a two-step definition process. First, we define the visual icon. Second, we register the command logic.

The implementation below uses DOMParser rather than regex for HTML manipulation. This is the industry standard for security and reliability, as it avoids the common pitfalls of parsing HTML strings manually.

// Define the button icon for the toolbar
FroalaEditor.DefineIcon('generateTOC', {
    NAME: 'list-ol', 
    SVG_KEY: 'orderedList' // Uses the icon key for an ordered list
});

// Register the custom command 'generateTOC'
FroalaEditor.RegisterCommand('generateTOC', {
    title: 'Generate Table of Contents',
    focus: true, // Focus on the editor after execution
    undo: true, // Allow the action to be undone
    refreshAfterCallback: true, // Refresh the toolbar state

    // The main function executed when the button is clicked
    callback: function() {
        var content = this.html.get();
        var parser = new DOMParser();
        // Parse the current editor content into a manipulable DOM document
        var doc = parser.parseFromString(content, 'text/html');
        // Find all H2 and H3 headings in the content
        var headings = doc.querySelectorAll('h2, h3');

        // Exit if no headings are found
        if (headings.length === 0) {
            alert('No headings found. Add H2 or H3 headings first.');
            return;
        }

        // Remove existing TOC if regenerating to avoid duplication
        var existingTOC = doc.querySelector('.generated-toc');
        if (existingTOC) {
            existingTOC.remove();
        }

        // Variables to track anchor names and TOC items
        var usedAnchors = {};
        var tocItems = [];

        // Process each heading found
        headings.forEach(function(heading) {
            // Convert heading text to an anchor-safe slug
            var baseAnchor = heading.textContent
                .toLowerCase()
                .replace(/[^a-z0-9_\s-]/g, '') // Remove invalid characters
                .replace(/\s+/g, '-')          // Replace spaces with hyphens
                .substring(0, 50);             // Limit length

            // Initialize anchor name
            var anchor = baseAnchor;

            // Handle duplicate headings by appending an index (e.g., section-2)
            if (usedAnchors[baseAnchor]) {
                usedAnchors[baseAnchor]++;
                anchor = baseAnchor + '-' + usedAnchors[baseAnchor];
            } else {
                usedAnchors[baseAnchor] = 1;
            }

            // Add the unique ID (anchor) to the heading element itself
            heading.id = anchor;

            // Store the data needed to build the list
            tocItems.push({
                text: heading.textContent,
                anchor: anchor,
                level: heading.tagName // 'H2' or 'H3'
            });
        });

        // Start building the Table of Contents HTML structure
        var tocHTML = '<div class="generated-toc"><h4>Table of Contents</h4><ul>';

        // Iterate over the prepared items to build the list links
        tocItems.forEach(function(item) {
            // Determine if the item needs indentation (for H3 headings)
            var indent = item.level === 'H3' ? ' class="indent"' : '';
            // Create the list item with a link to the corresponding anchor
            tocHTML += '<li' + indent + '><a href="#' + item.anchor + '">' + item.text + '</a></li>';
        });

        tocHTML += '</ul></div>';

        // Prepend the generated TOC HTML to the rest of the document content
        this.html.set(tocHTML + doc.body.innerHTML);
    }
});
Enter fullscreen mode Exit fullscreen mode

The callback function parses the editor content to locate all H2 and H3 elements. It generates URL-safe anchor names from the heading text and handles duplicate headings (such as two sections named “Overview”) by appending an incremental number. Finally, it injects the ID attributes and prepends the linked list.

Styling the Generated TOC

Visual hierarchy is essential for a usable table of contents. The following CSS ensures the TOC is distinct from the main body content, using a left border and specific background color to denote it as a navigation element.

/* Styling for the main Table of Contents container */
.generated-toc {
    background: #f8f9fa; /* Light grey background for contrast */
    padding: 20px 24px; /* Internal spacing */
    margin-bottom: 24px; /* Space below the TOC box */
    border-radius: 6px; /* Slightly rounded corners */
    /* Highlight the TOC with a prominent blue left border */
    border-left: 4px solid #0066cc; 
}

/* Styling for the TOC header (e.g., "Table of Contents") */
.generated-toc h4 {
    margin: 0 0 12px 0; /* Space below the header */
    font-size: 14px;
    text-transform: uppercase; /* All caps text */
    letter-spacing: 0.5px; /* Slight letter spacing */
    color: #666; /* Grey text color */
}

/* Styling for the unordered list element */
.generated-toc ul {
    margin: 0;
    padding: 0;
    list-style: none; /* Remove default bullet points */
}

/* Styling for each list item */
.generated-toc li {
    margin: 8px 0; /* Vertical spacing between items */
}

/* Styling for the anchor links within the list */
.generated-toc li a {
    color: #0066cc; /* Blue link color */
    text-decoration: none; /* Remove default underline */
}

/* Hover effect for the links */
.generated-toc li a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Indentation specifically for H3 items */
.generated-toc .indent {
    margin-left: 20px; /* Push H3 items to the right */
}
Enter fullscreen mode Exit fullscreen mode

Adding Anchor Validation

In professional environments, maintaining clean data is as important as the feature itself. If users need to create anchors manually using the native insertAnchor button, you should validate their input to prevent broken links or invalid HTML IDs.

The specific regex used here enforces lowercase compatibility and prevents special characters that might break URL hashes.

events: {
    /**
     * Anchor beforeInsert Event Handler
     * * This function validates anchor names before they are inserted into the editor.
     * It ensures the anchor name meets minimum length and character requirements.
     * * @param {string} link - The link object (usually not used here but part of Froala signature)
     * @param {string} text - The proposed anchor name entered by the user
     * @returns {boolean} True to proceed with insertion, false to stop it
     */
    'anchor.beforeInsert': function(link, text) {
        // 1. Minimum Length Check
        if (text && text.length < 3) {
            alert('Anchor names must be at least 3 characters.');
            return false;
        }

        // 2. Character Validation Check
        // The pattern only allows lowercase letters (a-z), numbers (0-9), hyphens (-), and underscores (_).
        var validPattern = /^[a-z0-9_-]+$/;
        if (text && !validPattern.test(text)) {
            alert('Use lowercase letters, numbers, hyphens, and underscores only.');
            return false;
        }

        // If all checks pass, allow the anchor to be inserted
        return true;
    }
}
Enter fullscreen mode Exit fullscreen mode

This validation logic rejects ambiguous names like “A” or “Section 1” while accepting standard formats like “requirements”, “phase-1”, or “section_intro”.

Complete Working Example

Below is the complete implementation code. You can copy this into a single HTML file to test the full workflow from heading generation to Word export.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Froala Editor with Dynamic TOC Generation</title>
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/css/froala_editor.pkgd.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/css/plugins/link_to_anchor.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/css/plugins/page_break.min.css" rel="stylesheet">

    <style>
        /* Smooth scrolling for anchor links */
        html { 
            scroll-behavior: smooth; 
        }

        .generated-toc {
            background: #f8f9fa;
            padding: 20px 24px;
            margin-bottom: 24px;
            border-radius: 6px;
            border-left: 4px solid #0066cc;
        }

        .generated-toc h4 {
            margin: 0 0 12px 0;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #666;
        }

        .generated-toc ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .generated-toc li {
            margin: 8px 0;
        }

        .generated-toc li a {
            color: #0066cc;
            text-decoration: none;
        }

        .generated-toc li a:hover {
            text-decoration: underline;
        }

        /* Indentation for H3 items */
        .generated-toc .indent {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div id="editor">
        <h2>Project Overview</h2>
        <p>This document outlines the technical specifications for the dashboard redesign. All stakeholders should review before the kickoff meeting scheduled for next week.</p>

        <h2>Requirements</h2>
        <p>The new dashboard must support real-time data updates, mobile responsiveness, and accessibility compliance. Performance targets require sub-second load times.</p>

        <h3>Functional Requirements</h3>
        <p>Users need to filter data by date range, export reports to CSV, and customize widget layouts. Role-based permissions control section access.</p>

        <h3>Technical Requirements</h3>
        <p>The frontend uses React 18 with TypeScript. Backend APIs follow REST conventions with JSON responses. All endpoints require JWT authentication.</p>

        <h2>Timeline</h2>
        <p>Development spans 12 weeks divided into three phases covering infrastructure, features, and testing.</p>

        <h3>Phase 1 Foundation</h3>
        <p>Weeks 1 through 4 establish the component library, API layer, and auth system. Deliverables include a working prototype.</p>

        <h3>Phase 2 Features</h3>
        <p>Weeks 5 through 8 build dashboard widgets, reporting tools, and user settings. Each feature requires design review first.</p>

        <h3>Phase 3 Testing</h3>
        <p>Weeks 9 through 12 cover performance optimization, accessibility audits, and user acceptance testing.</p>

        <h2>Team</h2>
        <p>Two frontend developers, one backend developer, one designer, and one QA engineer. The PM coordinates with stakeholders weekly.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/file-saver-es@2.0.5/dist/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html-docx-js@0.3.1/dist/html-docx.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/froala_editor.pkgd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/plugins/link_to_anchor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/plugins/page_break.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.0/js/plugins/export_to_word.min.js"></script>

    <script>
        "use strict";

        /*
         * 1. Define and Register the Custom 'Generate TOC' Command
         */

        // Define the Generate TOC button icon
        FroalaEditor.DefineIcon('generateTOC', {
            NAME: 'list-ol', 
            SVG_KEY: 'orderedList'
        });

        // Register the custom command
        FroalaEditor.RegisterCommand('generateTOC', {
            title: 'Generate Table of Contents',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function() {
                var content = this.html.get();
                var parser = new DOMParser();
                // Parse the editor content as an HTML document
                var doc = parser.parseFromString(content, 'text/html');
                var headings = doc.querySelectorAll('h2, h3');

                if (headings.length === 0) {
                    alert('No headings found. Add H2 or H3 headings first.');
                    return;
                }

                // Remove existing TOC if regenerating
                var existingTOC = doc.querySelector('.generated-toc');
                if (existingTOC) {
                    existingTOC.remove();
                }

                // Track anchor names to handle duplicates (e.g., 'title' 'title-2')
                var usedAnchors = {};
                var tocItems = [];

                headings.forEach(function(heading) {
                    // Create a clean base anchor from the heading text
                    var baseAnchor = heading.textContent
                        .toLowerCase()
                        .replace(/[^a-z0-9_\s-]/g, '') // Remove non-alphanumeric/spaces/hyphens
                        .replace(/\s+/g, '-')          // Replace spaces with hyphens
                        .substring(0, 50);             // Truncate

                    var anchor = baseAnchor;

                    // Handle duplicates by appending a number
                    if (usedAnchors[baseAnchor]) {
                        usedAnchors[baseAnchor]++;
                        anchor = baseAnchor + '-' + usedAnchors[baseAnchor];
                    } else {
                        usedAnchors[baseAnchor] = 1;
                    }

                    // Set the ID attribute on the actual heading element
                    heading.id = anchor;

                    // Prepare data for the TOC list
                    tocItems.push({
                        text: heading.textContent,
                        anchor: anchor,
                        level: heading.tagName // H2 or H3
                    });
                });

                // Construct the TOC HTML structure
                var tocHTML = '<div class="generated-toc"><h4>Table of Contents</h4><ul>';

                tocItems.forEach(function(item) {
                    var indent = item.level === 'H3' ? ' class="indent"' : '';
                    tocHTML += '<li' + indent + '><a href="#' + item.anchor + '">' + item.text + '</a></li>';
                });

                tocHTML += '</ul></div>';

                // Insert the new TOC at the beginning of the editor content
                this.html.set(tocHTML + doc.body.innerHTML);
            }
        });

        /*
         * 2. Initialize the Editor
         */

        new FroalaEditor('#editor', {
            // Define the toolbar buttons to be displayed
            toolbarButtons: [
                'bold', 'italic', 'paragraphFormat',
                '|',
                'generateTOC', // Custom TOC button
                'insertAnchor', // Froala native anchor button
                'insertLink',
                '|',
                'pageBreak',
                '|',
                'export_to_word'
            ],
            // Enable necessary plugins
            pluginsEnabled: [
                'link',
                'linkToAnchor',
                'pageBreak',
                'exportToWord',
                'paragraphFormat'
            ],
            // Export to Word configuration
            wordExportFileName: 'document-with-toc',
            exportPageBreak: true,
            heightMin: 500,

            // Custom event handling for anchor insertion (manual creation)
            events: {
                'anchor.beforeInsert': function(link, text) {
                    // Validation for manual anchor names
                    if (text && text.length < 3) {
                        alert('Anchor names must be at least 3 characters.');
                        return false; // Prevent insertion
                    }

                    var validPattern = /^[a-z0-9_-]+$/;
                    if (text && !validPattern.test(text)) {
                        alert('Use lowercase letters, numbers, hyphens, and underscores only.');
                        return false; // Prevent insertion
                    }

                    return true; // Allow insertion
                }
            }
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Testing the Workflow

  1. Click the “Generate Table of Contents” button (the list icon). A linked TOC appears at the top.

  2. Click any link in the TOC to verify it scrolls to the correct section.

  3. Add page breaks before major sections to control print layout.

  4. Click the export button to download the file as a Microsoft Word document.

How the Pieces Fit Together

The Generate TOC button creates anchor IDs on headings programmatically. The Link to Anchor plugin’s insertAnchor button lets users add additional anchors manually anywhere in the document. The insertLink dropdown recognizes all anchors (both auto-generated and manual) which facilitates creating cross-references within the text.

Critically, Page Breaks inserted between sections carry through to the Word export. This ensures that when the file is downloaded, each major section starts on a new page, maintaining the document’s professional appearance.

Quick Reference

Custom Button Registration

  • FroalaEditor.DefineIcon() sets the toolbar icon.

  • FroalaEditor.RegisterCommand() defines the button behavior.

  • undo: true enables undo/redo history for the TOC generation.

Anchor Name Pattern

  • Allowed a-z, 0–9, -, _

  • Validation Regex /^[a-z0-9_-]+$/

  • Minimum Length 3 characters recommended.

Export to Word

  • Requires FileSaver and html-docx-js loaded first.

  • exportPageBreak: true includes page breaks in the output.

  • wordExportFileName sets the default download filename.

Next Steps

All three plugins require Froala 4.7 or later and are included in every license tier. For the complete API reference, consult the official plugin documentation.

Originally published on the Froala blog.

Top comments (0)