如何在TinyMCE只读模式下查看Comment插件的评论内容

核心问题在于TinyMCE默认的readonly: true会全局禁用所有插件的交互逻辑，包括Comment插件的高亮渲染和点击事件。你可以通过以下两种方式解决：

方式一：初始化时配置只读模式并保留评论交互 #

不要直接在init里设置readonly: true，改用setup函数手动控制：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'comment',
  toolbar: 'comment',
  comment_author: '当前登录用户', // 替换为实际用户名
  setup: function(editor) {
    editor.on('init', function() {
      // 先设置编辑器内容为只读
      editor.setMode('readonly');
      // 单独开启评论插件的可查看状态
      editor.plugins.comment.setReadonly(false);
    });
  }
});

方式二：动态切换只读模式时保留评论交互 #

如果需要通过按钮等控件动态切换只读状态，用以下逻辑：

function toggleEditorReadonly(isReadonly) {
  const editor = tinymce.get('your-editor-id');
  // 切换编辑器的只读模式
  editor.setMode(isReadonly ? 'readonly' : 'design');
  // 强制评论插件保持可查看状态（不受编辑器只读影响）
  editor.plugins.comment.setReadonly(false);
}

关键说明 #

• 直接设置readonly: true会让TinyMCE锁定整个编辑器实例，包括所有插件的功能，所以必须分开控制编辑器内容只读和评论插件的交互权限。
• 确保你的TinyMCE Comment插件是最新版本，旧版本可能没有setReadonly这个API。

内容的提问来源于stack exchange，提问作者Howdy