访问选项

最后更新：2026-11-04 10:10:15

访问选项

以下配置选项影响 Comments 插件的行为。

`tinycomments_access`

类型： String

可能的值： 'comment'

此选项将编辑器设置为只读模式，但仍允许发表评论。

当 tinycomments_access 设置为 comment 时，编辑器将自动切换到 Readonly Mode。

设置 `tinycomments_access` 为 `'comment'` 时的评论

当 tinycomments_access 设置为 comment 时，编辑器将处于 Readonly mode，但评论将处于 仅评论 模式。这意味着用户可以添加和删除评论，但无法编辑编辑器内容。

示例

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的 HTML
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  toolbar: 'addcomment showcomments',
  tinycomments_access: 'comment'
});

HTML

<div id="tiny-comments-ui-mode">
  <textarea id="comments-ui-mode" style="width: 100%; height: 500px;">
    <h2>欢迎使用新的 Tiny Comments 模式！</h2>
    <p>本示例展示了新的 Comments UI Mode。您可以在内容上添加或删除评论，但内容本身锁定不可编辑。</p>
    <ol>
      <li>高亮您想评论的文本。</li>
      <li>点击工具栏中的 <em>Add Comment</em> 图标。</li>
      <li>在 Comment 侧边栏的文本框中输入您的评论。</li>
      <li>点击 <strong>Comment</strong> 将评论附加到文本上。</li>
      <li>要删除评论，点击评论选项并选择 <strong>Delete Comment</strong>。</li>
    </ol>
    <p>您的评论将显示在所选文本的链接处，就像这样：<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">完全像这样！</span></p>
    <p>请注意，在此模式下，内容不可编辑，但您可以自由地与评论交互。</p>
    <h2>探索 Tiny Comments</h2>
    <p>如果您想探索更多，可以通过注册 Tiny 账户免费试用 Tiny Comments 14 天。请访问我们的 <a href="https://www.tiny.cloud/docs/">文档</a> 了解更多信息。</p>
    <h2>示例表格</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>轻松将富文本编辑功能集成到任何应用程序中。</td>
        </tr>
        <tr>
          <td><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td>
          <td>使用 TinyMCE 无缝管理云端文件和图像。</td>
        </tr>
      </tbody>
    </table>
    <p>感谢测试新的仅评论模式！我们希望这能改善您的工作流程。</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'
});

设置 `readonly` 为 `true` 时的评论

当未使用 tinycomments_access 选项时，评论侧边栏的状态将取决于 readonly 选项的使用情况。

如果既未配置 Readonly mode 也未配置 tinycomments: "comment"，编辑器和评论侧边栏都将处于默认状态。默认情况下，评论既可以查看也可以添加，且编辑器内容可编辑。

启用只读模式后，评论侧边栏将处于仅查看模式，这意味着所有评论都可以查看和导航，但无法添加新评论。此外，在只读状态下，编辑器仍不可编辑。

示例

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
});

HTML

<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;">欢迎使用 Tiny Comments 只读模式！</h2>
    <p>此演示突出了<strong>Tiny Comments 插件</strong>的只读模式。在此模式下，内容和评论均被锁定，意味着您无法添加、<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_43588520831727784474869" data-mce-annotation="tinycomments">编辑</span>或删除评论，除非指定了<code>tinycomments_access</code>。否则，评论交互将被禁用。</p>
    <p>请随意浏览<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_61717779551727784503828" data-mce-annotation="tinycomments">现有的</span>评论，但请注意在此模式下您只能查看它们。</p>
    <h2 style="color: #2c3e50;">只读模式如何工作</h2>
    <p>激活后，工具栏和评论选项将被禁用。以下操作不可用：</p>
    <ul>
    <li>添加新评论</li>
    <li><span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19209556671727784557859" data-mce-annotation="tinycomments">编辑现有的</span>评论</li>
    <li>删除评论</li>
    </ul>
    <p>评论将如下显示：<span class="mce-annotation tox-comment" style="background-color: #ffd54f;" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">完全如此！</span></p>
    <p>如果您想探索 Tiny Comments 的全部功能，包括创建和编辑，请尝试启用可编辑模式或注册 Tiny 高级功能的<strong>14 天免费试用</strong>。</p>
    <h2 style="color: #2c3e50;">一个简单的表格示例（只读）</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;">产品</th>
    <th style="padding: 0.5em; text-align: left;">价值</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;">使用 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;">在云端管理 TinyMCE 的图像和文件。</td>
    </tr>
    </tbody>
    </table>
    <p>感谢您探索 TinyMCE 的只读模式！我们希望此演示展示了其多功能性和易用性。</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');
      }
    });
  }
});

访问选项

访问选项

tinycomments_access

设置 tinycomments_access 为 'comment' 时的评论

设置 readonly 为 true 时的评论

`tinycomments_access`

设置 `tinycomments_access` 为 `'comment'` 时的评论

设置 `readonly` 为 `true` 时的评论