如何将UI端输入的HTML代码发送至Node后端并插入Pug模板展示

• 首先确认react-quill不适用你的场景：react-quill定位为富文本内容编辑器，仅处理页面正文的富文本片段，默认会自动将所有输入内容包裹在<p>标签中，同时会自动过滤<!DOCTYPE>、<html>、<head>等根级文档标签，无法满足完整HTML代码的输入需求。
• 原生textarea完全可以解决你的需求：textarea是纯文本输入控件，不会对输入内容做任何自动修改、标签包裹或内容过滤，输入的内容会原封不动的提交到后端。React中受控textarea的示例写法如下：

import { useState } from 'react';

function HtmlCodeEditor() {
  const [htmlContent, setHtmlContent] = useState('');

  const submitToBackend = async () => {
    await fetch('/你的后端接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ html: htmlContent })
    })
  }

  return (
    <>
      <textarea
        value={htmlContent}
        onChange={(e) => setHtmlContent(e.target.value)}
        rows={25}
        cols={100}
        placeholder="请输入完整HTML代码"
      />
      <button onClick={submitToBackend}>提交代码</button>
    </>
  )
}

• Pug模板渲染注意事项：Pug默认会转义插入的内容避免XSS风险，要直接渲染原始HTML内容，需要使用!=操作符代替常规的=操作符：

// 直接渲染用户输入的完整HTML作为整个页面内容
!= 后端传递的HTML变量名

注意：直接渲染用户输入的原始HTML存在XSS注入风险，若你的服务面向公开用户，建议先对提交的HTML内容做恶意脚本过滤处理。

• 若需要更好的代码编辑体验（比如语法高亮、格式校验、自动缩进），可以替换为CodeMirror、Monaco Editor等专业代码编辑器组件，这类组件同样不会修改输入的原始HTML内容。

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