---
title: "Configuring the Comments plugin in embedded mode"
description: "Information on configuring the Comments plugin in embedded mode"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/comments-embedded-mode/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/comments-embedded-mode/index.md"
version: "5"
last_updated: "2024-04-09T09:35:32Z"
tokens: 2083
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/comments-embedded-mode/).
# Configuring the Comments plugin in embedded mode

## Add the Comments plugin in embeddded mode

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

```js
tinymce.init({
  selector: '#textarea',
  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

**Example**

```js
var currentAuthor = 'A Tiny User';
var userAllowedToResolve = 'Admin1';

tinymce.init({
  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;
    done({
      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 });
    })
  }
});
```

## Configuration 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`

```js
tinymce.init({
  selector: '#textarea',
  tinycomments_author: 'embedded_journalist',
  tinycomments_mode: 'embedded'
})
```

### `tinycomments_author_name`

> **Note:** Available in Tiny Comments version 2.1 onwards.
*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`

```js
tinymce.init({
  selector: '#textarea',
  tinycomments_author: 'embedded_journalist',
  tinycomments_author_name: 'Embedded Journalist',
  tinycomments_mode: 'embedded'
})
```

### `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 Function:**

```js
function (req, done, fail) {
  var 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`

```js
var currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: '#textarea',
  tinycomments_author: currentAuthor,
  tinycomments_can_delete: function (req, done, fail) {
    var allowed = req.comments.length > 0 &&
                  req.comments[0].author === currentAuthor;
    done({
      canDelete: allowed || currentAuthor === '<Admin user>'
    });
 }
});
```

### `tinycomments_can_resolve`

> **Note:** This feature is only available for TinyMCE 5.8 and later.
*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`

```js
var currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: '#textarea',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: function (req, done, fail) {
    var 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 Function:**

```js
function (req, done, fail) {
  var 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`

```js
var currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: '#textarea',
  tinycomments_author: currentAuthor,
  tinycomments_can_delete_comment: function (req, done, fail) {
    var 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 Function**

```js
function (req, done, fail) {
  var 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`

```js
var currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: '#textarea',
  tinycomments_author: currentAuthor,
  tinycomments_can_edit_comment: function (req, done, fail) {
    var allowed = req.comment.author === currentAuthor;
    done({
      canEdit: allowed || currentAuthor === '<Admin user>'
    });
  }
});
```

## Show the comments sidebar when TinyMCE loads

To show the comments sidebar when the editor is loaded or to display the sidebar by default, add a callback to open the sidebar once the editor 'skin' is loaded.

For example:

```js
tinymce.init({
  selector: '#editor',
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: canResolveCommentsCallback,
  /* The following setup callback opens the comments sidebar when the editor loads */
  setup: function (editor) {
    editor.on('SkinLoaded', function () {
      editor.execCommand("ToggleSidebar", false, "showcomments");
    })
  }
});
```

## Using Comments embedded mode with the Full Page plugin

> **Important:** The Full Page plugin (`fullpage`) was deprecated with the release of TinyMCE 5.9. For details, see [the Full Page plugin deprecation notice](../release-notes59/#thefullpagefullpageplugin). The Full Page plugin will be removed in TinyMCE 6.0.
Developers have to be cautious when deciding the order in which the plugins are added in the plugins list.

Comments can cause an issue if the [Full Page](../fullpage/) plugin `fullpage` appears before Comments plugin `tinycomments` in the plugin list, and `tinycomments` is configured to use `embedded mode`.

The order that the plugins appear affects the order that the `getContent` hooks are processed in. This creates an issue with `tinycomments` working as expected since the `fullpage` plugin adds outer `<html>` elements before `tinycomments` adds its comment data. This leads to the comment data being in the wrong place. The consequence of this situation is that when a saved document is re-opened, the comment data is lost (but the highlights are still there).

For a workaround, please ensure that `tinycomments` is listed before `fullpage` in the plugins list. This should result in `tinycomments` working properly.

## Configuring the commented text 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](https://github.com/tinymce/oxide/blob/master/src/less/theme/content/comments/comments.less) (default skin), defines the variables used for changing the annotation colours.

Refer to the [documentation](../creating-a-skin/#creatingaskin) for building a skin using this repo.

For more information on configuring TinyMCE formats, refer to the [formats](../content-formatting/#formats) section.