@tinymce/tinymce-react工具栏Tooltip悬停显示过慢问题咨询

解决方案汇总 #

1. 调整Tooltip内置延迟参数

TinyMCE 内置了tooltip_delay初始化配置项，专门用来控制工具栏按钮悬停后 tooltip 的显示延迟，默认值为500ms，你可以根据需要将其调低到100ms以内甚至0ms，直接添加到你的init配置中即可：

const init = {
  min_height: 600,
  width: '100%',
  menubar: false,
  statusbar: false,
  toolbar1: `link image media hr`,
  // 新增这行配置，单位为毫秒
  tooltip_delay: 50
};

2. 升级依赖版本

你当前使用的@tinymce/tinymce-react@3.12.6存在已知的webkit内核浏览器下tooltip渲染延迟bug，你可以将依赖升级到3.x分支的最新稳定版（^3.14.0），该版本已经修复了Chrome、Safari下的tooltip性能问题，且完全兼容你当前的React 16版本。

3. 避免组件不必要重渲染

如果你的父组件存在频繁更新的状态，会连带TinyEditor组件重复渲染，也会加剧tooltip的延迟情况，你可以用React.memo包裹TinyEditor组件，减少不必要的重渲染：

export const TinyEditor = React.memo(({ editorValue, setEditorValue }) => {
  // 原有逻辑保持不变
})

4. 切换为自托管TinyMCE资源

如果你当前使用的是TinyMCE云加载的资源，网络请求、跨域检测等逻辑也可能带来额外的渲染阻塞，你可以将TinyMCE核心代码下载到本地进行自托管，在init配置中指定tinymce_script_url指向本地资源路径，进一步提升渲染速度。

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