本文解决 TinyMCE tinycomments_create 回调无法读取最新 highlightedText 状态的问题：因闭包捕获初始值导致始终为空字符串；核心方案是用 useRef 存储可变的最新选中文本，确保回调内访问的是实时值。
本文解决 tinymce `tinycomments_create` 回调无法读取最新 `highlightedtext` 状态的问题：因闭包捕获初始值导致始终为空字符串；核心方案是用 `useref` 存储可变的最新选中文本，确保回调内访问的是实时值。
在基于 React + TinyMCE 的富文本评论功能开发中，一个常见需求是：用户高亮一段文字后点击「添加评论」，将选中的文本连同评论内容一并提交至后端。但开发者常遇到这样一个关键问题——tinycomments_create 回调函数中读取的 highlightedText 始终为初始空字符串，而非用户最新选中的内容。
根本原因在于：tinycomments_create 是在组件首次渲染时被传入 TinyMCE 配置的，它形成了一个闭包，捕获了当时 highlightedText 的值（即 useState 初始化的 ""）。后续 setHighlightedText 虽然更新了状态并触发重渲染，但 TinyMCE 并不会重新读取该函数，因此回调内部永远访问不到新值。
✅ 正确解法：使用 useRef 替代 useState 来存储选中文本useRef 提供了一个可变的、跨渲染周期共享的引用对象，其 .current 属性可随时读写，且不触发重渲染——这正是我们需要的“状态快照容器”。
以下是重构后的关键代码：
import { Editor as EditorMce } from "@tinymce/tinymce-react";
import { useState, useRef, useCallback } from "react";
function Editor() {
// ✅ 使用 useRef 存储最新选中文本（不触发渲染）
const highlightedText = useRef<string>("");
// ✅ 在事件监听中直接更新 ref.current
const initInstanceCallback = useCallback((editor) => {
editor.on("MouseUp", (e) => {
const selection = e.view.getSelection()?.toString();
if (selection && selection.trim()) {
highlightedText.current = selection.trim();
}
});
}, []);
// ✅ create 回调中直接读取最新值
const tinycomments_create = useCallback(
(req, done, fail) => {
const { content, createdAt } = req;
console.log("当前选中文本:", highlightedText.current); // ✅ 总是最新值
fetch("my-backend-endpoint", {
method: "POST",
body: JSON.stringify({
content,
createdAt,
highlightedText: highlightedText.current, // ← 关键：读取 ref.current
}),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
})
.then((response) => {
if (!response.ok) throw new Error("Failed to create comment");
return response.json();
})
.then((req2) => {
done({ conversationUid: req2.id });
})
.catch(fail);
},
[] // 无依赖项，避免重复创建
);
return (
<EditorMce
value={session?.sessionText || ""}
onEditorChange={handleOnEditorChange}
init={{
init_instance_callback: initInstanceCallback,
plugins: ["tinycomments", /* 其他插件 */],
toolbar: "addcomment showcomments ...",
tinycomments_create,
// 其他配置...
}}
/>
);
}
export default Editor;? 注意事项与最佳实践：
-
useRef不会触发 UI 更新，因此仅当不需要在界面上显示选中文本时才单独使用它。若需同步展示（如旁栏预览选中内容），应同时保留useState用于 UI，useRef用于逻辑：const [uiHighlightedText, setUiHighlightedText] = useState(""); const highlightedText = useRef(""); // 更新时两者同步 highlightedText.current = selection; setUiHighlightedText(selection); 务必为
tinycomments_create和init_instance_callback添加useCallback，防止因函数引用变化导致 TinyMCE 重复初始化或内存泄漏。MouseUp事件可能在非编辑区域触发，建议增加editor.getContent()或editor.selection.isCollapsed()等校验，确保选区有效。若需支持键盘快捷键（如
Ctrl+Enter）触发评论，应在keydown中同样更新highlightedText.current。
通过 useRef 解耦「数据读写」与「UI 渲染」，你就能确保 TinyMCE 内部回调始终拿到真实、即时的用户交互结果——这是处理第三方库异步回调与 React 状态协同的经典范式。
