The Comments plugin Demo

Interactive example

This example displays how to add the ability to start or join a conversation by adding comments to the content within the TinyMCE editor.

In this example, the features in the Comments plugin are highlighted, including adding a comment, replying to a comment, and deleting a comment.

For information on the other Comments plugin configuration options, see: The Comments plugin.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<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>
      <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>
    <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 30 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">
          <td><a href="">Tiny Cloud</a></td>
          <td>The easiest and most reliable way to integrate powerful rich text editing into your application.</td>
          <td><a href="">Tiny Drive</a></td>
          <td>Image and file management for TinyMCE in the cloud.</td>
    <p>Thanks for supporting TinyMCE! We hope it helps your users create great content.</p>
var currentAuthor = 'A Tiny User';
var userAllowedToResolve = 'Admin1';

  selector: 'textarea#comments-embedded',
  toolbar: 'bold italic underline | addcomment showcomments',
  menubar: 'file edit view insert format tools tc',
  menu: {
    tc: {
      title: 'Comments',
      items: 'addcomment showcomments deleteallconversations'
  plugins: 'paste code tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: function (req, done, fail) {
    var allowed = req.comments.length > 0 &&
                  req.comments[0].author === currentAuthor;
      canResolve: allowed || currentAuthor === userAllowedToResolve
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
  /* The following setup callback opens the comments sidebar when the editor loads */
  setup: function (editor) {
    editor.on('SkinLoaded', function () {
      editor.execCommand("ToggleSidebar", false, "showcomments", { skip_focus: true });