如何在Next.js/React前端代码中向Markdown文本插入变量？

一、核心逻辑梳理 #

你的需求本质是在前端维护可编辑变量，实时替换Markdown模板中的占位符，生成最终Markdown文件供后端使用。Turndown是HTML转Markdown的工具，对你的场景来说非必需；CodeMirror则是用于实现前端可视化Markdown编辑的组件，若需要用户直接编辑Markdown内容可选用。

二、基础场景实现（无需Turndown） #

1. 定义带占位符的Markdown模板 #

先把需要替换的变量用统一标记（比如{{变量名}}）定义成模板字符串或单独文件：

# 法律文书模板
当事人姓名：{{clientName}}
案件编号：{{caseId}}
诉求内容：{{claimContent}}

2. Next.js组件实现变量输入与替换 #

用React状态管理变量，编写替换函数将占位符替换为输入值，同时支持将生成的Markdown传给后端：

import { useState } from 'react';

export default function MarkdownGenerator() {
  // 维护变量状态
  const [variables, setVariables] = useState({
    clientName: '',
    caseId: '',
    claimContent: ''
  });
  
  // Markdown模板
  const markdownTemplate = `# 法律文书模板
当事人姓名：{{clientName}}
案件编号：{{caseId}}
诉求内容：{{claimContent}}`;

  // 替换占位符生成最终Markdown
  const getFinalMarkdown = () => {
    let result = markdownTemplate;
    Object.entries(variables).forEach(([key, value]) => {
      const regex = new RegExp(`{{${key}}}`, 'g');
      result = result.replace(regex, value);
    });
    return result;
  };

  // 处理输入变更
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setVariables(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className="container">
      {/* 变量输入表单 */}
      <div className="input-group">
        <label>当事人姓名：</label>
        <input 
          type="text" 
          name="clientName" 
          value={variables.clientName} 
          onChange={handleInputChange} 
        />
      </div>
      <div className="input-group">
        <label>案件编号：</label>
        <input 
          type="text" 
          name="caseId" 
          value={variables.caseId} 
          onChange={handleInputChange} 
        />
      </div>
      <div className="input-group">
        <label>诉求内容：</label>
        <textarea 
          name="claimContent" 
          value={variables.claimContent} 
          onChange={handleInputChange} 
          rows={5}
        />
      </div>

      {/* 预览生成的Markdown */}
      <div className="preview-section">
        <h3>生成结果：</h3>
        <pre>{getFinalMarkdown()}</pre>
      </div>

      {/* 提交到后端 */}
      <button onClick={() => {
        fetch('/api/save-markdown', {
          method: 'POST',
          body: JSON.stringify({ content: getFinalMarkdown() }),
          headers: { 'Content-Type': 'application/json' }
        });
      }}>保存至后端</button>
    </div>
  );
}

三、集成CodeMirror实现可视化编辑 #

如果需要用户直接编辑Markdown模板（同时保留变量替换功能），可以使用React版CodeMirror：

1. 安装依赖 #

npm install @uiw/react-codemirror @codemirror/lang-markdown

2. 组件实现 #

import { useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { markdown } from '@codemirror/lang-markdown';

export default function MarkdownEditor() {
  const [templateContent, setTemplateContent] = useState(`# 法律文书模板
当事人姓名：{{clientName}}
案件编号：{{caseId}}
诉求内容：{{claimContent}}`);
  const [variables, setVariables] = useState({
    clientName: '',
    caseId: '',
    claimContent: ''
  });

  // 变量替换预览
  const previewResult = () => {
    let result = templateContent;
    Object.entries(variables).forEach(([key, value]) => {
      const regex = new RegExp(`{{${key}}}`, 'g');
      result = result.replace(regex, value);
    });
    return result;
  };

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>
      {/* Markdown编辑器 */}
      <div style={{ flex: 1 }}>
        <h3>编辑模板</h3>
        <CodeMirror
          value={templateContent}
          onChange={setTemplateContent}
          extensions={[markdown()]}
          height="500px"
        />
      </div>

      {/* 变量设置区 */}
      <div style={{ width: '250px' }}>
        <h3>变量配置</h3>
        <div style={{ marginBottom: '15px' }}>
          <label>当事人姓名：</label>
          <input 
            type="text" 
            value={variables.clientName} 
            onChange={(e) => setVariables(prev => ({...prev, clientName: e.target.value}))}
            style={{ width: '100%' }}
          />
        </div>
        <div style={{ marginBottom: '15px' }}>
          <label>案件编号：</label>
          <input 
            type="text" 
            value={variables.caseId} 
            onChange={(e) => setVariables(prev => ({...prev, caseId: e.target.value}))}
            style={{ width: '100%' }}
          />
        </div>
        <div>
          <label>诉求内容：</label>
          <textarea 
            value={variables.claimContent} 
            onChange={(e) => setVariables(prev => ({...prev, claimContent: e.target.value}))}
            rows={5}
            style={{ width: '100%' }}
          />
        </div>
      </div>

      {/* 预览区 */}
      <div style={{ flex: 1 }}>
        <h3>预览结果</h3>
        <pre style={{ height: '450px', overflow: 'auto', border: '1px solid #eee', padding: '10px' }}>{previewResult()}</pre>
        <button onClick={() => {
          fetch('/api/save-markdown', {
            method: 'POST',
            body: JSON.stringify({ content: previewResult() }),
            headers: { 'Content-Type': 'application/json' }
          });
        }}>保存至后端</button>
      </div>
    </div>
  );
}

四、参考项目思路 #

• 核心参考「在线Markdown模板工具」的逻辑：通过占位符标记变量，前端维护变量状态，实时完成替换生成最终内容。
• 若需复杂变量管理（如类型校验、批量导入），可添加对应逻辑，比如用zod做变量格式校验。

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