Comparing Implementing Collaboration: TinyMCE & Froala

Building collaboration into a rich text editor is hard, no matter what kind of app you're working on. Requirements stack up fast: co-editing, version history, inline comments, mentions, and now, AI-powered suggestions. Users expect it all to just work without a hitch, while behind the scenes, a single shared document means hours of architecture. In this guide, we’ll break down how much effort it really takes to build collaborative editing with Froala and with TinyMCE. 

Before you get started, check out part one, Collaboration Features in Rich Text Editors - Comparison Guide and if you’re interested, part two: the guide to Comparing Implementing Collaboration Features between TinyMCE and Tiptap.

This TinyMCE Collaboration guide walks through advanced collaboration features, and compares the integration complexity for each feature in Froala and TinyMCE. The guide uses T-shirt sizing—Small, Medium, Large, and Extra Large—to gauge implementation effort. As a reference, these sizes translate to the following, assuming a team of 3 developers:

• Small (~1 week or half sprint)
• Medium (~2 weeks or one sprint)
• Large (~4 weeks or two sprints)
• Extra Large (~6–8 weeks or three to four sprints)

These estimates include development, QA, documentation, integrations, and delivery of production-ready code. The actual time it takes you and your team will vary, of course, based on team size, experience, and workload. Now let's take a closer look at what's under the hood.

Why native is better than third-party integrations for collaboration in an RTE

Native collaboration means aligning collaboration features around a common architecture rather than simply bolting on a couple of third-party feature upgrades. Collaboration built directly into the editor means working inside a unified ecosystem: shared data models, event handling, and user permissions that all speak the same language. Feedback discussions, version merges, and edit histories don't have to negotiate across third-party APIs; they're natively understood.

By contrast, piecing together libraries to mimic "collaboration" only builds a temporary illusion of control. You might get it running, but every dependency you add multiplies the potential for race conditions, mismatched schemas, and performance cliffs. Every new update becomes a risk assessment rather than an improvement.

Native integration keeps the complexity under one roof: a single vendor, a single update path, and one security model. It's not simply less code; it's less chaos. And for teams that plan to maintain their product longer than a sprint cycle, that difference is everything.

Comparison table for collaboration features in TinyMCE and Froala

Here's what's available in TinyMCE and Froala for collaboration features:

Tracking changes

A track changes feature captures edits to text, images, tables, formatting, and styles, and lets users accept or reject changes one by one, or all at once. Users see what changed without touching the original text. It’s a must-have for any collaboration-focused app.

Time to implement Froala’s Track Changes

Froala’s Track Changes plugin has the basics: additions shown in yellow, deletions in red strikethrough. Under the hood though, it’s more than just visual cues. You’ll need to add the plugin to the toolbar, configure toggle behavior, and manage states. 

To implement Froala’s Track Changes, you will:

1. Add the track_changes plugin to the pluginsEnabled list (or include the JS file if you're not using the packaged build).
2. Add the trackChanges button to your toolbarButtons so users can enable/disable tracking.

To configure user interactions & controls:

• Use methods exposed on editor.track_changes:
  • toggleTracking(): turn tracking on/off.
  • showChanges(): show or hide the tracked edits.
  • getPendingChanges(): returns an array of changes awaiting resolution.
  • acceptAllChanges(), rejectAllChanges(), acceptSingleChange(), rejectSingleChange(): accept and reject changes in bulk or singular.

You’ll also need to connect all of these change states to your database through the Froala API to properly track, maintain, and store changes per user for each piece of content.

Toolbar commands automatically appear in a submenu once trackChanges is enabled: controls for show/hide, accept/reject, etc. Froala allows users to toggle visibility of edits (show/hide) without losing tracked data. It’s also possible to take the plugin further and use CSS to style it. 

The basic installation is a Medium effort, but that does not include persistence, conflict resolution, or multi-user review workflows (if you build them). Those are outside the plugin’s built-in scope.

Level of effort: Medium.

Time to implement TinyMCE’s Suggested Edits

The new Suggested Edits feature dropped in TinyMCE version 8.0 (August 2025), bringing native support for inline change tracking. It also includes the ability for users to comment on any change made, and start a discussion thread right on that change.

To set up Suggested Edits, you’ll need to do a bit of prep: connect your app to a user database, and decide how you’ll handle content that includes unreviewed edits still visible in the editor.

Here’s what implementation involves:

1. Add suggestededits to your plugins and toolbar lists.
2. Configure the suggestededits_model—a JSON object that tracks content states and must stay synced with the editor.
3. Set up fetch_users, a callback that takes an array of user IDs and returns a Promise with full user objects.
4. Define the user_id so the editor knows which user is currently active.

You can also dig deeper into customization with options like suggestededits_content and suggestededits_access, or tweak the styling with CSS. For a vanilla JavaScript example, check out the How to Add Suggested Edits to TinyMCE guide.

Estimated effort: Medium.

Document history

Version history is a must-have in content, document, and learning management systems—letting users restore earlier drafts, lesson plans, or documents directly in the editor. 

Time to implement TinyMCE’s Revision History

Revision History is TinyMCE’s versioning feature. It gives users the ability to load and compare previous document versions side-by-side. It’s more than just a few lines of code, as it requires storing version data, rendering comparisons, and tracking changes between save points. But if you need authorship, visual diffs, and full version history, the integration effort is well worth it.

⚠️ Heads up: Revision History only works in classic mode, not inline. You’ll find details in the TinyMCE Classic editing mode docs.

Revision History installation

There are three key parts to getting Revision History up and running: initial setup, lazy loading, and author tracking.

Initial setup

1. Add the revisionhistory plugin to both your plugins and toolbar lists.
2. Include revisionhistory_fetch in your TinyMCE config.
3. Write a revisionhistory_fetch function to connect the editor to your backend.

For code examples, check out the Revision History installation guide.

Revision History lazy loading implementation

To keep things lightweight you can lazy load version data, fetching only a list of revisions upfront, then load the full content only when a specific version is selected.

1. Create a lightweight revision list for TinyMCE.
2. Write a revisionhistory_fetch_revision function for loading individual revisions.
3. Add revisionhistory_fetch_revision to your config.
4. Update revisionhistory_fetch to support lightweight loading behavior.

You’ll find implementation details in the lazy loading tutorial.

Revision History author tracking implementation

Want to show who made each revision? Most setups can keep using the existing fetch logic with a few small updates.

1. Add revisionhistory_author and revisionhistory_display_author to your config.
2. Add author metadata to your revisions and lightRevisions JSON objects.
3. Configure your display options to show user info as needed.

For more, check the author information guide or dive into the full TinyMCE docs.

You can also style the plugin with custom CSS to match your app’s look and feel.

Level of effort: Medium to Large based on your app’s complexity.

Froala’s document history

Froala doesn’t offer document history at this time.

User comments and mentions

Comments are the starting point for collaboration in any rich text editor. They spark discussion, guide editing, and help teams draft and create together. Only TinyMCE offers conversation features that rely on a REST API and extensive configuration. 

Time to implement TinyMCE’s Comments and Mentions

Comments and Mentions are made to work side by side. You can install Mentions on its own, but you’ll get the most value when both features are used together. They complement each other, and give users more possibilities for collaboration.

Comments installation process

TinyMCE Comments supports two modes: Embedded and Callback. For most production apps, Callback Mode is the one you’ll want—it connects to your backend using the TinyMCE Comments API. Embedded Mode is great for testing or demos, and you can get it running in about 10 minutes using the Comments Plugin setup guide.

Here’s what you’ll need for Callback Mode:

• Add tinycomments to your plugins and toolbar lists.
• Configure all required Callback Mode options with your own functions. Each one uses done and fail callbacks, and TinyMCE provides ready-to-go code snippets. You just need to plug in your own API endpoints and auth:
  • tinycomments_create
  • tinycomments_reply
  • tinycomments_edit_comment
  • tinycomments_delete_comment
  • tinycomments_delete
  • tinycomments_delete_all
  • tinycomments_lookup
• Set up the sidebar_show_option to enable the comment sidebar UI.

That’s the flow for integrating Comments in Callback Mode.

Level of effort: Large.

Mentions installation process

TinyMCE Mentions lets users tag each other Google Docs-style right inside the editor. Just a heads-up: only the first 10 users from your array will appear in the dropdown.

To get started, you’ll need to:

• Add mentions to your plugins and toolbar arrays.
• Write one callback function: mentions_fetch, which pulls users from your API.

Compared to other plugins, setup is straightforward. There are also seven customization options if you want more control over how mentions behave.

Level of effort: Small.

Froala’s comment and mentions

Froala doesn’t have comments or mentions.

Real-time editing

Real-time collaboration enables live, character-by-character co-editing while multiple users are present in the same document. Real-time editing is an additional complexity that most applications don’t need, though it is useful for some specific cases.

Codox.io x Froala installation process

Froala adds real-time collaboration through a Codox.io integration. You’ll embed the Codox client library and CSS, wait for Froala to fully initialize, and then call codox.init() with your config.

Here’s what the implementation involves:

• Include Codox assets (wave.client.js and wave.client.css).
• Add an initialized event hook to your Froala config.
• Call codox.init(config) once the editor is ready.

The config needs to define:

• app: "froala".
• A unique docId for the session.
• user metadata (id, name, avatar).
• The Froala editor instance.
• Your Codox apiKey.

⚠️ Heads up: If you’re running multiple editors on one page, each needs its own Codox object instance. 

Once active, users see real-time edits and can identify collaborators via avatars or initials. The integration is straightforward, but expect to spend time wiring up Codox on both the frontend and backend, especially if you want user presence and doc history to persist beyond a single session.

Level of effort: Small.

TinyMCE’s real-time editing

TinyMCE doesn’t have real-time editing yet.

What’s next?

Most often TinyMCE integrations simply require one or two words added to the plugins and toolbar arrays, but these advanced collaboration tools take a little more development effort for a lot more functionality. For example, Dark Mode can be enabled in TinyMCE’s configuration in just two lines. 

If you’ve read this far, you likely need to build a high-quality collaborative editing environment. So why not give TinyMCE a try? The free 14-day trial of TinyMCE includes all the advanced collaboration tools: Comments, Mentions, Revision History, and Suggested Edits. See just how fast your team can move with the right features in place. Need help along the way? Contact the TinyMCE team to talk to a person.