TinyMCE React编辑器聚焦显示工具栏、失焦隐藏的实现方案咨询

直接通过编辑器的焦点事件配合简单DOM操作就能实现需求，不用复杂配置，步骤如下：

1. 调整工具栏模式（可选但推荐） #

把默认的floating工具栏模式改成static，这样工具栏会固定在编辑器上方，更容易控制显示状态。如果坚持用floating，后面的DOM选择器要对应调整。

2. 初始化编辑器时绑定焦点事件 #

在初始化配置里通过setup钩子绑定focus和blur事件，同时初始化时默认隐藏工具栏：

tinymce.init({
  selector: '#你的编辑器ID',
  toolbar_mode: 'static',
  toolbar: 'undo redo bold italic alignleft aligncenter alignright', // 按需配置你的工具栏按钮
  setup: function(editor) {
    // 编辑器初始化完成后，默认隐藏工具栏
    editor.on('init', () => {
      editor.getContainer().querySelector('.tox-toolbar').style.display = 'none';
    });

    // 编辑器获焦时显示工具栏
    editor.on('focus', () => {
      editor.getContainer().querySelector('.tox-toolbar').style.display = 'flex';
    });

    // 编辑器失焦时隐藏工具栏
    editor.on('blur', () => {
      editor.getContainer().querySelector('.tox-toolbar').style.display = 'none';
    });
  }
});

3. 可选：添加过渡动画优化体验 #

如果觉得显示隐藏太生硬，可以加个CSS过渡效果：

.tox-toolbar {
  transition: all 0.2s ease;
}

要是用floating模式，把代码里的.tox-toolbar换成.tox-floating-toolbar即可。

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