Introduction to Tiny Comments

Tiny Comments provides the ability to add comments to the content and collaborate with other users for content editing.

For help using comments in TinyMCE, see: Using comments.
For an overview of the TinyMCE Comments plugin, see: Overview.
For information on adding and configuring the comments plugin for TinyMCE, see: Getting started with the Comments plugin - Selecting a mode.

Overview

Note: This plugin is only available for paid TinyMCE subscriptions.

The Comments plugin provides the ability to start or join a conversation by adding comments to the content within the TinyMCE editor.

Collaborate on your projects within your content

The Comments plugin provides:

A user interface to collaborate on content by creating and replying to comments.
A way to control the delete and resolve operations on a comment or comment thread.

Primary Comments functions

The Comments plugin allows the user to perform the following functions:

Create a comment
Edit a comment
Reply to a comment
Lookup a comment
Resolve a comment thread
Delete a comment or comment thread

Interactive example

The following example shows how to configure the Comments plugin in embedded mode. For information on configuring the Comments plugin, see: Comments plugin Modes.

TinyMCE HTML JS Edit on CodePen.io

<h2>Welcome to Tiny Comments!</h2> <p>Please try out this demo of our new Tiny Comments premium plugin.</p> <ol> <li>Highlight the content you want to comment on.</li> <li>Click the <em>Add Comment</em> icon in the toolbar.</li> <li>Type your comment into the text field at the bottom of the Comment sidebar.</li> <li>Click <strong>Save</strong>.</li> </ol> <p>Your comment is then attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p> <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 14 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p> <p>And if you are ready to buy, you can either purchase Tiny Comments a la carte or as part of your Tiny Pro subscription. If you are a current cloud user, Tiny Comments has already been added to your key, and if you are a self-hosted user, Tiny Comments is now available in the latest download which you can access in My Account.</p> <h2>A simple table to play with</h2> <table style="border-collapse: collapse; width: 100%;" border="1"> <thead> <tr> <th>Product</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td><a href="https://www.tiny.cloud/">Tiny Cloud</a></td> <td>The easiest and most reliable way to integrate powerful rich text editing into your application.</td> </tr> <tr> <td><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td> <td>Image and file management for TinyMCE in the cloud.</td> </tr> </tbody> </table> <p>Thanks for supporting TinyMCE! We hope it helps your users create great content.</p>

<div id="tiny-ui">
  <textarea id="comments-embedded" style="width: 100%; height: 500px;">
    <h2>Welcome to Tiny Comments!</h2>
    <p>Please try out this demo of our new Tiny Comments premium plugin.</p>
    <ol>
      <li>Highlight the content you want to comment on.</li>
      <li>Click the <em>Add Comment</em> icon in the toolbar.</li>
      <li>Type your comment into the text field at the bottom of the Comment sidebar.</li>
      <li>Click <strong>Save</strong>.</li>
    </ol>
    <p>Your comment is then attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p>
    <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 14 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>
    <p>And if you are ready to buy, you can either purchase Tiny Comments a la carte or as part of your Tiny Pro subscription. If you are a current cloud user, Tiny Comments has already been added to your key, and if you are a self-hosted user, Tiny Comments is now available in the latest download which you can access in My Account.</p>
    <h2>A simple table to play with</h2>
    <table style="border-collapse: collapse; width: 100%;" border="1">
      <thead>
        <tr>
          <th>Product</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="https://www.tiny.cloud/">Tiny Cloud</a></td>
          <td>The easiest and most reliable way to integrate powerful rich text editing into your application.</td>
        </tr>
        <tr>
          <td><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td>
          <td>Image and file management for TinyMCE in the cloud.</td>
        </tr>
      </tbody>
    </table>
    <p>Thanks for supporting TinyMCE! We hope it helps your users create great content.</p>
    <!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzE5Njc5NjAwMjIxNjIxMzk5NzAzOTE1Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTk2Nzk2MDAyMjE2MjEzOTk3MDM5MTUiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTY3OTYwMDIyMTYyMTM5OTcwMzkxNSIsImF1dGhvciI6IkFub3RoZXIgVGlueSBVc2VyIiwiYXV0aG9yTmFtZSI6IkFub3RoZXIgVGlueSBVc2VyIiwiY29udGVudCI6IlBsZWFzZSByZXZpc2UgdGhpcyBzZW50ZW5jZSwgZXhjbGFtYXRpb24gcG9pbnRzIGFyZSB1bnByb2Zlc3Npb25hbCEiLCJjcmVhdGVkQXQiOiIyMDIxLTA1LTE5VDA0OjQ4OjIzLjkxNFoiLCJtb2RpZmllZEF0IjoiMjAyMS0wNS0xOVQwNDo0ODoyMy45MTRaIn1dfX0=-->
  </textarea>
</div>

Getting started with the Comments plugin - Selecting a mode

The Comments plugin is available in two modes: Callback mode and Embedded mode.

Callback Mode: This is the default mode for the Comments plugin. This mode is used to store the comments outside the content on a server, such as a database. This mode requires a number of callback functions to handle comment data.; For instructions on configuring the Comments plugin in callback mode, see: Configuring the Comments plugin in callback mode
Embedded Mode: This mode stores the comments within the content. No callbacks need to be configured for this mode.; For instructions on configuring the Comments plugin in embedded mode, see: Configuring the Comments plugin Comments in embedded mode

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.