如何在Sun Editor中将React state值插入带预设值的HTML模板？

你可以按照以下逻辑完成模板变量替换的需求：

• 提前为所有预设邀请函模板配置统一格式的占位符，比如用{{title}}、{{eventDate}}、{{eventTime}}这类和普通文本区分度高的标识，避免替换时误伤正常内容。
• 给suneditor-react实例绑定ref，方便调用编辑器内置方法读写内容：

import SunEditor from 'suneditor-react';
import { useRef, useState, useEffect } from 'react';

const InvitationEditor = () => {
  const editorRef = useRef(null);
  // 存储未替换占位符的原始模板，避免替换后丢失占位符无法二次更新
  const [originalTemplate, setOriginalTemplate] = useState('');
  // 你的表单状态，存储用户输入的标题、日期、时间等内容
  const [formState, setFormState] = useState({
    title: '',
    date: '',
    time: ''
  });

  // 替换逻辑
  const replaceTemplateVariables = (template) => {
    const replaceMap = {
      '{{title}}': formState.title,
      '{{eventDate}}': formState.date,
      '{{eventTime}}': formState.time,
      // 其他需要替换的变量按格式新增即可
    };
    let processedContent = template;
    Object.entries(replaceMap).forEach(([placeholder, realValue]) => {
      // 全局匹配，处理同一占位符多次出现的场景
      processedContent = processedContent.replaceAll(placeholder, realValue);
    });
    return processedContent;
  };

  // 下拉选择模板的触发逻辑
  const handleTemplateSelect = (selectedTemplate) => {
    setOriginalTemplate(selectedTemplate);
    const finalContent = replaceTemplateVariables(selectedTemplate);
    editorRef.current.editor.setContents(finalContent);
  };

  // 监听表单输入变化，实时更新编辑器内容（可选，不需要可以删掉）
  useEffect(() => {
    if (!originalTemplate) return;
    const finalContent = replaceTemplateVariables(originalTemplate);
    editorRef.current.editor.setContents(finalContent);
  }, [formState]);

  return (
    <div>
      {/* 你的输入框、下拉选择框组件 */}
      <SunEditor ref={editorRef} /* 你原有的编辑器配置 */ />
    </div>
  )
}

• 额外注意：如果允许用户手动修改编辑器内的文本，建议增加交互开关让用户选择是否覆盖手动编辑的内容，避免自动替换逻辑误伤用户自定义的内容。如果不需要实时替换，也可以把替换逻辑放到用户点击「预览」「保存」按钮的时候再触发。

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