Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Track changes plugin

This feature enables Froala Editor to keep track of all the changes users make to their text, images, tables, styles, formatting, and more followed by accepting and rejecting the changes accordingly through easy access to ‘Accept or Reject’ a ‘Single or All’ changes via accessible buttons in the toolbar. Additionally track addition and deletion of text, images, tables. Additionally styling and formatting changes to text, images, tables.

Track changes feature includes the following functionalities:

  • Enable / disable track changes – Users can enable and disable the track changes feature on Froala editor.
  • Show / hide tracked changes – Users can show or hide the changes made on the Froala editor.
  • Accept / Reject Single change – Users can track and ACCEPT or REJECT the single / last change that are made on the editor
  • Accept / Reject ALL changes – Users can track and ACCEPT or REJECT ALL changes that are made on the editor

With Track Changes enabled, any text or image additions are shown with a yellow highlight and changes that are intended to be deleted are highlighted in red with a strikethrough.


Plugin options:


trackChangesEnabled
Boolean- Default: false
If set to true, track changes will be active by default.
showChangesEnabled
Boolean- Default: false
If set to true, show changes will be active by default.

Plugin methods:


track_changes.toggleTracking ()
returns: -
Enable/Disable track changes
track_changes.showChanges ()
returns: -
show/hide tracked changes
track_changes.getPendingChanges ()
returns: Array
Return all tracked changes.
track_changes.acceptAllChanges()
returns: -
Accept all changes that are made on the editor
track_changes.acceptSingleChange()
returns: -
Accept the last change that are made on the editor
track_changes.rejectSingleChange()
returns: -
Reject the last change that are made on the editor

Plugin commands:


commands.moreTrackChanges ()
returns: Object
Show more track changes actions toolbar.

Add Plugin to your code:


Plugin name: track_changes

Plugin JS Script: ../js/plugins/track_changes.min.js

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/track_changes.min.js


Example:

https://froala.com/wysiwyg-editor/examples/track-changes/

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_897612893" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_509302117" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1179107038" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>