Configuring the Comments plugin access option

Access Options

The following configuration option affects the behavior of the Comments plugin.

tinycomments_access

Type: String

Possible values: 'comment'

This option sets the editor to the readonly mode, while still allowing comments to be made.

  • When tinycomments_access is set to comment, the editor will automatically switch to Readonly Mode.

Comments with tinycomments_access set to 'comment'

When tinycomments_access is set to comment, the editor will be in Readonly mode, but the comments will be in a comment-only mode. This means that users can add and delete comments, but they cannot edit the editor content.

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  toolbar: 'addcomment showcomments',
  tinycomments_access: 'comment'
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<div id="tiny-comments-ui-mode">
  <textarea id="comments-ui-mode" style="width: 100%; height: 500px;">
    <h2>Welcome to the New Tiny Comments Mode!</h2>
    <p>This demo showcases the new Comments UI Mode. You can add or delete comments on the content, but the content itself is locked for editing.</p>
    <ol>
      <li>Highlight the text 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 in the Comment sidebar.</li>
      <li>Click <strong>Comment</strong> to attach the comment to the text.</li>
      <li>To delete a comment, click the comment options and choose <strong>Delete Comment</strong>.</li>
    </ol>
    <p>Your comment will appear linked to the selected text, just like this: <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p>
    <p>Note that in this mode, the content is non-editable, but you can freely interact with comments.</p>
    <h2>Explore Tiny Comments</h2>
    <p>If you want to explore more, you can try Tiny Comments in your own environment for free for 14 days by signing up for a Tiny account. Visit our <a href="https://www.tiny.cloud/docs/">documentation</a> for more information.</p>
    <h2>A Demo Table</h2>
    <table style="border-collapse: collapse; width: 100%;" border="1">
      <thead>
        <tr>
          <th>Product</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="https://www.tiny.cloud/">Tiny Cloud</a></td>
          <td>Integrates rich text editing easily into any application.</td>
        </tr>
        <tr>
          <td><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td>
          <td>Manage files and images in the cloud seamlessly with TinyMCE.</td>
        </tr>
      </tbody>
    </table>
    <p>Thanks for testing the new comment-only mode! We hope this improves your workflow.</p>
    <!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzE5Njc5NjAwMjIxNjIxMzk5NzAzOTE1Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTk2Nzk2MDAyMjE2MjEzOTk3MDM5MTUiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTY3OTYwMDIyMTYyMTM5OTcwMzkxNSIsImF1dGhvciI6IkFub3RoZXIgVGlueSBVc2VyIiwiYXV0aG9yTmFtZSI6IkFub3RoZXIgVGlueSBVc2VyIiwiY29udGVudCI6IlBsZWFzZSByZXZpc2UgdGhpcyBzZW50ZW5jZSwgZXhjbGFtYXRpb24gcG9pbnRzIGFyZSB1bnByb2Zlc3Npb25hbCEiLCJjcmVhdGVkQXQiOiIyMDIxLTA1LTE5VDA0OjQ4OjIzLjkxNFoiLCJtb2RpZmllZEF0IjoiMjAyMS0wNS0xOVQwNDo0ODoyMy45MTRaIn1dfX0=-->
  </textarea>
</div>
tinymce.init({
  selector: "textarea#comments-ui-mode",
  plugins: [
    "tinycomments", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks", "quickbars", 'quickbars', 'image',
  ],
  toolbar: "addcomment showcomments | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
  tinycomments_mode: 'embedded',
  tinycomments_access: 'comment',
  sidebar_show: 'showcomments'
});

Comments with readonly set to true

When not using the tinycomments_access option, the comments sidebar will have a different state depending on the use of the readonly option.

With neither Readonly mode nor tinycomments: "comment" configured, both the editor and the comments sidebar will be in their default state. By default, comments can be both viewed and added, and the editor content is editable.

With Readonly mode enabled, the comments sidebar will be in a view-only mode, meaning all comments can be viewed and navigated, but no new comments can be added. Also, in the readonly state, the editor will still not be editable.

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  toolbar: 'addcomment showcomments',
  readonly: true, // set the editor to read-only mode
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<div id="tiny-ui-readonly-demo">
  <textarea id="comment-readonly-ui-mode" style="width: 100%; height: 500px; background-color: #f4f4f9; border: 1px solid #ccc; padding: 1em;" readonly>
    <h2 style="color: #2c3e50;">Welcome to Tiny Comments Read-Only Mode!</h2>
    <p>This demo highlights the read-only mode of the <strong>Tiny Comments plugin</strong>. In this mode, both the content and comments are locked, meaning you can't add, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_43588520831727784474869" data-mce-annotation="tinycomments">edit</span>, or delete comments unless <code>tinycomments_access</code> is specified. Without it, interaction with comments is disabled.</p>
    <p>Feel free to browse the <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_61717779551727784503828" data-mce-annotation="tinycomments">existing</span> comments, but note that you can only view them in this mode.</p>
    <h2 style="color: #2c3e50;">How Read-Only Mode Works</h2>
    <p>When activated, the toolbar and comment options are disabled. The following actions are unavailable:</p>
    <ul>
    <li>Adding new comments</li>
    <li><span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19209556671727784557859" data-mce-annotation="tinycomments">Editing existing</span> comments</li>
    <li>Deleting comments</li>
    </ul>
    <p>Comments will be displayed like this: <span class="mce-annotation tox-comment" style="background-color: #ffd54f;" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p>
    <p>If you'd like to explore the full functionality of Tiny Comments, including creating and editing, try enabling editable mode or sign up for a <strong>14-day free trial</strong> of Tiny's premium features.</p>
    <h2 style="color: #2c3e50;">A Simple Table Example (Read-Only)</h2>
    <table style="border-collapse: collapse; width: 100%; border: 1px solid #ddd;">
    <thead style="background-color: #f4f4f9;">
    <tr>
    <th style="padding: 0.5em; text-align: left;">Product</th>
    <th style="padding: 0.5em; text-align: left;">Value</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td style="padding: 0.5em;"><a href="https://www.tiny.cloud/">Tiny Cloud</a></td>
    <td style="padding: 0.5em;">Easily integrate rich text editing into your application with TinyMCE.</td>
    </tr>
    <tr>
    <td style="padding: 0.5em;"><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td>
    <td style="padding: 0.5em;">Manage images and files for TinyMCE in the cloud.</td>
    </tr>
    </tbody>
    </table>
    <p>Thanks for exploring TinyMCE's read-only mode! We hope this demo shows off its versatility and ease of use.</p><!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzE5Njc5NjAwMjIxNjIxMzk5NzAzOTE1Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTk2Nzk2MDAyMjE2MjEzOTk3MDM5MTUiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTY3OTYwMDIyMTYyMTM5OTcwMzkxNSIsImF1dGhvciI6IkFub3RoZXIgVGlueSBVc2VyIiwiYXV0aG9yTmFtZSI6IkFub3RoZXIgVGlueSBVc2VyIiwiY29udGVudCI6IlBsZWFzZSByZXZpc2UgdGhpcyBzZW50ZW5jZSwgZXhjbGFtYXRpb24gcG9pbnRzIGFyZSB1bnByb2Zlc3Npb25hbCEiLCJjcmVhdGVkQXQiOiIyMDIxLTA1LTE5VDA0OjQ4OjIzLjkxNFoiLCJtb2RpZmllZEF0IjoiMjAyMS0wNS0xOVQwNDo0ODoyMy45MTRaIn1dfSwibWNlLWNvbnZlcnNhdGlvbl80MzU4ODUyMDgzMTcyNzc4NDQ3NDg2OSI6eyJ1aWQiOiJtY2UtY29udmVyc2F0aW9uXzQzNTg4NTIwODMxNzI3Nzg0NDc0ODY5IiwiY29tbWVudHMiOlt7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fNDM1ODg1MjA4MzE3Mjc3ODQ0NzQ4NjkiLCJhdXRob3IiOiJBbm9uIiwiYXV0aG9yTmFtZSI6IkFub24iLCJjb250ZW50IjoiRWRpdCBjb21tZW50IiwiY3JlYXRlZEF0IjoiMjAyNC0xMC0wMVQxMjowNzo1NC44NjlaIiwibW9kaWZpZWRBdCI6IjIwMjQtMTAtMDFUMTI6MDc6NTQuODY5WiJ9XX0sIm1jZS1jb252ZXJzYXRpb25fNjE3MTc3Nzk1NTE3Mjc3ODQ1MDM4MjgiOnsidWlkIjoibWNlLWNvbnZlcnNhdGlvbl82MTcxNzc3OTU1MTcyNzc4NDUwMzgyOCIsImNvbW1lbnRzIjpbeyJ1aWQiOiJtY2UtY29udmVyc2F0aW9uXzYxNzE3Nzc5NTUxNzI3Nzg0NTAzODI4IiwiYXV0aG9yIjoiQW5vbiIsImF1dGhvck5hbWUiOiJBbm9uIiwiY29udGVudCI6ImJyb3dzZSBjb21tZW50cyIsImNyZWF0ZWRBdCI6IjIwMjQtMTAtMDFUMTI6MDg6MjMuODI4WiIsIm1vZGlmaWVkQXQiOiIyMDI0LTEwLTAxVDEyOjA4OjIzLjgyOFoifV19LCJtY2UtY29udmVyc2F0aW9uXzE5MjA5NTU2NjcxNzI3Nzg0NTU3ODU5Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTkyMDk1NTY2NzE3Mjc3ODQ1NTc4NTkiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTIwOTU1NjY3MTcyNzc4NDU1Nzg1OSIsImF1dGhvciI6IkFub24iLCJhdXRob3JOYW1lIjoiQW5vbiIsImNvbnRlbnQiOiJTdWdnZXN0aW9uOiB1cGRhdGUgdG8gXCJFZGl0aW5nIGV4aXN0aW5nIGNvbW1lbnRzIHdpdGhpbiB0aGUgRWRpdG9yXCIiLCJjcmVhdGVkQXQiOiIyMDI0LTEwLTAxVDEyOjA5OjE3Ljg1OVoiLCJtb2RpZmllZEF0IjoiMjAyNC0xMC0wMVQxMjowOToxNy44NTlaIn1dfX0=-->
  </textarea>
</div>
tinymce.init({
  selector: "textarea#comment-readonly-ui-mode",
  plugins: [
    "tinycomments", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks", "quickbars",
  ],
  toolbar: "addcomment showcomments togglereadonly | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
  tinycomments_mode: 'embedded',
  sidebar_show: 'showcomments',
  readonly: true,
  setup: (editor) => {
    const isReadonlyMode = () => editor.mode.get() === 'readonly';
    editor.ui.registry.addToggleButton('togglereadonly', {
      text: 'Readonly mode',
      context: 'any', // Available from 7.4
      onSetup: (buttonApi) => {
        const activate = (api) =>  () => api.setActive(isReadonlyMode());
        editor.on('SwitchMode', activate(buttonApi));
        return (teardownApi) => editor.off('SwitchMode', activate(teardownApi));
      },
      onAction: (api) => {
        editor.mode.set(isReadonlyMode() ? 'design' : 'readonly');
      }
    });
  }
});