React中如何拆分TinyMCE文本为区块，仅同步修改区块至后端？

我开发了一个集成TinyMCE编辑器的React应用，希望仅将编辑器中被修改的特定区块内容保存至后端。原生JS+HTML里可以通过带ID的div获取元素引用修改对应部分，但React的实现逻辑不一样。

我尝试用字典结构的state变量渲染后端返回的文本，这个字典以区块名为键，值是包含section_id和html内容的对象，结构示例：

{ 
  header: { section_id: 2, value: "<h1> This is the header </h1>"},
  body: { section_id: 1, value: "<p>Body content</p>" }
  // ...更多区块
}

对应的组件代码：

function MyComponent() {
  // 从后端获取并需根据用户修改更新的state变量
  const [value, setValue] = useState({
    header: { section_id: 2, value: "<h1>This is the header</h1>" },
    body: { section_id: 1, value: "<p>Body</p>" }
  });

  const editorValue = Object.values(value)
    .map((v) => v.value)
    .join("<br/>");

  return (
    <Editor
      value={editorValue}
      onEditorChange={(newValue, editor) => {
        // 需在此识别被修改的区块
        setValue(newValue);
      }}
    />
  );
}

现在需要在onEditorChange时识别出被修改的区块名称，更新对应state键值对并同步到后端。请问基于当前尝试能否实现，或者有其他可行方案？

方案一：给每个区块添加唯一标识分隔符 #

当前用<br/>拼接区块的方式无法区分边界，首先修改拼接逻辑，给每个区块加上用户不可见、不易误编辑的唯一标识，比如HTML注释：

1. 调整editorValue生成逻辑：

const editorValue = Object.entries(value)
  .map(([key, v]) => `<!-- section:${key} -->${v.value}`)
  .join("");

2. 在onEditorChange中解析内容、识别修改区块：

const onEditorChange = (newValue, editor) => {
  // 正则匹配区块标记与对应内容
  const sectionRegex = /<!-- section:(\w+) -->([\s\S]*?)(?=<!-- section:|$)/g;
  const updatedSections = {};
  let match;

  while ((match = sectionRegex.exec(newValue)) !== null) {
    const [, sectionKey, content] = match;
    // 保留原section_id，仅更新内容
    updatedSections[sectionKey] = {
      ...value[sectionKey],
      value: content.trim()
    };
  }

  // 对比原state，筛选出修改的区块
  const changedSections = Object.entries(updatedSections).filter(
    ([key, newSection]) => newSection.value !== value[key]?.value
  );

  // 更新全局state
  setValue(prev => ({ ...prev, ...updatedSections }));

  // 仅同步修改的区块到后端
  if (changedSections.length > 0) {
    const payload = Object.fromEntries(changedSections);
    // 调用后端接口示例：fetch('/api/save-sections', { method: 'POST', body: JSON.stringify(payload) })
  }
};

方案二：利用TinyMCE选区API定位修改区块 #

如果不想用分隔符，可通过编辑器API获取编辑选区，反向定位所属区块：

1. 给每个区块的根元素添加自定义标识属性：

// 初始化或后端返回时，给区块根元素加标记
const initialValue = {
  header: { 
    section_id: 2, 
    value: "<h1 data-section-key='header'>This is the header</h1>" 
  },
  body: { 
    section_id: 1, 
    value: "<p data-section-key='body'>Body</p>" 
  }
};

2. 在onEditorChange中通过选区定位区块：

const onEditorChange = (newValue, editor) => {
  // 获取当前编辑的选区节点
  const selection = editor.selection.getNode();
  // 向上查找带自定义标识的父元素
  const sectionElement = selection.closest('[data-section-key]');
  if (!sectionElement) return;

  const sectionKey = sectionElement.getAttribute('data-section-key');
  const sectionContent = sectionElement.outerHTML;

  // 对比原内容，确认修改后更新并同步
  if (value[sectionKey].value !== sectionContent) {
    setValue(prev => ({
      ...prev,
      [sectionKey]: { ...prev[sectionKey], value: sectionContent }
    }));
    // 同步单个区块到后端示例：fetch(`/api/save-section`, { method: 'POST', body: JSON.stringify(value[sectionKey]) })
  }
};

注：该方案更适合单区块编辑场景，若同时修改多区块，需结合全内容对比补充识别。

方案三：拆分多个独立TinyMCE编辑器（最稳妥） #

如果区块独立性强，直接给每个区块单独渲染编辑器，天然对应区块的修改事件：

function MyComponent() {
  const [value, setValue] = useState({
    header: { section_id: 2, value: "<h1>This is the header</h1>" },
    body: { section_id: 1, value: "<p>Body</p>" }
  });

  const handleSectionChange = (sectionKey, newValue) => {
    const updatedSection = { ...value[sectionKey], value: newValue };
    setValue(prev => ({ ...prev, [sectionKey]: updatedSection }));
    // 同步单个区块到后端示例：fetch('/api/save-section', { method: 'POST', body: JSON.stringify(updatedSection) })
  };

  return (
    <div>
      {Object.entries(value).map(([key, section]) => (
        <div key={key} style={{ marginBottom: '20px' }}>
          <h3>{key}</h3>
          <Editor
            value={section.value}
            onEditorChange={(newValue) => handleSectionChange(key, newValue)}
          />
        </div>
      ))}
    </div>
  );
}

该方案逻辑最简单，无需解析拼接内容，维护成本最低，推荐优先采用。

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