React集成Trumbowyg编辑器输入时光标跳至开头内容倒序如何解决

React项目集成Trumbowyg富文本编辑器时出现以下异常：

• 每次触发按键事件后，光标自动移动到编辑区域起始位置
• 输入内容最终呈现倒序排列，例如输入单词"start"，最终渲染内容为完全倒序状态

问题相关实现代码如下：

const [content, setContent] = useState();

return (
    <Trumbowyg
        onChange={e => setContent(e.target.innerHTML)}
        data={content}
    />
)

核心诱因是受控模式下的不合理双向绑定触发编辑器全量重绘，丢失光标状态：
每次输入触发onChange回调后，代码会立刻将最新的编辑器内容同步到React state，再将更新后的state作为data属性传回Trumbowyg组件。Trumbowyg接收到新的data值会全量重载编辑区DOM，重载完成后默认将光标重置到内容最起始位置，后续输入的内容会直接插入到已有内容之前，多次输入后就会形成内容倒序的效果。

• 第一步验证重绘问题：临时注释掉组件上的data={content}绑定，测试输入时是否还会出现光标跳转、内容倒序问题，如果注释后输入恢复正常，即可定位是实时受控值回灌导致的重绘故障
• 第二步检查更新逻辑：确认onChange回调是否在每次输入的最早阶段触发全量state更新，是否存在缺失光标状态记录的逻辑
• 第三步确认组件重载行为：通过控制台日志或React DevTools确认每次按键后Trumbowyg实例是否触发了完整内容重载，而非输入内容的增量更新

方案1：使用非受控模式，避免编辑过程中实时回灌内容 #

这是适配Trumbowyg最稳定的方案，编辑过程中不将实时state绑定到data属性，仅在组件初始化时传入初始内容，需要获取内容时再通过onChange或实例方法取值：

// 初始内容可从接口或上层props传入
const initialContent = '';
const [content, setContent] = useState(initialContent);

return (
    <Trumbowyg
        onChange={e => setContent(e.target.innerHTML)}
        // data仅绑定初始值，不关联实时更新的state
        data={initialContent}
    />
)

方案2：必须使用受控绑定时，手动维护光标位置 #

如果业务场景要求必须实时双向绑定内容，可在每次更新前记录当前光标选区，等DOM更新完成后手动恢复光标位置，避免光标被重置到开头：

import { useRef, useState } from 'react';

const [content, setContent] = useState('');
const editorRef = useRef(null);

const handleEditorChange = (e) => {
    // 先记录当前光标选区信息
    const selection = window.getSelection();
    const currentRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
    const newContent = e.target.innerHTML;
    
    setContent(newContent);
    // 等React完成DOM更新后恢复光标位置
    setTimeout(() => {
        if (currentRange && editorRef.current) {
            selection.removeAllRanges();
            selection.addRange(currentRange);
        }
    }, 0);
}

return (
    <Trumbowyg
        ref={editorRef}
        onChange={handleEditorChange}
        data={content}
    />
)

方案3：通过编辑器实例API操作内容，不依赖prop传值 #

放弃prop层面的内容绑定，通过Trumbowyg暴露的实例方法获取、设置内容，从根源避免prop变化触发的组件重绘：

import { useRef, useState } from 'react';

const editorRef = useRef(null);
const [content, setContent] = useState('');

// 需要提交/获取内容时，直接调用编辑器实例方法取最新值
const handleGetContent = () => {
    if (editorRef.current) {
        setContent(editorRef.current.trumbowyg('html'));
    }
};

return (
    <>
        <Trumbowyg
            ref={editorRef}
            // 仅初始化时传入默认内容
            data=""
        />
        <button onClick={handleGetContent}>保存内容</button>
    </>
)

注意：尽量不要在输入过程中高频修改传入Trumbowyg的data属性，该属性设计上主要用于初始化和全量内容替换，高频传值会持续触发编辑器重绘，不仅会导致光标异常，还会带来明显的输入卡顿。

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