Revision History Plugin

This plugin is only available as a paid add-on to a TinyMCE subscription.

This feature is only available for TinyMCE 7.0 and later.

The Revision History plugin offers users the ability to view document changes over time and restore previous versions effortlessly.

Interactive example

TinyMCE
HTML
JS
Edit on CodePen

<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

<h1 style="text-align: center;">The Revision History plugin</h1>
  <p>This is a demo of the <strong>Revision History</strong> Premium plugin.</p>
  <h2>What is the Revision History plugin?</h2>
  <p>The Revision History plugin provides a simple way to view changes and restore saved versions of a document.</p>
  <p> </p>
  <h2>The world’s first Rich Text Editor in the cloud</h2>
  <div>
    <em>Have you heard about Tiny Cloud? It’s the first step in our journey to help you deliver fantastic content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They’re also ready for some exciting updates coming soon.</em>
  </div>
  <h3>An editor for every project</h3>
  <p>Here are some of our customer’s most common use cases for TinyMCE:</p>
  <ol>
    <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
    <li><em>Customer Relationship Management and marketing automation</em>(<em>e.g. Marketo</em>)</li>
    <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
    <li>Content creation in SaaS systems:
      <ul>
        <li><em>Eventbrite</em></li>
        <li><em>Evernote</em></li>
        <li><em>GoFundMe</em></li>
        <li><em>Zendesk</em></li>
      </ul>
    </li>
  </ol>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

<textarea id="revisionhistory">
  <!-- this initial content is automatically added to the Revision History view as the current version -->
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h1 style="text-align: center;">The Revision History plugin</h1>
  <p>This is a demo of the <strong>Revision History</strong> Premium plugin.</p>
  <h2>What is the Revision History plugin?</h2>
  <p>The Revision History plugin provides a simple way to view changes and restore saved versions of a document.</p>
  <p>&nbsp;</p>
  <h2>The world&rsquo;s first Rich Text Editor in the cloud</h2>
  <div>
    <em>Have you heard about Tiny Cloud? It&rsquo;s the first step in our journey to help you deliver fantastic content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They&rsquo;re also ready for some exciting updates coming soon.</em>
  </div>
  <h3>An editor for every project</h3>
  <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
  <ol>
    <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
    <li><em>Customer Relationship Management and marketing automation</em>(<em>e.g. Marketo</em>)</li>
    <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
    <li>Content creation in SaaS systems:
      <ul>
        <li><em>Eventbrite</em></li>
        <li><em>Evernote</em></li>
        <li><em>GoFundMe</em></li>
        <li><em>Zendesk</em></li>
      </ul>
    </li>
  </ol>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>
</textarea>

const revisions = [
  {
    revisionId: '4',
    createdAt: '2023-11-29T10:11:21.578Z',
    content: `
      <h2>The world&rsquo;s first Rich Text Editor in the cloud</h2>
      <p>&nbsp;</p>
      <div><em>Have you heard about Tiny Cloud? It&rsquo;s the first step in our journey to help you deliver fantastic content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They&rsquo;re also ready for some exciting updates coming soon.</em></div>
      <h3>An editor for every project</h3>
      <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
      <ol>
      <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
      <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
      <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
      <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
      </ol>
    `,
  },
  {
    revisionId: '3',
    createdAt: '2023-11-25T08:30:21.578Z',
    content: `
      <h2>The world&rsquo;s first rich text editor in the cloud</h2>
      <p>&nbsp;</p>
      <div>Have you heard about Tiny Cloud? It&rsquo;s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They&rsquo;re also ready for some exciting updates coming soon.</div>
      <p>&nbsp;</p>
      <h3>An editor for every project</h3>
      <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
      <ol>
      <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
      <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
      <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
      <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
      <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
      </ol>
      <p>&nbsp;</p>
      <p>And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there&rsquo;s likely a solution for your editor project. If you haven&rsquo;t experienced Tiny Cloud, get started today. You&rsquo;ll even get a free trial of our premium plugins &ndash; no credit card required!</p>
    `,
  },
  {
    revisionId: '2',
    createdAt: '2023-11-24T22:26:21.578Z',
    content: `
      <h2>The world&rsquo;s first rich text editor in the cloud</h2>
      <p>&nbsp;</p>
      <div>Have you heard about Tiny Cloud? It&rsquo;s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They&rsquo;re also ready for some exciting updates coming soon.</div>
      <p>&nbsp;</p>
      <p>One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at <a href="https://www.tiny.cloud/drive/">Tiny Cloud - Tiny Drive</a>, where you&rsquo;ll find a working demo and an opportunity to provide feedback to the product team.</p>
      <h3>An editor for every project</h3>
      <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
      <ul>
      <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
      <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
      <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
      <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
      <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
      </ul>
      <p>&nbsp;</p>
      <p>And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there&rsquo;s likely a solution for your editor project. If you haven&rsquo;t experienced Tiny Cloud, get started today. You&rsquo;ll even get a free trial of our premium plugins &ndash; no credit card required!</p>
    `,
  },
  {
    revisionId: '1',
    createdAt: '2023-11-23T20:26:21.578Z',
    content: `
      <!--
        <h2>The world&rsquo;s first rich text editor in the cloud</h2>
        <p>&nbsp;</p>
        <div>Have you heard about Tiny Cloud? It&rsquo;s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They&rsquo;re also ready for some exciting updates coming soon.</div>
        <p>&nbsp;</p>
        <p>One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at <a href="https://www.tiny.cloud/drive/">Tiny Cloud - Tiny Drive</a>, where you&rsquo;ll find a working demo and an opportunity to provide feedback to the product team.</p>
        <h3>An editor for every project</h3>
        <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
        <ul>
        <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
        <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
        <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
        <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
        <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
        </ul>
        <p>&nbsp;</p>
        <p>And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there&rsquo;s likely a solution for your editor project. If you haven&rsquo;t experienced Tiny Cloud, get started today. You&rsquo;ll even get a free trial of our premium plugins &ndash; no credit card required!</p>
      -->
    `,
  }
];

const get_revisions = () => new Promise((resolve) => {
    setTimeout(() => {
      resolve(revisions.sort((a, b) => new Date(a.createdAt) < new Date(b.createdAt) ? -1 : 1).reverse());
    }, 1000);
  });


tinymce.init({
  selector: 'textarea#revisionhistory',
  height: 800,
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory',
  revisionhistory_fetch: get_revisions,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

This feature is only supported when TinyMCE is run in classic mode. It is not supported in inline mode. For more information on the differences between the editing modes, see Classic editing mode.

How it works

The Revision History view is accessible via either the revisionhistory toolbar button or menu button within the View menu.

The key components are:

In the Revision History view header, there are two buttons.
- Restore this version: Set the selected version’s content to the editor and close the view.
- Close: Close the view.
The readonly diff view presents the changes between the selected version and its immediate predecessor, clearly highlighting for easy recognition. The changes are also color-coded for clarity:
- Red: Removed content.
- Green: New content.
- Yellow: Content being modified. Modifications to HTML content implies attributes or formatting (e.g. bold, italic, etc.).
The revisions sidebar displays all available document versions. When a new version is selected, the diff view is updated accordingly.

The default highlighting colors can be customized using the revisionhistory_css_url option.

The Revision History plugin interprets commented HTML as valid content, yet it disregards this content during the version comparison process. Consequently, a version containing solely commented content appears as empty in the user interface displaying the differential content.

Basic setup

To setup the Revision History plugin user-interface in the editor:

add revisionhistory to the plugins option in the editor configuration;
add revisionhistory to the toolbar option in the editor configuration;
add revisionhistory_fetch option to the editor configuration;

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory',
  // Required
  revisionhistory_fetch: () => new Promise((resolve) => {
    const revisions = [];  // Replace this with an API request to get saved versions
    resolve(revisions);
  })
});

Understanding initial and current versions

When dealing with a new document, that has no saved versions, Revision History plugin will always typically maintain two versions: the initial and current versions.

Initial Version: This version is generated during the TinyMCE Loaded event, with the editor’s initial content.
Current Version: This is generated upon accessing the Revision History, reflecting the editor’s current content. When included, it becomes the latest version and is placed at the top of the revisions list.

When the editor is initialized with content and both versions contain the same content, the Revision History retains only the current version.

For documents with saved versions, the initial version is disregarded by the Revision History assuming it’s already part of the version history. The current version is discarded if its content matches the closest saved version.

The table below summarizes how versions are handled in the Revision History:

Has Initial Version	Current Version	Has Saved Versions	Expectation
No	N/A	No	No versions are shown
No	N/A	Yes	Only the saved versions are shown
Yes	N/A	No	Only the current version is shown
Yes	Different	No	Both the initial and current versions are shown
Yes	N/A	Yes	The saved versions and the current version are shown

Has Initial Version

Current Version

Has Saved Versions

Expectation

N/A

No versions are shown

N/A

Yes

Only the saved versions are shown

Yes

N/A

Only the current version is shown

Yes

Different

Both the initial and current versions are shown

Yes

N/A

Yes

The saved versions and the current version are shown

Options

The following configuration options affect the behavior of the Revision History plugin.

`revisionhistory_fetch`

The plugin uses the revisionhistory_fetch function to retrieve the saved versions.

The revisionhistory_fetch option is an asynchronous function that returns a Promise which resolves to an array of revisions.

The Revision History plugin does not sort the result before displaying. This allows the integrators to sort the result according to their preference. It is recommended that the result should be sorted in reverse chronological order because it is more intuitive for the users when they can only identify a version by its date.

Type: Function (Returns a Promise)

Input parameters: None

Return data: Array

Example of `revisionhistory_fetch` response

const revisions = [
  {
    revisionId: '3',
    createdAt: '2023-11-29T10:11:21.578Z',
    content: `
      <h2>Welcome to TinyMCE Docs!</h2>
      <p>Here is some content that is <strong>bold</strong> and <em>italic</em>.</p>
    `,
  },
  {
    revisionId: '2',
    createdAt: '2023-11-25T08:30:21.578Z',
    content: `
      <p>Welcome to TinyMCE Docs!</p>
      <p>Here is some content that is bold and italic.</p>
    `,
  },
  {
    revisionId: '1',
    createdAt: '2023-11-24T22:26:21.578Z',
    content: `
      <p>Welcome to Tinymce!</p>
    `,
  }
]

The data returned by revisionhistory_fetch requires the following fields for the Revision History to work:

revisionId: Unique string Id.
createdAt: A UTC datetime string in ISO-8061 format. For example: 2019-11-14T10:55:31.820Z.
content: HTML string.

Example: using `revisionhistory_fetch`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory',
  revisionhistory_fetch: () =>
    fetch('<API URL>')  // Update the URL and response handling code according to your API
    .then((response) => response.json())
    .then((data) => data)
    .catch((error) => console.log('Failed to get versions\n' + error))
});

`revisionhistory_css_url`

This option sets the location where a CSS file containing the styles for change annotations should be loaded from. It can be used along with revisionhistory_diff_classes to override the default CSS classes.

Ensure that the file includes all CSS classes expected by revisionhistory_diff_classes.

Type: String

Default value: '${pluginUrl}/css/revisionhistory.css'

Example: using `revisionhistory_css_url`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory',
  revisionhistory_css_url: './revisionhistory.css'
});

`revisionhistory_diff_classes`

This option configures the CSS classes being applied to the change annotations. This option can be used in combination with the revisionhistory_css_url to provide custom styles to the change annotations.

The CSS class names must exist in the revisionhistory_css_url.

Type: Object

Default value: addition, removal, modification

{
  addition: 'tox-revisionhistory__annotation--added',
  removal: 'tox-revisionhistory__annotation--removed',
  modification: 'tox-revisionhistory__annotation--modified'
}

Example: using `revisionhistory_diff_classes`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory',
  revisionhistory_css_url: './revisionhistory.css',
  revisionhistory_diff_classes: {
    addition: 'added',
    removal: 'removed',
    modification: 'modified'
  },
  revisionhistory_fetch: () => Promise.resolve([])
});

The Revision History plugin provides the following toolbar buttons:

Toolbar button identifier Description

Toolbar button identifier	Description
`revisionhistory`	Opens the Revision History view.

revisionhistory

Opens the Revision History view.

These toolbar buttons can be added to the editor using:

The toolbar configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

The Revision History plugin provides the following menu items:

Menu item identifier Default Menu Location Description

Menu item identifier	Default Menu Location	Description
`revisionhistory`	View	Opens the Revision History view.

revisionhistory

View

Opens the Revision History view.

These menu items can be added to the editor using:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

Commands

The Revision History plugin provides the following TinyMCE commands.

Command	Description
revisionHistory	Toggle the Revision History view

Command

Description

revisionHistory

Toggle the Revision History view

Examples

tinymce.activeEditor.execCommand('revisionHistory');

Events

The Revision History plugin provides the following events.

The following events are provided by the Revision History plugin.

Name Data Description

Name	Data	Description
VersionRestored	`{ revisionId: string }`	Fired when a version is restored.

VersionRestored

{ revisionId: string }

Fired when a version is restored.

Revision History Plugin

Interactive example

How it works

Basic setup

Understanding initial and current versions

Options

revisionhistory_fetch

Example of revisionhistory_fetch response

Example: using revisionhistory_fetch

revisionhistory_css_url

Example: using revisionhistory_css_url

revisionhistory_diff_classes

Example: using revisionhistory_diff_classes

Toolbar buttons

Menu items

Commands

Events

`revisionhistory_fetch`

Example of `revisionhistory_fetch` response

Example: using `revisionhistory_fetch`

`revisionhistory_css_url`

Example: using `revisionhistory_css_url`

`revisionhistory_diff_classes`

Example: using `revisionhistory_diff_classes`