Froala Editor Integration: Setup + Track Changes (2026)

Getting a rich text editor up and running in your web app should be straightforward. This guide walks you through the essentials of Froala editor integration, from initial setup to enabling powerful collaborative features like track changes. Whether you’re a developer tasked with the integration or a product manager mapping out features, you’ll find the clear steps and explanations you need right here.

Getting Started: Froala Editor Initialization

First things first, what does it mean to initialize Froala? It’s simply the process of bringing the WYSIWYG editor to life on your webpage. You start by attaching the editor to a specific HTML element, like a <div> or a <textarea>, and making sure its necessary JavaScript and CSS files are loaded.

With 53,900 websites using it, Froala is a popular choice for a reason. To get started, you’ll include the Froala files (either from a download or a Content Delivery Network) and then call the constructor. It’s as simple as targeting a placeholder element with a bit of JavaScript:

new FroalaEditor('#editor-placeholder', {
  // Your configuration options go here
});

This single call kicks off the Froala editor integration process, transforming a plain element into a fully-featured text editor. One of Froala’s strengths is its flexibility; you can attach it to almost any standard HTML element. During this initialization, you can pass a configuration object to customize everything from toolbar buttons to enabling advanced plugins.

Integrating the Track Changes Plugin

For any application focused on collaboration, a track changes feature is non negotiable. It captures every insertion, deletion, and formatting change, allowing users to review and then accept or reject edits. Integrating this into Froala involves adding its dedicated track changes plugin.

The process boils down to a few key steps:

1. Include the plugin file: Ensure the track_changes.min.js script is loaded after the main Froala script.
2. Enable the plugin: In your Froala configuration object, add 'track_changes' to the pluginsEnabled array.
3. Add the toolbar button: Make the feature accessible to users by adding 'trackChanges' to your toolbarButtons array.

Once integrated, the plugin provides instant visual feedback. Additions are typically highlighted in yellow, while deleted text gets a red strikethrough, making it easy to see what has changed at a glance.

If you’re looking for a robust, out of the box solution, Loop Index LLC offers FLITE, a premium track changes plugin for Froala. It’s designed for a seamless Froala editor integration experience and runs entirely on the client side for maximum security. Try a live demo of Froala Track Changes on the Loop Index site to see it in action.

A Quick Way to Add the Plugin: Using a CDN

The most hassle free method for including the track changes plugin is to load it from a Content Delivery Network (CDN). This approach offloads hosting and can speed up load times for your users. You just need to add the plugin’s script tag in your HTML, right after the core Froala editor script.

<!-- Core Froala Editor JS -->
<script src="https://cdn.froala.com/js/froala_editor.min.js"></script>
<!-- Froala Track Changes Plugin JS -->
<script src="https://cdn.froala.com/js/plugins/track_changes.min.js"></script>

Remember, the order matters. The main editor script must come first so the plugin can properly register itself. Using a CDN is a popular method recommended in Froala’s official documentation for a quick and easy setup.

Configuring the Toolbar for Track Changes

A successful Froala editor integration of track changes isn’t complete until users can actually control it. You need to add the 'trackChanges' button to your toolbar configuration. This button acts as a toggle, allowing users to switch tracking on and off.

Here’s a sample configuration:

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', 'trackChanges', 'undo', 'redo'],
  pluginsEnabled: ['track_changes']
});

Adding this button is essential. Without it, the plugin might be active, but your users would have no way to enable tracking through the interface.

Customizing the Default Behavior

You can fine tune the user experience by setting the initial state of the track changes feature. This is perfect for workflows where you need to enforce a certain mode from the start.

Enable Track Changes by Default

In some scenarios, like a document review process, you might want every edit to be tracked automatically. You can achieve this by setting the trackChangesEnabled option to true in your configuration.

new FroalaEditor('#editor', {
  pluginsEnabled: ['track_changes'],
  toolbarButtons: ['trackChanges'],
  trackChangesEnabled: true // Tracking is on from the moment the editor loads
});

By default, this option is false. Setting it to true ensures that tracking is active as soon as the editor initializes, so users don’t have to remember to turn it on.

Enable Show Changes by Default

Similarly, you can control whether the visual highlights for tracked changes are visible on load. The showChangesEnabled option handles this. If you set it to true, the editor will immediately display all the markup for insertions and deletions.

This is controlled by a separate boolean option, showChangesEnabled, which also defaults to false. Enabling it provides immediate visual context for reviewers, who can see all pending edits without having to click anything first.

Programmatic Control: Using the Track Changes API

Beyond the user interface, a complete Froala editor integration often requires controlling features through code. Froala’s API gives you the power to manage track changes programmatically, opening the door for custom workflows and automation.

Toggling Tracking Programmatically

You can turn tracking on or off using the track_changes.toggleTracking() method. This is the code equivalent of a user clicking the toolbar button.

const editor = new FroalaEditor('.editor');

// Sometime later in your application logic...
editor.track_changes.toggleTracking();

This method is a simple toggle; it reverses the current state without needing any arguments. It’s perfect for integrating tracking controls into your application’s own UI or for triggering tracking based on specific application states.

Showing or Hiding Changes Programmatically

To control the visibility of change highlights, you can call the track_changes.showChanges() method. Hiding the changes doesn’t delete them; it just provides a “clean” view of the document, making it easier to read. The underlying tracked data remains intact.

Retrieving, Accepting, and Rejecting Changes

Your application can also interact with the tracked changes directly.

• Retrieve Pending Changes: To get a list of all unresolved edits, use track_changes.getPendingChanges(). This method returns an array of all tracked changes, which you can then use for custom displays, logging, or saving to a database.
• Accept Changes: You can accept edits using track_changes.acceptAllChanges() to approve everything at once or acceptSingleChange() for individual edits. When a change is accepted, it becomes a permanent part of the document.
• Reject Changes: Similarly, you can discard edits with track_changes.rejectAllChanges() or rejectSingleChange(). Rejecting an insertion removes the text, while rejecting a deletion restores the original text.

This level of API control is essential for building sophisticated collaborative applications. For developers who need an even richer API with features like inline commenting, the FLITE plugin from Loop Index offers an enhanced solution for your Froala editor integration needs. Check out the free 14 day trial to explore its capabilities.

The Track Changes Action Toolbar

When you enable the track changes plugin and add its button to the main toolbar, Froala automatically provides a contextual action toolbar. This is usually a dropdown submenu that appears when you interact with the track changes button. It conveniently groups all the related review actions:

• Show or Hide Changes
• Accept All Changes
• Reject All Changes

This design keeps the main toolbar clean while providing reviewers with all the tools they need in one logical place.

Content Security Policy (CSP) Integration

Security is paramount. A Content Security Policy is a crucial security layer that helps prevent attacks like cross site scripting. A proper Froala editor integration must account for your application’s CSP. For details on how Loop Index handles user data, see our Privacy Policy.

The main goal is to avoid inline styles and scripts, which are often blocked by a strict CSP.

The useClasses Option for CSP Compliance

Froala helps you stay CSP compliant with its useClasses option. By default, this option is set to true, which tells the editor to use CSS classes for styling instead of inline style attributes. For example, instead of generating <p style="font-weight: bold;">, Froala will generate <p class="fr-bold"> and rely on an external stylesheet.

This approach is much friendlier to a strict CSP, which might block inline styles. It keeps your content clean and your application secure.

Applying a CSP Nonce or Hash

In rare cases where an inline style or script is unavoidable, CSP provides a safe way to allow it using a nonce or a hash. A nonce is a random, one time token that you add to both your CSP header and the specific script or style tag you want to permit. This tells the browser that you have explicitly approved that specific piece of inline code. This is a secure way to create exceptions without weakening your overall policy by allowing all inline scripts.

Frequently Asked Questions

1. How do I start a basic Froala editor integration?
You need to include the Froala CSS and JS files in your page, add an HTML element (like a <div>) to act as a container, and then initialize the editor on that element using new FroalaEditor('your-selector');.

2. Is the track changes plugin included in the basic Froala package?
Track changes is a plugin that needs to be included separately. You can load it from a CDN or from a local file, and then you must enable it in the editor’s configuration. For licensing terms, see the FLITE Froala Track Changes software license.

3. Can I customize the appearance of tracked changes?
Yes, the visual representation of changes (yellow highlights, red strikethroughs) is controlled by CSS. You can override the default styles in your own stylesheet to match your application’s design.

4. What is the easiest way to add track changes to my Froala editor integration?
While Froala provides a native plugin, for a more comprehensive solution with enhanced features like inline comments and dedicated support, consider a specialized plugin like FLITE from Loop Index. You can explore their Froala Track Changes plugin here.

5. How does Froala handle security with a Content Security Policy?
Froala is designed to be CSP friendly. It avoids inline scripts and, by default, uses CSS classes instead of inline styles for formatting (useClasses: true), which aligns with modern security best practices.

6. Can I manage track changes from outside the editor?
Absolutely. The Track Changes API allows you to programmatically toggle tracking, retrieve pending changes, and accept or reject edits using JavaScript, enabling deep integration with your application’s logic. If you need implementation help, contact our team.