Using TinyMCE Comments

Overview

This guide provides visual instructions for using the comments plugin, including how to:

The editor must contain content before a comment can be added.

Add a comment

  1. Select the content from the desired location in the editor body.

    1. From the menubar, toggle Insert → Add comment, or

    2. click on the Add comment Add comment toolbar button, or

    3. press Ctrl+Alt+M (Windows/Linux) or Cmd+Option+M ⌥ + ⌘ + M (Mac) to add a comment.

  2. The Comments sidebar will appear on the right side of the editor instance.

  3. The <textarea> within the comments box will display the placeholder text "Add comment…" and the selected field will have a visible blue focus highlight.

    Add Comment

  4. Type a comment in the comment box, and the "Add comment…" placeholder text will disappear, replaced by the user’s comment.

  5. Click Save or press Enter to store the comment.

    Comment Created

  6. Or press Cancel to discard the comment before it is saved.

Result: The selected content will now display a blue focus border with an orange backcolor highlight. The comment will be displayed in the Comments sidebar.

Replying to comments

  1. Select or focus the desired conversation from either the editor body or Comments sidebar.

  2. From the selected comment card Click on the Add comment button.

    Reply Add Comment Focus

  3. The <textarea> within the comments box will display the placeholder text "Add comment…" and the selected field will have a visible blue focus highlight.

    Reply Add Comment Textarea

  4. Type a comment in the comment box, and the "Add comment…" placeholder text will disappear, replaced by the user’s comment.

    Reply Add Comment Pre Submit

  5. Click Save or press Enter to store the comment.

    Reply Add Comment Submitted

  6. Or press Cancel to discard the comment before it is saved.

Edit a comment

Follow this procedure to edit a comment.

  1. Click on the ellipsis (ellipsis - 3 horizontal dots) icon above the comments box to expand the menu.

    Edit Existing Comment Ellipsis

  2. Select Edit from the menu items.

    Edit Comment

  3. The comment field now displays a blue focus border and becomes editable.

  4. Make the required changes to the comment.

  5. Click Save to store the changes.

    Comment Edited Comment

  6. Or press Cancel to discard the changes before saving.

Delete a comment

Follow this procedure to delete a comment.

This option is not available for the first comment in a conversation.

  1. Click on the ellipsis (ellipsis - 3 horizontal dots) icon above the comments box to expand the menu.

    Delete Comment

  2. Select Delete from the menu items.

  3. The following options will appear in the comments sidebar:

  4. After selecting the Delete option, the following decision dialog box will appear with two options:

    1. Cancel: cancel the action.

    2. Delete: delete the comment from the current active focused conversation.

      Delete Comment Dialog

Delete a comment thread (conversation)

This option is only available for the first comment in a conversation. Once the comment is saved, follow this procedure to delete a conversation.

  1. Click on the ellipsis (ellipsis - 3 horizontal dots) icon above the comments box to expand the menu.

  2. Select Delete conversation from the menu items.

    Delete Conversation

  3. After selecting the Delete conversation option, the following decision dialog box will appear:

  4. Cancel: cancel the action.

  5. Delete: remove the conversation.

    Delete Conversation Dialog

Result: The conversation and all its subsequent comments will be deleted from the document.

Resolve a comment thread (conversation)

This feature requires the tinycomments_resolve or tinycomments_can_resolve setting to be configured.

This option is only available for the first comment in a conversation. Once a comment is saved, follow this procedure to resolve a conversation.

  1. Click on the ellipsis (ellipsis - 3 horizontal dots) icon above the comments box to expand the menu.

  2. Select Resolve conversation from the menu items.

    Resolve Conversation

    Result: The conversation will be resolved and removed from the stored conversations.

Show or view a comment

Follow this procedure to display the comments sidebar:

  1. Place the cursor on the desired content in the editor body:

  2. From the navigation menu, choose View → Show comments, or

  3. Click on the Show comments Comments toggle toolbar button.

Result: The comments sidebar will appear and display the corresponding conversation for the highlighted content.

Delete all comment threads

Follow this procedure to delete all conversations in the document:

  1. From the navigation menu, choose File → Delete all conversations to delete all the comments in a document.

    Delete All Conversations File Menu

  2. The following decision dialog box will appear:

    Delete All Conversations

  3. Click Yes to remove all the comments in the selected document, or No to dismiss this action.