Configuring the Comments plugin in embedded mode

Add the Comments plugin in embedded mode

To add the Comments plugin in embedded mode to the TinyMCE, configure the following options:

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_author: 'author',
  tinycomments_author_name: 'Name of the commenter',
  tinycomments_mode: 'embedded'
});

This is the minimum recommended setup for the Comments plugin in embedded mode. If the tinycomments_author and tinycomments_author_name options are not configured, all users will be assigned the name "ANON".

Interactive example

  • 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>
    <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>Comment</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>
const currentAuthor = 'A Tiny User';
const userAllowedToResolve = 'Admin1';

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

Options

tinycomments_author

This option sets the author id to be used when creating or replying to comments.

Type: String

Default value: 'Anon'

Example: using tinycomments_author

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
});

tinycomments_author_avatar

This feature is only available for TinyMCE 6.1 and later.

Optional - This option sets the URL for the author’s avatar to be used when creating or replying to comments. If this option is omitted, a generated avatar will be used instead. The avatar, if provided:

  • will be scaled to a 36px diameter circle; and

  • can be any filetype able to be wrapped in an <img> element.

The avatar will be stored alongside the embedded comment data when a new comment is created and cannot be changed later by changing this options value. To change the avatar image, the image on the server that the URL points to should be updated instead.

Type: String

Example: using tinycomments_author_avatar

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
  tinycomments_author_name: 'Embedded Journalist',
  tinycomments_author_avatar: 'https://example.com/image.ext'
});

tinycomments_author_name

Optional - This option sets the author’s display name to be used when creating or replying to comments. If this option is omitted, then the author id is used instead.

Type: String

Example: using tinycomments_author_name

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
  tinycomments_author_name: 'Embedded Journalist',
});

tinycomments_can_delete

Optional - This option sets the author permissions for deleting comment conversations. If the tinycomments_can_delete option is not included, the current author (tinycomments_author) cannot delete comment conversations created by other authors.

Type: Function

Default value:

(req, done, fail) => {
  const allowed = req.comments.length > 0 &&
                req.comments[0].author === <Current_tinycomments_author>;
  done({
    canDelete: allowed
  });
}

The following example extends the default behavior to allow the author <Admin user> to delete other author’s comment conversations by adding || currentAuthor === '<Admin user>'.

Example: using tinycomments_can_delete

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_delete: (req, done, fail) => {
    const allowed = req.comments.length > 0 &&
                  req.comments[0].author === currentAuthor;
    done({
      canDelete: allowed || currentAuthor === '<Admin user>'
    });
  }
});

tinycomments_can_resolve

Optional - This option adds a Resolve Conversation item to the dropdown menu of the first comment in a conversation. This callback sets the author permissions for resolving comment conversations.

Type: Function

Example: using tinycomments_can_resolve

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: (req, done, fail) => {
    const allowed = req.comments.length > 0 &&
                  req.comments[0].author === currentAuthor;
    done({
      canResolve: allowed || currentAuthor === '<Admin user>'
    });
  }
});

tinycomments_can_delete_comment

Optional - This option sets the author permissions for deleting comments. If the tinycomments_can_delete_comment option is not included, the current author (tinycomments_author) cannot delete comments added by other authors.

Type: Function

Default value:

(req, done, fail) => {
  const allowed = req.comment.author === <Current_tinycomments_author>;
  done({
    canDelete: allowed
  });
}

The following example extends the default behavior to allow the author <Admin user> to delete other author’s comments by adding || currentAuthor === '<Admin user>'.

Example: using tinycomments_can_delete_comment

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_delete_comment: (req, done, fail) => {
    const allowed = req.comment.author === currentAuthor;
    done({
      canDelete: allowed || currentAuthor === '<Admin user>'
    });
  }
});

tinycomments_can_edit_comment

Optional - This option sets the author permissions for editing comments. If the tinycomments_can_edit_comment option is not included, the current author (tinycomments_author) cannot edit comments added by other authors.

Type: Function

Default value:

(req, done, fail) => {
  const allowed = req.comment.author === <Current_tinycomments_author>;
  done({
    canEdit: allowed
  });
}

The following example extends the default behavior to allow the author <Admin user> to edit other author’s comments by adding || currentAuthor === '<Admin user>'.

Example: using tinycomments_can_edit_comment

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_edit_comment: (req, done, fail) => {
    const allowed = req.comment.author === currentAuthor;
    done({
      canEdit: allowed || currentAuthor === '<Admin user>'
    });
  }
});

Show the comments sidebar when TinyMCE loads

The sidebar_show option can be used to show the comments sidebar when the editor is loaded.

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: canResolveCommentsCallback,
  sidebar_show: 'showcomments'
});

Configuring the commented text and block CSS properties

The highlight styles are now a part of the overall content skin and are changed through customizing the skin.

TinyMCE open source project oxide (default skin), defines the variables used for changing the annotation colours.

Refer to the documentation for building a skin using this repo.

For more information on configuring TinyMCE formats, refer to the formats section.