如何在编辑器处于disabled模式时仍可使用inline toolbar？

方法一：用TinyMCE原生只读模式替代React组件的disabled属性 #

放弃使用<Editor>组件的disabled属性，改用TinyMCE初始化配置里的readonly: true。这种模式下编辑器处于只读状态，但允许选中文本触发上下文工具栏，同时能自定义按钮的可用性。

示例代码 #

import { Editor } from '@tinymce/tinymce-react';

// 只读权限用户的编辑器配置
<Editor
  apiKey="你的API密钥"
  init={{
    readonly: true,
    // 不需要顶部工具栏可以隐藏
    toolbar: false,
    setup: (editor) => {
      // 添加仅含「添加注释」的上下文工具栏
      editor.addContextToolbar((selection) => {
        // 只有选中文本时才显示工具栏
        if (selection.isCollapsed()) return false;
        
        return [
          {
            text: '添加注释',
            icon: 'comment',
            onAction: () => {
              // 执行添加注释的逻辑
              const selectedText = editor.selection.getContent({ format: 'text' });
              // 这里调用你的注释添加逻辑或接口
            },
            // 强制按钮在只读模式下可用
            disabled: false
          }
        ];
      });
    },
    content_style: 'body { font-family: Arial, sans-serif; }'
  }}
/>

注意事项 #

• 确保init配置里没有和readonly冲突的设置，比如手动设置contenteditable: true会覆盖只读状态。
• 若之前readonly: true无效，检查@tinymce/tinymce-react版本，建议升级到最新稳定版，避免版本兼容问题。

方法二：CSS强制显示Disabled状态下的上下文工具栏 #

如果必须用<Editor>组件的disabled属性，可以通过CSS强制显示工具栏并启用按钮：

/* 显示disabled编辑器的上下文工具栏 */
.tox-tinymce:disabled .tox-context-toolbar {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 启用工具栏按钮 */
.tox-tinymce:disabled .tox-context-toolbar .tox-button {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

注意事项 #

• 这种样式覆盖的方法可能随TinyMCE版本更新失效，需留意版本兼容性。
• 仅针对上下文工具栏设置，避免影响编辑器其他禁用状态的行为。

关键说明 #

• 优先选择原生readonly: true方案，既能保证编辑器只读，又能正常触发上下文工具栏，无需额外样式修改。
• 上下文工具栏的predicate函数可以精准控制显示时机，比如仅选中文本时显示，配合自定义按钮的onAction就能实现仅添加注释的需求。

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